.music-equalizer {
  display: flex;
  position: relative;
  bottom: 160px;
  z-index: -1;
  justify-content: flex-end;
  align-items: end;
  gap: 5px;
  height: 55px;
  margin: 18px auto;
  filter: drop-shadow(0 0 14px rgba(124,247,255,0.2));
}

.music-equalizer span {
  width: 6px;
  height: 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(124,247,255,0.32), rgba(124,247,255,0.68), rgba(255,255,255,0.98));
  box-shadow: 0 0 calc(6px + var(--bar-glow, 0) * 12px) rgba(124,247,255,0.24);
  animation: equalizer 1s infinite ease-in-out;
  animation-play-state: paused;
  transform-origin: bottom center;
  filter: brightness(calc(1 + var(--eq-intensity, 0) + var(--bar-scale, 0) * 0.18));
  opacity: calc(0.55 + var(--bar-opacity, 0));
}

.music-equalizer.active {
  filter: drop-shadow(0 0 18px rgba(124,247,255,0.35));
}

.music-equalizer.active span {
  animation-play-state: running;
}

.music-equalizer.active span {
  box-shadow: 0 0 calc(10px + var(--eq-intensity, 0) * 10px) rgba(124,247,255,0.4);
}

.music-equalizer span:nth-child(1) { animation-delay: .1s; }
.music-equalizer span:nth-child(2) { animation-delay: .3s; }
.music-equalizer span:nth-child(3) { animation-delay: .5s; }
.music-equalizer span:nth-child(4) { animation-delay: .2s; }
.music-equalizer span:nth-child(5) { animation-delay: .4s; }
.music-equalizer span:nth-child(6) { animation-delay: .6s; }
.music-equalizer span:nth-child(7) { animation-delay: .25s; }
.music-equalizer span:nth-child(8) { animation-delay: .45s; }
.music-equalizer span:nth-child(9) { animation-delay: .15s; }
.music-equalizer span:nth-child(10) { animation-delay: .35s; }

@keyframes equalizer {
  0%, 100% { transform: scaleY(calc(0.75 + var(--bar-scale, 0))) translateY(0); }
  50% { transform: scaleY(calc(1.8 + var(--bar-scale, 0))) translateY(-2px); }
}