/* =====================================
   VINYLO RADIO PAGE
   Self-contained, single-viewport (no scroll) hero page.
   Relies on site.css for shared primitives: .navbar, .navbar-icon-btn,
   .vinyl-grooves / .label-ring / .record-label / .record-hole,
   .vinyl-light, and the vinylSpin keyframes.

   Visibility convention: anything shown/hidden by JS uses the .is-hidden
   class below, never the [hidden] attribute — mixing the two is what let
   a previous version's lyrics card stay visible while "hidden" (its own
   `display: flex` rule and `[hidden]`'s `display: none` carry equal
   specificity, so whichever is declared later in the file silently wins,
   regardless of which attribute is actually set on the element). One
   rule, with !important, removes that whole class of bug for good.
====================================== */

.is-hidden {
  display: none !important;
}

html, body.radio-page {
  height: 100%;
  overflow: hidden;
}

body.radio-page {
  position: relative;
  background: #050505;
}

/* =====================================
   BACKGROUND — same treatment as the index hero's rotating backdrop:
   no blur, just saturation/brightness plus a slow drift animation.
====================================== */

.radio-page-bg {
  position: fixed;
  inset: -30px;
  z-index: 0;

  background-size: cover;
  background-position: center;
  filter: saturate(.7) brightness(.8);

  opacity: 0;
  transition: opacity 1s ease;
  animation: radioPageBgDrift 32s ease-in-out infinite;
}

.radio-page-bg.is-active {
  opacity: 1;
}

@keyframes radioPageBgDrift {
  0%   { transform: scale(1.08) translate(0,0) rotate(0deg); }
  20%  { transform: scale(1.15) translate(-3%,2%) rotate(.3deg); }
  45%  { transform: scale(1.22) translate(2.5%,-2.5%) rotate(-.2deg); }
  70%  { transform: scale(1.13) translate(-2%,-3%) rotate(.2deg); }
  100% { transform: scale(1.08) translate(0,0) rotate(0deg); }
}

.radio-page-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;

  background: linear-gradient(180deg, rgba(4,5,5,.55) 0%, rgba(4,5,5,.4) 38%, rgba(4,5,5,.5) 68%, rgba(4,5,5,.85) 100%);
}

.radio-page-scrim::after {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(ellipse at center, transparent 10%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.85) 118%);
}

.radio-page-score-bubbles {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.radio-page-score-bubble {
  position: absolute;
  bottom: -12vh;
  left: var(--bubble-left);
  width: var(--bubble-size);
  height: var(--bubble-size);
  border: 1px solid color-mix(in srgb, var(--bubble-color) 70%, white);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.24), transparent 27%),
    color-mix(in srgb, var(--bubble-color) 16%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--bubble-color) 28%, transparent), inset 5px 5px 10px rgba(255,255,255,.08);
  opacity: var(--bubble-opacity);
  animation: radioScoreBubbleRise var(--bubble-duration) var(--bubble-delay) ease-in infinite;
}

.radio-page-score-bubble.is-featured {
  display: grid;
  place-items: center;
  border-width: 2px;
  box-shadow: 0 0 30px color-mix(in srgb, var(--bubble-color) 42%, transparent), inset 8px 8px 16px rgba(255,255,255,.12);
}

.radio-page-score-value {
  display: grid;
  gap: 2px;
  color: rgba(255,255,255,.9);
  text-align: center;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}

.radio-page-score-value strong {
  font-size: clamp(14px, 2vw, 22px);
  line-height: 1;
}

.radio-page-score-value small {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.1;
  text-transform: uppercase;
}

@keyframes radioScoreBubbleRise {
  0% { transform: translate3d(0, 0, 0) scale(.75); opacity: 0; }
  12% { opacity: var(--bubble-opacity); }
  52% { transform: translate3d(var(--bubble-drift), -52vh, 0) scale(1); }
  88% { opacity: calc(var(--bubble-opacity) * .7); }
  100% { transform: translate3d(calc(var(--bubble-drift) * -1), -118vh, 0) scale(1.12); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .radio-page-score-bubble {
    animation: none;
    opacity: .08;
  }
}

/* =====================================
   LAYOUT
====================================== */

.radio-page-content {
  position: relative;
  z-index: 2;

  height: 100vh;
  height: 100dvh;

  display: flex;
  flex-direction: column;
}

.radio-top-controls { display: flex; align-items: center; gap: 8px; }
.radio-top-controls .radio-popup-panel { top: calc(100% + 10px); bottom: auto; right: 0; left: auto; }
.radio-top-controls .radio-page-sleep-label { position: absolute; top: calc(100% + 5px); right: 0; white-space: nowrap; }

.radio-page-genres { position: fixed; z-index: 4; display: flex; gap: 8px; max-width: min(42vw, 430px); pointer-events: none; }
.radio-page-genres-top { top: 82px; right: 0; flex-direction: row-reverse; }
.radio-page-genres-bottom { bottom: 22px; left: 0; }
.radio-page-genre { padding: 10px 15px; background: #050505; color: #fff; font-family: Orbitron, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); box-shadow: 8px 8px 0 rgba(255,255,255,.85); }
.radio-page-genres-bottom .radio-page-genre { clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%); box-shadow: -8px -8px 0 rgba(255,255,255,.85); }

.radio-page-navbar {
  flex: none;
}

.radio-page-hero {
  flex: 1;
  min-height: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 56px);

  padding: 16px 5% clamp(20px, 4vh, 40px);
}

.radio-page-main {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

/* =====================================
   VINYL DISC
====================================== */

.radio-page-vinyl-wrap {
  position: relative;
  width: min(clamp(160px, 26vh, 280px), 46vw);
  flex-shrink: 0;
}

.radio-page-play-toggle {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(48px, 7vw, 64px);
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(20, 21, 15, .72);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background .2s ease, transform .2s ease;
}

.radio-page-play-toggle:hover {
  background: rgba(20, 21, 15, .9);
  transform: translate(-50%, -50%) scale(1.06);
}

.radio-page-play-toggle svg {
  width: 42%;
  height: 42%;
}

.radio-page-play-toggle .radio-page-play-icon {
  margin-left: 4%;
}

/* --- Track-change animation: the disc drops out the bottom, the new
   track's art/title/artist swap in off-screen, then it drops back in
   from the top into its resting position. --- */

.radio-page-vinyl-wrap.is-track-out {
  animation: radioDiscDropOut .45s cubic-bezier(.55,0,.85,.35) forwards;
}

.radio-page-vinyl-wrap.is-track-in {
  animation: radioDiscDropIn .55s cubic-bezier(.2,.9,.3,1.1) forwards;
}

@keyframes radioDiscDropOut {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(120%) scale(.85); opacity: 0; }
}

@keyframes radioDiscDropIn {
  0%   { transform: translateY(-120%) scale(.85); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .radio-page-vinyl-wrap.is-track-out,
  .radio-page-vinyl-wrap.is-track-in {
    animation: none;
  }
}

.radio-page-vinyl {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;

  background:
    conic-gradient(from 20deg,
      transparent 0deg, rgba(255,255,255,.05) 35deg, transparent 75deg,
      rgba(255,255,255,.22) 110deg, transparent 145deg, rgba(255,255,255,.07) 220deg,
      transparent 265deg, rgba(255,255,255,.16) 300deg, transparent 350deg),
    repeating-radial-gradient(circle at center,
      #050505 0px, #050505 2px, #181818 3px, #070707 5px, #121212 7px, #030303 9px);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 0 0 10px rgba(0,0,0,.55),
    0 50px 110px rgba(0,0,0,.7),
    inset 0 0 60px rgba(0,0,0,.4);

  -webkit-mask-image: radial-gradient(circle at center, transparent 0 3.8%, black 4.4% 100%);
  mask-image: radial-gradient(circle at center, transparent 0 3.8%, black 4.4% 100%);

  animation: vinylSpin 2.8s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.radio-page-vinyl .label-ring {
  box-shadow: 0 0 0 8px rgba(0,0,0,.75), inset 0 0 33px rgba(0,0,0,.6);
}

.radio-page-vinyl .record-label {
  box-shadow:
    0 0 0 2px rgba(255,255,255,.25), 0 0 0 6px rgba(0,0,0,.85),
    inset 8px 8px 25px rgba(255,255,255,.12), inset -16px -16px 37px rgba(0,0,0,.6);
}

/* =====================================
   GLASS CARD — shared base look for the "now playing" card and the
   lyrics card, so both stay visually consistent from one declaration.
====================================== */

.radio-glass-card {
  border-radius: 22px;
  background: rgba(20,21,15,.4);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}

/* =====================================
   NOW PLAYING CARD
====================================== */

.radio-page-card {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;

  width: min(360px, 70vw);
  padding: clamp(22px, 3vw, 32px);
  text-align: left;
}

.radio-page-card.is-featured {
  border-color: rgba(231,190,76,.72);
  background: linear-gradient(145deg, rgba(94,67,22,.54), rgba(20,21,15,.62));
  box-shadow: 0 24px 70px rgba(0,0,0,.48), 0 0 34px rgba(231,190,76,.2), inset 0 1px rgba(255,235,157,.28);
}

.radio-page-featured-badge {
  padding: 5px 9px;
  border: 1px solid rgba(231,190,76,.55);
  border-radius: 999px;
  background: rgba(231,190,76,.16);
  color: #f0cc63;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.radio-page-card.is-ad {
  border-color: rgba(76,174,231,.72);
  background: linear-gradient(145deg, rgba(18,72,105,.56), rgba(20,21,15,.62));
  box-shadow: 0 24px 70px rgba(0,0,0,.48), 0 0 34px rgba(76,174,231,.2), inset 0 1px rgba(180,230,255,.28);
}

.radio-page-ad-badge {
  padding: 5px 9px;
  border: 1px solid rgba(76,174,231,.58);
  border-radius: 999px;
  background: rgba(76,174,231,.16);
  color: #7fc8ed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.radio-page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.radio-page-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 10px rgba(255,77,77,.9);
  animation: radioPagePulse 1.6s ease-in-out infinite;
}

@keyframes radioPagePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}

.radio-page-title {
  font-family: Georgia, serif;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.radio-page-artist {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .02em;
}

.radio-page-remaining {
  color: rgba(233,255,71,.78);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* A divider that separates one card section from the next below it —
   reused by both .radio-page-next and .radio-page-controls so the card
   reads as one connected list of sections rather than two bolted-on
   blocks with their own, possibly-inconsistent spacing. */
.radio-card-section {
  width: 100%;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
}

.radio-page-next {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.radio-page-next-label {
  color: rgba(255,255,255,.32);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 10px;
  font-weight: 700;
}

.radio-page-next-track {
  color: rgba(255,255,255,.7);
  font-size: 13px;
}

/* =====================================
   CONTROLS ROW (sleep timer / volume / lyrics toggle)
====================================== */

.radio-page-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.radio-circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;
  border-radius: 50%;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--text);
  cursor: pointer;

  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.radio-circle-btn svg {
  width: 16px;
  height: 16px;
}

.radio-volume-icon { display: block; }
.radio-volume-icon.is-hidden { display: none; }

.radio-circle-btn:hover,
.radio-circle-btn.is-active {
  background: rgba(233,255,71,.12);
  border-color: rgba(233,255,71,.5);
  color: var(--accent);
}

/* --- Popup: shared by the sleep-timer menu and the volume slider. One
   element (.radio-popup) owns the trigger + panel positioning; open
   state is a single .is-open class toggled by JS. --- */

.radio-popup {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.radio-popup-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 10;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,9,9,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;

  transition: opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}

.radio-popup.is-open .radio-popup-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.radio-page-sleep-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .02em;
}

.radio-page-sleep-label:empty {
  display: none;
}

.radio-sleep-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.radio-sleep-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.radio-sleep-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,4,4,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.radio-sleep-dialog {
  position: relative;
  width: min(390px, 100%);
  padding: 28px 26px 22px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(35,38,35,.96), rgba(10,12,12,.97));
  box-shadow: 0 30px 90px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.08);
  transform: translateY(12px) scale(.97);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}

.radio-sleep-modal.is-open .radio-sleep-dialog { transform: translateY(0) scale(1); }

.radio-sleep-close {
  position: absolute;
  top: 15px;
  right: 17px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.radio-sleep-dialog h2 {
  max-width: 260px;
  margin: 16px 0 5px;
  color: #fff;
  font-family: Georgia, serif;
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 400;
  line-height: 1.05;
}

.radio-sleep-hint {
  margin: 0;
  color: rgba(255,255,255,.48);
  font-size: 12px;
}

.radio-sleep-wheel {
  position: relative;
  display: grid;
  min-height: 172px;
  margin: 20px 0 18px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: radial-gradient(circle, rgba(233,255,71,.1), transparent 62%), rgba(255,255,255,.035);
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}

.radio-sleep-wheel::before,
.radio-sleep-wheel::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1px;
  background: rgba(233,255,71,.32);
}

.radio-sleep-wheel::before { top: 47px; }
.radio-sleep-wheel::after { bottom: 47px; }

.radio-sleep-wheel-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(233,255,71,.08);
  filter: blur(22px);
}

.radio-sleep-wheel-value {
  position: relative;
  color: #f2ff91;
  font-size: clamp(42px, 12vw, 66px);
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 0 24px rgba(233,255,71,.2);
}

.radio-sleep-wheel-value small {
  margin-left: 6px;
  color: rgba(255,255,255,.58);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
}

.radio-sleep-actions { display: flex; gap: 10px; }
.radio-sleep-actions button {
  flex: 1;
  min-height: 44px;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}
.radio-sleep-cancel { border: 1px solid rgba(255,255,255,.14); background: transparent; color: rgba(255,255,255,.7); }
.radio-sleep-confirm { border: 1px solid rgba(233,255,71,.5); background: var(--accent); color: #14150f; }

.radio-sleep-menu {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 8px;
}

.radio-sleep-menu-title {
  padding: 6px 10px 8px;
  color: rgba(255,255,255,.4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.radio-sleep-menu button {
  padding: 9px 10px;
  border: none;
  border-radius: 9px;
  background: none;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;

  transition: background .2s ease, color .2s ease;
}

.radio-sleep-menu button:hover {
  background: rgba(233,255,71,.12);
  color: var(--accent);
}

.radio-sleep-menu button.is-active {
  color: var(--accent);
  font-weight: 700;
}

.radio-volume-popup {
  padding: 14px 12px;
}

.radio-volume-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 6px;
  height: 90px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* =====================================
   LYRICS CARD
====================================== */

.radio-page-lyrics-card {
  display: flex;
  flex-direction: column;
  gap: 14px;

  width: min(300px, 30vw);
  max-height: min(420px, 70vh);
  padding: clamp(20px, 2.6vw, 28px);
  flex-shrink: 0;
}

.radio-page-lyrics-label {
  color: rgba(255,255,255,.4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.radio-page-lyrics-viewport {
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent 0, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, black 12%, black 88%, transparent 100%);
}

.radio-page-lyrics-scroll {
  display: flex;
  flex-direction: column;
  gap: 12px;

  transition: transform .5s cubic-bezier(.16,1,.3,1);
}

.radio-page-lyrics-line {
  color: rgba(255,255,255,.35);
  font-size: 14px;
  line-height: 1.5;
  transition: color .4s ease, opacity .4s ease, transform .4s ease;
  opacity: .55;
}

.radio-page-lyrics-line.is-current {
  color: var(--text);
  font-weight: 600;
  opacity: 1;
}

/* =====================================
   RESPONSIVE
====================================== */

@media (max-width: 900px) {
  .radio-page-hero {
    flex-direction: column;
    justify-content: center;
    gap: 20px;
  }

  .radio-page-main {
    flex-direction: column;
    gap: 18px;
  }

  .radio-page-card {
    width: min(420px, 86vw);
    align-items: center;
    text-align: center;
  }

  .radio-page-next {
    align-items: center;
  }

  .radio-page-controls {
    justify-content: center;
  }

  .radio-page-lyrics-card {
    width: min(420px, 86vw);
    max-height: 26vh;
  }
}