/* Rooftop Radio — Player theme & component styles */

/* ---- DJ Theme System (CSS custom properties) ---- */
:root {
  --dj-accent: #FF6B35;
  --dj-glow: rgba(255, 107, 53, 0.10);
}
body[data-dj="max"]  { --dj-accent: #FF9B45; --dj-glow: rgba(255, 155, 69, 0.12); }  /* sunrise warm gold */
body[data-dj="luna"] { --dj-accent: #FF6B8A; --dj-glow: rgba(255, 107, 138, 0.12); }  /* sunset pink-orange */
body[data-dj="kai"]  { --dj-accent: #4B7BEC; --dj-glow: rgba(75, 123, 236, 0.12); }  /* night deep blue */
body[data-dj="alex"] { --dj-accent: #8B949E; --dj-glow: rgba(139, 148, 158, 0.08); }
body[data-dj="nova"] { --dj-accent: #FF5CCD; --dj-glow: rgba(255, 92, 205, 0.12); }

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
audio::-webkit-media-controls-panel { background: #0F1118; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #484F58; border-radius: 3px; }

/* ---- Gradient text ---- */
.rf-gradient-text {
  background: linear-gradient(135deg, #FF6B35, #C156E0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Animations ---- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes eqBounce {
  0%   { height: 3px; }
  100% { height: 24px; }
}
@keyframes votePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- DJ Hero glow ---- */
.dj-hero { position: relative; overflow: hidden; }
.dj-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: calc(100% + 60px);
  background: radial-gradient(ellipse at 50% 30%, var(--dj-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transition: background 0.6s ease;
}
.dj-hero > * { position: relative; z-index: 1; }

/* ---- EQ bars ---- */
.eq-bar {
  width: 3px;
  min-height: 3px;
  border-radius: 2px;
  background: var(--dj-accent);
  transition: height 60ms ease-out, background 0.4s ease;
}
.mini-eq-bar {
  width: 2px;
  min-height: 2px;
  border-radius: 1px;
  background: var(--dj-accent);
  transition: height 60ms ease-out, background 0.4s ease;
}
.eq-css-fallback .eq-bar {
  animation: eqBounce var(--eq-speed, 0.7s) ease-in-out infinite alternate;
}
.eq-css-fallback .eq-bar:nth-child(1)  { --eq-speed: 0.70s; }
.eq-css-fallback .eq-bar:nth-child(2)  { --eq-speed: 0.55s; }
.eq-css-fallback .eq-bar:nth-child(3)  { --eq-speed: 0.80s; }
.eq-css-fallback .eq-bar:nth-child(4)  { --eq-speed: 0.60s; }
.eq-css-fallback .eq-bar:nth-child(5)  { --eq-speed: 0.75s; }
.eq-css-fallback .eq-bar:nth-child(6)  { --eq-speed: 0.50s; }
.eq-css-fallback .eq-bar:nth-child(7)  { --eq-speed: 0.65s; }
.eq-css-fallback .eq-bar:nth-child(8)  { --eq-speed: 0.85s; }
.eq-css-fallback .eq-bar:nth-child(9)  { --eq-speed: 0.58s; }
.eq-css-fallback .eq-bar:nth-child(10) { --eq-speed: 0.72s; }
.eq-css-fallback .eq-bar:nth-child(11) { --eq-speed: 0.63s; }
.eq-css-fallback .eq-bar:nth-child(12) { --eq-speed: 0.78s; }
.eq-css-fallback .eq-bar:nth-child(13) { --eq-speed: 0.53s; }
.eq-css-fallback .eq-bar:nth-child(14) { --eq-speed: 0.68s; }
.eq-css-fallback .eq-bar:nth-child(15) { --eq-speed: 0.82s; }

/* ---- Player bar: play/pause icons ---- */
.play-icon, .pause-icon {
  position: absolute;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.is-playing .play-icon  { opacity: 0; transform: scale(0.7); }
:not(.is-playing) .pause-icon { opacity: 0; transform: scale(0.7); }

/* ---- Volume slider ---- */
.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--dj-accent);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}
.volume-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--dj-accent);
  cursor: pointer;
  border: none;
}
.volume-slider:hover::-webkit-slider-thumb { transform: scale(1.2); }

/* ---- Vote buttons ---- */
.vote-btn {
  transition: all 0.2s ease;
}
.vote-btn:hover { transform: scale(1.05); }
.vote-btn:active { transform: scale(0.95); }
.vote-btn.voted { opacity: 0.6; cursor: default; pointer-events: none; }
.vote-btn.voted.vote-up { border-color: rgba(61, 220, 132, 0.4); color: #3DDC84; background: rgba(61, 220, 132, 0.08); }
.vote-btn.voted.vote-down { border-color: rgba(231, 76, 60, 0.4); color: #E74C3C; background: rgba(231, 76, 60, 0.08); }
.vote-pop { animation: votePop 0.35s ease; }

/* ---- Nav links ---- */
.nav-link {
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  color: #8B949E;
  transition: color 0.2s, background 0.2s;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}
.nav-link:hover { color: #E6EDF3; background: rgba(255,255,255,0.05); }
.nav-link.active { color: #E6EDF3; background: rgba(255,255,255,0.08); }

/* ---- Chat drawer ---- */
.chat-panel {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-panel.open {
  transform: translateY(0) !important;
}

/* ---- Transitions ---- */
.fade-out { opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.25s; }
.fade-in  { opacity: 1; transform: translateY(0);   transition: opacity 0.35s, transform 0.35s; }

/* ---- Glass surfaces ---- */
.glass {
  background: rgba(15, 17, 24, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ---- Schedule block cards ---- */
.schedule-block {
  border-left: 3px solid var(--block-accent, #484F58);
  transition: background 0.2s;
}
.schedule-block.now {
  background: rgba(255, 255, 255, 0.04);
}

/* ---- Hero + Meters unified container ---- */
.hero-with-meters {
  position: relative;
  overflow: hidden;
}

/* ---- Meter Panel ---- */
.meter-spectrum-wrap {
  position: relative;
  aspect-ratio: 4 / 1;
  min-height: 120px;
  max-height: 280px;
  overflow: hidden;
}
.meter-vu-wrap {
  height: 48px;
  padding: 4px 12px;
  overflow: hidden;
}
.meter-cell canvas {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 540px) {
  .meter-panel-stack {
    padding: 0 6px;
  }
  .meter-cell--spectrum {
    aspect-ratio: 3 / 1;
  }
}

/* ---- Page transitions ---- */
.page-section {
  animation: fadeIn 0.25s ease;
}
.page-section[hidden] {
  display: none !important;
}