/* ============================================================
   MINKA RADIO CALENDAR — VISUAL IMPROVEMENTS
   Enhanced animations, polish, and UX improvements
   ============================================================ */

/* ── Smoother global transitions ── */
:root {
  --transition-spring: cubic-bezier(.2,.9,.2,1);
  --transition-bounce: cubic-bezier(.34,1.56,.64,1);
  --glow-green: rgba(0,255,136,0.18);
  --glow-purple: rgba(183,123,255,0.18);
}

/* ── Enhanced radio window ── */
#radioWindow {
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 50px 160px rgba(0,0,0,0.85),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 1px 0 rgba(255,255,255,0.08) inset !important;
  background: #14151b !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: box-shadow .3s ease, border-color .3s ease !important;
}

/* ── Drag handle - more visible and tactile ── */
.radio-drag-strip {
  height: 18px !important;
  background: linear-gradient(to bottom, rgba(255,255,255,0.04), transparent) !important;
  border-radius: 24px 24px 0 0 !important;
}
.radio-drag-strip::after {
  width: 52px !important;
  height: 4px !important;
  top: 7px !important;
  background: rgba(255,255,255,0.14) !important;
  border-radius: 999px !important;
  transition: background .2s ease, width .2s ease !important;
}
.radio-drag-strip:hover::after {
  background: rgba(0,255,136,0.35) !important;
  width: 66px !important;
}

/* ── Play button: more premium ── */
.play-trigger {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.3),
    0 8px 22px rgba(0,0,0,0.35) !important;
  transition: transform .1s var(--transition-spring), box-shadow .2s ease, background .2s ease !important;
}
.play-trigger:hover {
  transform: scale(1.06) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.3),
    0 10px 28px rgba(0,0,0,0.42) !important;
}
.play-trigger:active {
  transform: scale(0.96) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.3),
    0 6px 16px rgba(0,0,0,0.30) !important;
}

/* ── Nav buttons: smoother ── */
.nav-btn {
  transition: transform .1s var(--transition-spring), border-color .2s ease, background .2s ease !important;
}
.nav-btn:hover {
  border-color: rgba(0,255,136,0.35) !important;
  background: rgba(0,255,136,0.06) !important;
  transform: scale(1.08) !important;
}
.nav-btn:active { transform: scale(0.95) !important; }

/* ── EQ buttons: better active state ── */
.eq-btn {
  transition: all .15s ease !important;
  position: relative;
  overflow: hidden;
}
.eq-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.eq-btn.active::before { opacity: 1; }
.eq-btn:hover { transform: translateY(-1px) !important; }

/* ── LED pulsing ── */
@keyframes ledPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.led-core.playing {
  animation: ledPulse 2s ease-in-out infinite !important;
}

/* ── Station overlay: better entrance ── */
#stationOverlay {
  transition: opacity .25s ease !important;
}

/* ── Volume fader: modern look ── */
.fader {
  height: 4px !important;
  border-radius: 999px !important;
}
.fader::-webkit-slider-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #00ff88 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
  cursor: pointer !important;
  transition: transform .1s ease, box-shadow .2s ease !important;
}
.fader::-webkit-slider-thumb:hover {
  transform: scale(1.2) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}

/* ── Monitor frame: scan-line + CRT glow ── */
.monitor-frame {
  border-radius: 10px !important;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.8) !important;
  transition: box-shadow .3s ease !important;
}
.monitor-frame:hover {
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.8) !important;
}

/* ── Now playing: album art reveal ── */
.np-cover {
  transition: opacity .3s ease, transform .3s ease !important;
  border-radius: 10px !important;
}
.np-cover[src] {
  transform: scale(1) !important;
}

/* ── Theme panel: slide-in animation ── */
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.theme-panel[aria-hidden='false']{
  animation: panelIn .2s var(--transition-spring) both !important;
}

/* ── Scrollbar improvements ── */
*::-webkit-scrollbar { width: 6px !important; }
*::-webkit-scrollbar-track { background: transparent !important; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,0.3) !important;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.25) !important;
}

/* ── Tech panel clock ── */
#timeDisp {
  text-shadow: none !important;
  letter-spacing: 1.5px !important;
}

/* ── Station name: smooth fade on change ── */
#curStation {
  transition: opacity .4s ease, transform .4s ease !important;
}

/* ── NP row: row entrance animation ── */
@keyframes npFadeIn {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}
.np-artist, .np-title {
  animation: npFadeIn .3s ease both !important;
}