.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--amb-op);
  animation: pipuHue 30s linear infinite;
}

.ambient span {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  scale: var(--music-scale, 1);
  filter: blur(30px) brightness(var(--music-light, 1));
}

.a {
  left: -22vmax;
  top: -28vmax;
  width: 70vmax;
  height: 70vmax;
  background: radial-gradient(circle, rgba(47, 128, 255, 0.75) 0%, transparent 62%);
  animation: pipuDrift1 16s ease-in-out infinite alternate;
}

.b {
  right: -20vmax;
  top: 8vh;
  width: 60vmax;
  height: 60vmax;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.6) 0%, transparent 62%);
  animation: pipuDrift2 21s ease-in-out infinite alternate;
}

.c {
  left: 22vw;
  bottom: -32vmax;
  width: 55vmax;
  height: 55vmax;
  background: radial-gradient(circle, var(--amb-c3, rgba(53, 211, 255, 0.6)) 0%, transparent 62%);
  animation: pipuDrift3 26s ease-in-out infinite alternate;
  transition: background 1.2s;
}

@keyframes pipuDrift1 {
  0% {
    transform: translate(-6%, -4%) scale(1);
  }
  35% {
    transform: translate(45%, 28%) scale(1.2);
  }
  70% {
    transform: translate(15%, 60%) scale(0.9);
  }
  100% {
    transform: translate(60%, -5%) scale(1.1);
  }
}

@keyframes pipuDrift2 {
  0% {
    transform: translate(4%, 0) scale(1.05);
  }
  40% {
    transform: translate(-50%, 40%) scale(0.9);
  }
  75% {
    transform: translate(-20%, -25%) scale(1.2);
  }
  100% {
    transform: translate(-60%, 15%) scale(1);
  }
}

@keyframes pipuDrift3 {
  0% {
    transform: translate(0, 0) scale(0.95);
  }
  30% {
    transform: translate(-40%, -45%) scale(1.15);
  }
  65% {
    transform: translate(45%, -25%) scale(1);
  }
  100% {
    transform: translate(10%, -55%) scale(1.2);
  }
}

@keyframes pipuHue {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(-35deg);
  }
  100% {
    filter: hue-rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient,
  .ambient span {
    animation: none;
    scale: 1;
  }
}