/* ============================================================
   equalizer.css - level meter in the bottom-left corner,
                   alive only while the BGM is playing.
   ============================================================ */

.equalizer {
  position: absolute;
  left: 3vw;
  bottom: 4.5vh;
  display: flex;
  align-items: flex-end;
  gap: clamp(5px, 0.52vw, 10px);
  height: clamp(72px, 18vh, 168px);
  z-index: var(--z-panel);
  pointer-events: none;

  /* hidden until the music starts; js/equalizer.js adds .is-playing */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease;
}

.equalizer.is-playing {
  opacity: 1;
  transform: none;
}

/* Each bar is full height with the gradient painted over all of it, and
   is then clipped from the top. Scaling instead would squash the
   gradient into the bar, so a quiet bar would look as pink as a loud
   one - clipping keeps sky at the floor and pink at the peaks. */
.equalizer i {
  display: block;
  width: clamp(6px, 0.8vw, 15px);
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(180deg,
      var(--pink) 0%,
      #b98ad6 42%,
      var(--sky) 100%);
  box-shadow:
    0 0 18px rgba(79, 208, 234, 0.6),
    0 0 46px rgba(255, 111, 160, 0.32);
  clip-path: inset(100% 0 0 0 round 3px);
  will-change: clip-path;
}

/* ---------- the dance ---------- */
/* Only runs while the meter is on screen. Two heights, four durations
   and a spread of negative delays: nothing divides evenly into anything
   else, so the row never falls into step with itself. */
.equalizer.is-playing i {
  animation: eqBounce 0.54s ease-in-out infinite alternate;
}

.equalizer.is-playing i:nth-child(3n) {
  animation-name: eqBounceTall;
}

.equalizer.is-playing i:nth-child(4n + 1) {
  animation-duration: 0.37s;
}

.equalizer.is-playing i:nth-child(4n + 2) {
  animation-duration: 0.67s;
}

.equalizer.is-playing i:nth-child(4n + 3) {
  animation-duration: 0.47s;
}

.equalizer.is-playing i:nth-child(2n) {
  animation-delay: -0.23s;
}

.equalizer.is-playing i:nth-child(3n + 1) {
  animation-delay: -0.45s;
}

.equalizer.is-playing i:nth-child(5n) {
  animation-delay: -0.61s;
}

@keyframes eqBounce {
  from {
    clip-path: inset(72% 0 0 0 round 3px);
  }

  to {
    clip-path: inset(12% 0 0 0 round 3px);
  }
}

@keyframes eqBounceTall {
  from {
    clip-path: inset(86% 0 0 0 round 3px);
  }

  to {
    clip-path: inset(0% 0 0 0 round 3px);
  }
}

@media (prefers-reduced-motion: reduce) {

  .equalizer.is-playing i {
    animation: none;
    clip-path: inset(52% 0 0 0 round 3px);
  }

  .equalizer.is-playing i:nth-child(3n) {
    clip-path: inset(28% 0 0 0 round 3px);
  }
}