/* Custom Liquid Glass Design System */

:root {
  --bg-color: #0A0A0C;
}

/* Prismatic Aurora Glow Orbs */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.45;
  mix-blend-mode: screen;
  pointer-events: none;
}

.orb-1 {
  width: 500px;
  height: 500px;
  top: -10%;
  left: -10%;
  background: radial-gradient(circle, rgba(167, 243, 208, 0.3) 0%, transparent 70%);
  animation: float-orb-1 25s infinite alternate ease-in-out;
}

.orb-2 {
  width: 600px;
  height: 600px;
  bottom: 10%;
  right: -10%;
  background: radial-gradient(circle, rgba(110, 231, 183, 0.2) 0%, transparent 75%);
  animation: float-orb-2 30s infinite alternate ease-in-out;
}

.orb-3 {
  width: 450px;
  height: 450px;
  top: 40%;
  left: 25%;
  background: radial-gradient(circle, rgba(253, 186, 116, 0.25) 0%, transparent 70%);
  animation: float-orb-3 20s infinite alternate ease-in-out;
}

.orb-4 {
  width: 550px;
  height: 550px;
  bottom: -20%;
  left: -10%;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.25) 0%, transparent 70%);
  animation: float-orb-1 28s infinite alternate ease-in-out;
}

@keyframes float-orb-1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(80px, 60px) scale(1.1); }
  100% { transform: translate(-40px, 120px) scale(0.9); }
}

@keyframes float-orb-2 {
  0% { transform: translate(0, 0) scale(1.1); }
  50% { transform: translate(-100px, -80px) scale(0.95); }
  100% { transform: translate(60px, 40px) scale(1.05); }
}

@keyframes float-orb-3 {
  0% { transform: translate(0, 0) scale(0.9); }
  50% { transform: translate(70px, -110px) scale(1.15); }
  100% { transform: translate(-80px, 40px) scale(0.95); }
}

/* Liquid Glass Material Styling */
.liquid-glass {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 
    0 4px 30px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    inset 0 10px 20px rgba(255, 255, 255, 0.02);
}

.liquid-glass:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    inset 0 10px 20px rgba(255, 255, 255, 0.04);
}

/* App Mockup Floating Animation */
.device-mockup {
  animation: float-device 6s infinite ease-in-out;
}

@keyframes float-device {
  0%, 100% {
    transform: translateY(0) rotate(1deg);
    box-shadow: 
      0 25px 60px rgba(0,0,0,0.8),
      0 0 0 1px rgba(255,255,255,0.05);
  }
  50% {
    transform: translateY(-16px) rotate(-1deg);
    box-shadow: 
      0 40px 80px rgba(0,0,0,0.9),
      0 0 0 1px rgba(255,255,255,0.08);
  }
}

/* Glass Spheres decorators */
.glass-sphere {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    inset 0 4px 12px rgba(255, 255, 255, 0.25),
    inset -4px -4px 12px rgba(0,0,0,0.4),
    0 12px 24px rgba(0,0,0,0.3);
  animation: float-sphere 8s infinite ease-in-out;
}

.sphere-a {
  width: 60px;
  height: 60px;
  top: 15%;
  left: -20px;
  animation-duration: 7s;
}

.sphere-b {
  width: 90px;
  height: 90px;
  bottom: 20%;
  right: -45px;
  animation-duration: 9s;
  animation-delay: 1s;
}

@keyframes float-sphere {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.03); }
}

/* Sound Wave Animation */
.animate-wave {
  animation: wave-bar 1.5s infinite ease-in-out alternate;
  transform-origin: bottom;
}

@keyframes wave-bar {
  0% { transform: scaleY(0.2); }
  100% { transform: scaleY(1); }
}

/* Dynamic Glowing Ring on App Screen */
@keyframes glow-ring {
  0%, 100% {
    border-color: rgba(167, 243, 208, 0.2);
    box-shadow: 0 0 10px rgba(167, 243, 208, 0.1);
  }
  50% {
    border-color: rgba(167, 243, 208, 0.45);
    box-shadow: 0 0 25px rgba(167, 243, 208, 0.25);
  }
}
.animate-glow-ring {
  animation: glow-ring 4s infinite ease-in-out;
}

/* visionOS Glare Shine */
@keyframes glare-shine {
  0% { left: -100%; }
  100% { left: 200%; }
}
.animate-glare {
  animation: glare-shine 2s ease-in-out;
}

/* Audio Visualizer Waves */
.nox-wave {
  width: 4px;
  height: 8px;
  background: rgba(34, 211, 238, 0.5); /* cyan-400 with opacity */
  border-radius: 2px;
  transition: height 0.15s ease;
}

#nox-visualizer.is-playing .nox-wave {
  background: rgba(34, 211, 238, 1);
  animation: waveAnim 0.8s ease-in-out infinite alternate;
}

#nox-visualizer.is-playing .nox-wave:nth-child(2) { animation-delay: 0.2s; }
#nox-visualizer.is-playing .nox-wave:nth-child(3) { animation-delay: 0.4s; }
#nox-visualizer.is-playing .nox-wave:nth-child(4) { animation-delay: 0.1s; }
#nox-visualizer.is-playing .nox-wave:nth-child(5) { animation-delay: 0.3s; }

@keyframes waveAnim {
  0% { height: 8px; }
  100% { height: 32px; background: rgba(167, 139, 250, 1); /* purple-400 */ }
}