/* Velo spectrum equalizer — mini, sheet, deck */

.velo-eq {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 280ms var(--velo-ease, ease), transform 280ms var(--velo-ease, ease);
}

.velo-eq.is-live {
  opacity: 1;
  transform: translateY(0);
}

.velo-eq__bar {
  display: block;
  width: 100%;
  height: 12%;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--velo-cyan, #38bdf8) 0%,
    var(--velo-brand, #6366f1) 50%,
    var(--velo-accent, #22c55e) 100%
  );
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.25);
  transform-origin: bottom center;
  transition: height 70ms linear, opacity 70ms linear;
}

/* Bottom player — compact strip (hidden on narrow phones for more title room) */
.velo-eq--mini {
  flex: 0 1 auto;
  min-width: 48px;
  max-width: 100px;
  height: 26px;
  margin-inline: 4px;
}

@media (max-width: 560px) {
  .velo-eq--mini {
    display: none;
  }
}

.velo-player.is-playing .velo-eq--mini {
  opacity: 1;
}

.velo-player.is-dj-mode .velo-eq--mini {
  max-width: 120px;
}

/* Full player sheet */
.velo-eq--sheet {
  width: 100%;
  height: 72px;
  margin: var(--velo-space-3) 0 var(--velo-space-2);
  padding: 0 var(--velo-space-2);
  gap: 3px;
}

.velo-eq--sheet .velo-eq__bar {
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

/* DJ deck waveform slot */
.velo-eq--deck {
  width: 100%;
  height: 48px;
  margin-top: 0.65rem;
  gap: 2px;
}

.dj-deck--active .velo-eq--deck .velo-eq__bar {
  filter: saturate(1.15);
}

/* DJ stage master spectrum */
.velo-eq--master {
  width: 100%;
  height: 36px;
  margin-top: 0.85rem;
  padding: 0 0.25rem;
  gap: 3px;
}

.velo-eq--master .velo-eq__bar {
  background: linear-gradient(
    180deg,
    rgba(56, 189, 248, 0.95) 0%,
    rgba(99, 102, 241, 0.95) 50%,
    rgba(34, 197, 94, 0.9) 100%
  );
}

/* Progress bar reactive glow */
.velo-player.is-playing .velo-player-progress-fill {
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}

.velo-player.is-playing.is-eq-live .velo-player-progress-fill {
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .velo-eq__bar {
    transition: none;
  }
}