| |
| @keyframes gradient { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
|
|
| @keyframes pulse-slow { |
| 0%, 100% { opacity: 0.3; transform: scale(1); } |
| 50% { opacity: 0.5; transform: scale(1.1); } |
| } |
|
|
| @keyframes text-shimmer { |
| 0% { background-position: -200% center; } |
| 100% { background-position: 200% center; } |
| } |
|
|
| @keyframes float { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| } |
|
|
| .animate-gradient { |
| background-size: 400% 400%; |
| animation: gradient 15s ease infinite; |
| } |
|
|
| .animate-pulse-slow { |
| animation: pulse-slow 8s ease-in-out infinite; |
| } |
|
|
| .animate-text-shimmer { |
| background-size: 200% auto; |
| animation: text-shimmer 5s linear infinite; |
| } |
|
|
| |
| .glass-panel { |
| background: rgba(20, 20, 40, 0.6); |
| backdrop-filter: blur(12px); |
| -webkit-backdrop-filter: blur(12px); |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); |
| } |
|
|
| |
| input[type="range"] { |
| -webkit-appearance: none; |
| background: transparent; |
| } |
|
|
| input[type="range"]::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| height: 20px; |
| width: 20px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #06b6d4, #3b82f6); |
| cursor: pointer; |
| box-shadow: 0 0 10px rgba(6, 182, 212, 0.5), 0 0 20px rgba(6, 182, 212, 0.3); |
| margin-top: -8px; |
| border: 2px solid white; |
| transition: transform 0.2s; |
| } |
|
|
| input[type="range"]::-webkit-slider-thumb:hover { |
| transform: scale(1.2); |
| box-shadow: 0 0 15px rgba(6, 182, 212, 0.8), 0 0 30px rgba(6, 182, 212, 0.5); |
| } |
|
|
| input[type="range"]::-webkit-slider-runnable-track { |
| width: 100%; |
| height: 4px; |
| cursor: pointer; |
| background: rgba(0, 0, 0, 0.3); |
| border-radius: 2px; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| input[type="range"]:focus { |
| outline: none; |
| } |
|
|
| |
| #beatSlider::-webkit-slider-thumb { |
| background: linear-gradient(135deg, #ec4899, #f472b6); |
| box-shadow: 0 0 10px rgba(236, 72, 153, 0.5), 0 0 20px rgba(236, 72, 153, 0.3); |
| } |
|
|
| #beatSlider::-webkit-slider-thumb:hover { |
| box-shadow: 0 0 15px rgba(236, 72, 153, 0.8), 0 0 30px rgba(236, 72, 153, 0.5); |
| } |
|
|
| |
| #noiseVolumeSlider::-webkit-slider-thumb, |
| #spatialWidthSlider::-webkit-slider-thumb { |
| background: linear-gradient(135deg, #f59e0b, #fbbf24); |
| box-shadow: 0 0 10px rgba(245, 158, 11, 0.5), 0 0 20px rgba(245, 158, 11, 0.3); |
| } |
|
|
| |
| .mode-btn.active { |
| box-shadow: 0 0 20px rgba(6, 182, 212, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.2); |
| transform: scale(1.05); |
| } |
|
|
| .ramp-btn.active { |
| box-shadow: 0 0 20px rgba(168, 85, 247, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.2); |
| } |
|
|
| .noise-btn.playing { |
| box-shadow: 0 0 30px currentColor; |
| animation: pulse-border 2s ease-in-out infinite; |
| } |
|
|
| @keyframes pulse-border { |
| 0%, 100% { border-color: rgba(255, 255, 255, 0.5); } |
| 50% { border-color: rgba(255, 255, 255, 1); } |
| } |
|
|
| |
| .brainwave-btn { |
| transition: all 0.3s ease; |
| } |
|
|
| .brainwave-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .glass-panel { |
| padding: 1.5rem; |
| } |
| |
| h1 { |
| font-size: 2.5rem; |
| } |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 10px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: rgba(0, 0, 0, 0.3); |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: linear-gradient(180deg, #06b6d4, #ec4899); |
| border-radius: 5px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: linear-gradient(180deg, #22d3ee, #f472b6); |
| } |
|
|
| |
| ::selection { |
| background: rgba(236, 72, 153, 0.4); |
| color: white; |
| } |
