@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Outfit:wght@300;400;500;600;700&display=swap');

/* Base Configurations */
:root {
  --color-neon-cyan: #00f0ff;
  --color-neon-orange: #ff5a00;
  --color-dark-bg: #050505;
  --color-dark-card: #0f0f12;
  --color-cyan-glow-rgb: 0, 240, 255;
  --color-orange-glow-rgb: 255, 90, 0;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--color-dark-bg);
  color: #e5e7eb;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, .font-tech {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.05em;
}

/* Background Grids and Technical Elements */
.tech-grid {
  background-size: 50px 50px;
  background-image: 
    linear-gradient(to right, rgba(0, 240, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 240, 255, 0.02) 1px, transparent 1px);
  position: relative;
}

.tech-grid::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% 50%, transparent 20%, var(--color-dark-bg) 80%);
  pointer-events: none;
}

/* Glassmorphism Cards */
.glass-card {
  background: rgba(15, 15, 18, 0.7);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(0, 240, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 10px 40px 0 rgba(0, 240, 255, 0.1);
}

/* Neon Glow Classes */
.glow-cyan {
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15), inset 0 0 10px rgba(0, 240, 255, 0.05);
  transition: all 0.3s ease-in-out;
}

.glow-cyan:hover {
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.4), inset 0 0 15px rgba(0, 240, 255, 0.1);
}

.glow-orange {
  box-shadow: 0 0 15px rgba(255, 90, 0, 0.2), inset 0 0 10px rgba(255, 90, 0, 0.05);
  transition: all 0.3s ease-in-out;
}

.glow-orange:hover {
  box-shadow: 0 0 25px rgba(255, 90, 0, 0.5), inset 0 0 15px rgba(255, 90, 0, 0.15);
}

.glow-green {
  box-shadow: 0 0 15px rgba(29, 185, 84, 0.2), inset 0 0 10px rgba(29, 185, 84, 0.05);
  transition: all 0.3s ease-in-out;
}

.glow-green:hover {
  box-shadow: 0 0 25px rgba(29, 185, 84, 0.5), inset 0 0 15px rgba(29, 185, 84, 0.15);
}

.glow-pulse-cyan {
  animation: pulseCyan 3s infinite ease-in-out;
}

.glow-pulse-orange {
  animation: pulseOrange 3.5s infinite ease-in-out;
}

/* Custom Animations */
@keyframes pulseCyan {
  0%, 100% {
    border-color: rgba(0, 240, 255, 0.1);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.05), inset 0 0 5px rgba(0, 240, 255, 0.02);
  }
  50% {
    border-color: rgba(0, 240, 255, 0.45);
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.25), inset 0 0 15px rgba(0, 240, 255, 0.1);
  }
}

@keyframes pulseOrange {
  0%, 100% {
    border-color: rgba(255, 90, 0, 0.15);
    box-shadow: 0 0 12px rgba(255, 90, 0, 0.08);
  }
  50% {
    border-color: rgba(255, 90, 0, 0.6);
    box-shadow: 0 0 30px rgba(255, 90, 0, 0.35);
  }
}

/* Vinyl Rotate Animation */
@keyframes spinDisc {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spinDisc 20s linear infinite;
}

.animate-spin-paused {
  animation-play-state: paused;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-dark-bg);
}

::-webkit-scrollbar-thumb {
  background: #1a1a24;
  border-radius: 4px;
  border: 2px solid var(--color-dark-bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-neon-cyan);
}

/* Input Fields Styling */
.neon-input {
  background: rgba(10, 10, 12, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.15);
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}

.neon-input:focus {
  outline: none;
  border-color: var(--color-neon-cyan);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3), inset 0 0 8px rgba(0, 240, 255, 0.1);
  background: rgba(15, 15, 20, 0.9);
}

.neon-input-orange:focus {
  outline: none;
  border-color: var(--color-neon-orange);
  box-shadow: 0 0 15px rgba(255, 90, 0, 0.3), inset 0 0 8px rgba(255, 90, 0, 0.1);
}

/* Equalizer Visualization Dummies */
.eq-bar {
  width: 3px;
  height: 50%;
  background-color: var(--color-neon-cyan);
  margin: 0 1px;
  transform-origin: bottom;
}

.playing .eq-bar {
  animation: bounceBar 1.2s ease-in-out infinite alternate;
}

@keyframes bounceBar {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1.3); }
}

/* Equalizer delays for realism */
.eq-bar:nth-child(2) { animation-delay: 0.15s; }
.eq-bar:nth-child(3) { animation-delay: 0.4s; }
.eq-bar:nth-child(4) { animation-delay: 0.25s; }
.eq-bar:nth-child(5) { animation-delay: 0.6s; }
.eq-bar:nth-child(6) { animation-delay: 0.3s; }
.eq-bar:nth-child(7) { animation-delay: 0.5s; }
.eq-bar:nth-child(8) { animation-delay: 0.1s; }
.eq-bar:nth-child(9) { animation-delay: 0.45s; }
.eq-bar:nth-child(10) { animation-delay: 0.2s; }
.eq-bar:nth-child(11) { animation-delay: 0.55s; }
.eq-bar:nth-child(12) { animation-delay: 0.35s; }

/* Interactive Waveform SVG Animation */
.waveform-progress {
  transition: width 0.1s linear;
}

/* Mobile Nav Toggle animation */
.menu-btn-bar {
  transition: all 0.3s ease-in-out;
}

.menu-open .menu-btn-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-open .menu-btn-bar:nth-child(2) {
  opacity: 0;
}

.menu-open .menu-btn-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}