/* RetroCrave — Equalizer Bars (CSS-only) */
.rc-eq{
  --bars: 5;
  --barW: 10px;
  --gap: 8px;
  --height: 52px;
  --speed: 900ms;
  --color: #5ef1ff;
  --glow: .28;

  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: var(--gap);
  height: var(--height);
  width: calc(var(--bars) * var(--barW) + (var(--bars) - 1) * var(--gap));
  filter: drop-shadow(0 0 14px rgba(94,241,255,var(--glow)));
}
.rc-eq::before,
.rc-eq::after{ content:""; }
.rc-eq,
.rc-eq::before,
.rc-eq::after{
  --bar-bg: var(--color);
  background:
    linear-gradient(var(--bar-bg) 0 0) 0% 100% / var(--barW) 30% no-repeat,
    linear-gradient(var(--bar-bg) 0 0) 25% 100% / var(--barW) 55% no-repeat,
    linear-gradient(var(--bar-bg) 0 0) 50% 100% / var(--barW) 75% no-repeat,
    linear-gradient(var(--bar-bg) 0 0) 75% 100% / var(--barW) 55% no-repeat,
    linear-gradient(var(--bar-bg) 0 0) 100% 100% / var(--barW) 35% no-repeat;
  background-repeat: no-repeat;
  border-radius: 6px;
  -webkit-mask:
    radial-gradient(8px at 0    100%,#0000 99%,#000 101%) 0    0/25% 100%,
    radial-gradient(8px at 50%  100%,#0000 99%,#000 101%) 50%  0/25% 100%,
    radial-gradient(8px at 100% 100%,#0000 99%,#000 101%) 100% 0/25% 100%;
  mask:
    radial-gradient(8px at 0    100%,#0000 99%,#000 101%) 0    0/25% 100%,
    radial-gradient(8px at 50%  100%,#0000 99%,#000 101%) 50%  0/25% 100%,
    radial-gradient(8px at 100% 100%,#0000 99%,#000 101%) 100% 0/25% 100%;
  animation: rc-eq-anim var(--speed) ease-in-out infinite;
}
.rc-eq{ animation-delay: 0ms; }
.rc-eq::before{ animation-delay: calc(var(--speed) * -.33); }
.rc-eq::after{  animation-delay: calc(var(--speed) * -.66); }
@keyframes rc-eq-anim{
  0%,100%{
    background-size:
      var(--barW) 30%, var(--barW) 55%, var(--barW) 75%, var(--barW) 55%, var(--barW) 35%;
  }
  50%{
    background-size:
      var(--barW) 68%, var(--barW) 35%, var(--barW) 92%, var(--barW) 40%, var(--barW) 70%;
  }
}
.rc-eq.spectrum,
.rc-eq.spectrum::before,
.rc-eq.spectrum::after{
  --bar-bg: linear-gradient(180deg,#5ef1ff,#ff6bd6 60%,#ffe66b);
}
.rc-eq.center,
.rc-eq.center::before,
.rc-eq.center::after{ animation-name: rc-eq-anim-center; }
@keyframes rc-eq-anim-center{
  0%,100%{
    background-size:
      var(--barW) 28%, var(--barW) 52%, var(--barW) 68%, var(--barW) 52%, var(--barW) 28%;
  }
  50%{
    background-size:
      var(--barW) 55%, var(--barW) 42%, var(--barW) 96%, var(--barW) 42%, var(--barW) 55%;
  }
}
@media (prefers-reduced-motion: reduce){
  .rc-eq, .rc-eq::before, .rc-eq::after{ animation: none !important }
}