/* ==========================================================================
   ARADHNAA — radio.css
   The listening page. One playlist, one player, nothing else on screen.

   The page runs on the Void palette because this is the one place on the
   site meant to be left open rather than read through: a dark field puts
   the artwork and the transport forward and everything else back.

   The mandala is ornament, not analysis. A YouTube iframe is cross-origin,
   so no real frequency data can be read from it; the rings move on a timer
   that starts and stops with playback. It is honest as decoration and would
   be a lie as a spectrum, so it is drawn as a mandala and never as bars.
   ========================================================================== */

.radio{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:calc(100dvh - var(--header-h, 96px));
  padding-block:var(--space-4);
}

/* Warm floor light, so the panel is not a flat black rectangle. */
.radio__glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 46% at 50% 34%, rgba(240,169,62,.16), transparent 70%),
    radial-gradient(90% 60% at 50% 108%, rgba(163,44,30,.20), transparent 72%);
}

/* The whole point of this page is one button, so the transport has to be
   on screen when the page loads rather than a scroll away. Everything that
   can be measured against the viewport height is, so a short window gets a
   smaller mandala and tighter gaps instead of a hidden play button. */
.radio__inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(8px, 1.4vh, 18px);
  max-width:560px;
}

/* ---------------------------------------------------------------- masthead */
.radio__eyebrow{
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--marigold);
}
.radio__title{
  font-family:var(--font-display);
  font-size:clamp(28px, 5.2vh, 48px); line-height:1.05;
  color:var(--text);
}
.radio__title em{ font-style:normal; color:var(--ember); }
.radio__sub{
  max-width:40ch; font-size:14px; line-height:1.6; color:var(--text-muted);
}

/* ----------------------------------------------------------------- artwork */
.radio__art{
  width:min(52vw, 21vh, 190px); aspect-ratio:1;
}
.radio__art svg{ width:100%; height:100%; overflow:visible; }

.radio__ring,
.radio__petal,
.radio__tick,
.radio__lamp{ fill:none; stroke-linecap:round; stroke-linejoin:round; }

.radio__ring{ stroke:var(--brass); stroke-width:1.1; opacity:.5; }
.radio__ring--dashed{ stroke-dasharray:3 11; opacity:.72; }
.radio__petal{ stroke:var(--brass); stroke-width:1.3; opacity:.6; }
.radio__lamp{ stroke:var(--ember); stroke-width:2; }
.radio__tick{ fill:var(--brass); stroke:none; opacity:.42; }
.radio__flame{ fill:var(--ember); opacity:.5; transform-origin:120px 116px; }
.radio__halo{ fill:var(--ember); opacity:0; transform-origin:120px 120px; }

/* Playing. The outer ring turns, the ticks breathe in sequence and the
   flame lifts — three rates, so it reads as alive rather than as one
   object spinning. */
[data-playing="true"] .radio__ring--dashed{ animation:radio-turn 44s linear infinite; }
[data-playing="true"] .radio__ring--inner{ animation:radio-turn 30s linear infinite reverse; }
[data-playing="true"] .radio__tick{ animation:radio-tick 1.6s ease-in-out infinite; }
[data-playing="true"] .radio__flame{ animation:radio-flame 2.4s ease-in-out infinite; opacity:1; }
[data-playing="true"] .radio__halo{ animation:radio-halo 3.6s ease-in-out infinite; }
[data-playing="true"] .radio__petal{ opacity:.9; }
[data-playing="true"] .radio__ring{ opacity:.72; }

.radio__ring, .radio__petal, .radio__flame{
  transition:opacity var(--dur-slow, .5s) var(--ease-out);
}

@keyframes radio-turn{ to{ transform:rotate(360deg); } }
@keyframes radio-tick{
  0%,100%{ transform:scaleY(.55); opacity:.34; }
  50%    { transform:scaleY(1);   opacity:.95; }
}
@keyframes radio-flame{
  0%,100%{ transform:scaleY(1)    translateY(0); }
  50%    { transform:scaleY(1.14) translateY(-1.5px); }
}
@keyframes radio-halo{
  0%,100%{ opacity:.08; transform:scale(.94); }
  50%    { opacity:.20; transform:scale(1.04); }
}

/* The rings are set spinning about the artwork centre, so every animated
   node needs that origin rather than its own box. */
.radio__ring--dashed, .radio__ring--inner{ transform-origin:120px 120px; }
/* The ticks are rects spanning y 30-46, so they grow outward from their
   inner end. This has to track the geometry build.py generates. */
.radio__tick{ transform-origin:120px 46px; }

/* ------------------------------------------------------------- now playing */
.radio__now{ min-height:46px; }
.radio__nowlabel{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--marigold); margin-bottom:var(--space-2);
}
.radio__track{
  font-family:var(--font-display); font-size:20px; line-height:1.3;
  color:var(--text); text-wrap:balance;
  /* YouTube titles run long and arbitrary; let them wrap anywhere rather
     than push the column sideways. */
  overflow-wrap:anywhere;
}
.radio__artist{ margin-top:var(--space-1); font-size:13.5px; color:var(--text-muted); }

/* -------------------------------------------------------------- controls */
.radio__controls{
  width:100%;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(8px, 1.4vh, 18px);
}

/* ------------------------------------------------------------------- seek */
.radio__seek{ width:100%; display:flex; align-items:center; gap:var(--space-3); }
.radio__time{
  font-size:12px; color:var(--text-muted);
  font-variant-numeric:tabular-nums; min-width:38px;
}
.radio__time--end{ text-align:right; }

/* One slider style, shared by seek and volume. `--pct` is written by
   radio.js so the filled part of the track follows the thumb. */
.radio__range{
  -webkit-appearance:none; appearance:none;
  flex:1; height:22px; background:transparent; cursor:pointer;
  touch-action:none;   /* dragging the thumb must not scroll the page */
}
.radio__range::-webkit-slider-runnable-track{
  height:4px; border-radius:var(--radius-pill);
  background:linear-gradient(to right,
    var(--ember) 0 var(--pct, 0%), rgba(201,161,90,.26) var(--pct, 0%) 100%);
}
.radio__range::-moz-range-track{
  height:4px; border-radius:var(--radius-pill); background:rgba(201,161,90,.26);
}
.radio__range::-moz-range-progress{
  height:4px; border-radius:var(--radius-pill); background:var(--ember);
}
.radio__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; margin-top:-5px; border-radius:50%;
  background:var(--sandalwood); border:2px solid var(--void);
  box-shadow:0 0 0 1px var(--brass);
}
.radio__range::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:var(--sandalwood); border:2px solid var(--void);
  box-shadow:0 0 0 1px var(--brass);
}
.radio__range:focus-visible{ outline:2px solid var(--ember); outline-offset:4px; }
.radio__range:disabled{ cursor:default; opacity:.45; }

/* -------------------------------------------------------------- transport */
.radio__transport{
  display:flex; align-items:center; justify-content:center; gap:var(--space-5);
  /* Never below the 44px touch guidance, never taller than a short window
     can spare. */
  --play-size:clamp(60px, 9vh, 76px);
}
.radio__skip{
  display:grid; place-items:center;
  width:48px; height:48px; border-radius:50%;
  color:var(--text-muted); background:transparent;
  border:1px solid var(--line);
  transition:color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             background-color var(--dur-base) var(--ease-out);
}
.radio__skip:hover:not(:disabled),
.radio__skip:focus-visible{
  color:var(--text); border-color:var(--line-strong);
  background:var(--surface-hover);
}
.radio__skip:disabled{ opacity:.4; cursor:default; }
.radio__skip svg{ width:20px; height:20px; }

.radio__play{
  display:grid; place-items:center;
  width:var(--play-size, 76px); height:var(--play-size, 76px); border-radius:50%;
  color:var(--void);
  background:linear-gradient(150deg, var(--ember), var(--marigold));
  box-shadow:0 10px 34px rgba(226,102,28,.34);
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.radio__play:hover{ transform:scale(1.04); box-shadow:0 12px 40px rgba(226,102,28,.46); }
.radio__play:active{ transform:scale(.97); }
.radio__play:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none; }
.radio__play svg{ width:30px; height:30px; }
/* One button, two glyphs — whichever the current state is not. */
.radio__play .icon-pause,
[data-playing="true"] .radio__play .icon-play{ display:none; }
[data-playing="true"] .radio__play .icon-pause{ display:block; }

/* ----------------------------------------------------------------- volume */
.radio__vol{
  display:flex; align-items:center; gap:var(--space-3);
  width:min(100%, 220px); color:var(--text-muted);
}
.radio__vol svg{ width:18px; height:18px; flex:none; }

/* ------------------------------------------------------------------ notes */
.radio__note{
  font-size:12px; line-height:1.6; color:var(--text-subtle); max-width:44ch;
}
.radio__note a{ color:var(--ember); text-decoration:underline; text-underline-offset:3px; }

/* A player that cannot start says so where the controls are, rather than
   leaving three dead buttons on screen. */
.radio__fallback{
  padding:var(--space-4) var(--space-5);
  border:1px solid var(--line-strong); border-radius:var(--radius-md);
  background:var(--surface);
  font-size:14px; line-height:1.6; color:var(--text-muted); max-width:44ch;
}
.radio__fallback a{ color:var(--ember); }

/* The iframe itself is never seen — this is a listening page, and the
   video would only compete with the artwork. It must stay in the layout
   with real dimensions, because a display:none iframe is not allowed to
   play at all. */
.radio__host{
  position:absolute; width:1px; height:1px;
  opacity:0; pointer-events:none; left:-9999px; top:0;
}

/* ------------------------------------------------------------ wider than a phone */
/* Only a genuinely tall window gets the roomy version. Everything below
   this keeps the compact base, which is what puts the whole transport --
   play, skip and volume -- above the fold on a phone and on a laptop. */
@media (min-height:960px){
  .radio{ padding-block:var(--space-6); }
  .radio__art{ width:min(66vw, 30vh, 260px); }
  .radio__sub{ font-size:15px; }
  .radio__now{ min-height:60px; }
  .radio__note{ font-size:13px; }
}

@media (min-width:700px) and (min-height:960px){
  .radio__art{ width:min(300px, 32vh); }
  .radio__track{ font-size:23px; }
}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-playing="true"] .radio__ring--dashed,
  [data-playing="true"] .radio__ring--inner,
  [data-playing="true"] .radio__tick,
  [data-playing="true"] .radio__flame,
  [data-playing="true"] .radio__halo{ animation:none; }
  /* Playing still has to look different from paused, so the difference
     moves from motion to brightness. */
  [data-playing="true"] .radio__tick{ opacity:.9; }
  [data-playing="true"] .radio__halo{ opacity:.16; }
  .radio__play:hover, .radio__play:active{ transform:none; }
}

/* ==========================================================================
   SHARING, TOGGLES, JUST PLAYED, FOLLOW
   Everything below the transport. The page stays on the Void palette the
   whole way down: a light band between the player and the follow section
   would read as a different page.
   ========================================================================== */

/* --------------------------------------------------------- the chip row */
/* Two rows, always: Shuffle and Repeat together, Share on its own line.
   The floating WhatsApp button is a wide pill on desktop and a circle on a
   phone, and a single centred row of three chips ran under it at both
   sizes. Splitting the rows in the markup rather than with a max-width
   keeps it correct in Hindi too, where the labels are wider. */
.radio__extras{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
}
.radio__toggles{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2);
}
.radio__chip{
  display:inline-flex; align-items:center; gap:7px;
  min-height:36px; padding:0 var(--space-4);
  border:1px solid var(--line); border-radius:var(--radius-pill);
  background:transparent; color:var(--text-muted);
  font-family:var(--font-body); font-size:12px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  cursor:pointer;
  transition:color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             background-color var(--dur-base) var(--ease-out);
}
.radio__chip svg{ width:15px; height:15px; flex:none; }
.radio__chip:hover,
.radio__chip:focus-visible{ color:var(--text); border-color:var(--line-strong); }

/* A toggle that is on says so with a filled pill as well as colour, and
   aria-pressed carries the same fact to a screen reader. */
.radio__chip[aria-pressed="true"]{
  color:var(--void); background:var(--ember); border-color:var(--ember);
}
.radio__chip[aria-pressed="true"]:hover{ background:var(--marigold); border-color:var(--marigold); }

/* ------------------------------------------------------------ share panel */
.radio__share{
  width:100%; max-width:420px;
  padding:var(--space-4);
  border:1px solid var(--line-strong); border-radius:var(--radius-md);
  background:rgba(29,15,9,.9);
}
.radio__share-lead{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--marigold); margin-bottom:var(--space-3);
}
.radio__share-row{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-2);
}
.radio__share-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 var(--space-3);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:transparent; color:var(--text);
  font-family:var(--font-body); font-size:13px; font-weight:600;
  cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-out),
             background-color var(--dur-base) var(--ease-out);
}
.radio__share-btn svg{ width:17px; height:17px; flex:none; }
.radio__share-btn:hover,
.radio__share-btn:focus-visible{ border-color:var(--line-strong); background:var(--surface-hover); }
#shareWhatsapp svg{ color:var(--whatsapp-bright); }
.radio__share-status{
  margin-top:var(--space-3); min-height:1.2em;
  font-size:12.5px; color:var(--ember);
}

/* --------------------------------------------------------- just played */
.recent{ padding-block:var(--space-7); border-top:1px solid var(--line); }
.recent__inner{ max-width:620px; }
.recent__title{
  font-family:var(--font-display); font-size:24px; color:var(--text);
  margin-bottom:var(--space-4);
}
.recent__empty{ font-size:14px; line-height:1.6; color:var(--text-subtle); max-width:52ch; }
.recent__list{ list-style:none; display:flex; flex-direction:column; gap:var(--space-2); }
.recent__jump{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:100%; min-height:52px; padding:var(--space-3) var(--space-4);
  text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:transparent;
  transition:border-color var(--dur-base) var(--ease-out),
             background-color var(--dur-base) var(--ease-out);
}
.recent__jump:hover,
.recent__jump:focus-visible{ border-color:var(--line-strong); background:var(--surface-hover); }
.recent__name{
  font-family:var(--font-display); font-size:16px; color:var(--text);
  overflow-wrap:anywhere;
}
.recent__by{ font-size:12.5px; color:var(--text-muted); }

/* -------------------------------------------------------------- follow */
.follow{
  position:relative; overflow:hidden;
  padding-block:var(--space-8);
  border-top:1px solid var(--line);
}
.follow__glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 50% 0%, rgba(240,169,62,.12), transparent 70%);
}
.follow__inner{ position:relative; max-width:760px; text-align:center; }
.follow__eyebrow{
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--marigold); margin-bottom:var(--space-3);
}
.follow__title{
  font-family:var(--font-display); font-size:clamp(26px, 5vw, 38px);
  color:var(--text); line-height:1.15;
}
.follow__title em{ font-style:normal; color:var(--ember); }
.follow__sub{
  max-width:52ch; margin:var(--space-3) auto 0;
  font-size:14.5px; line-height:1.65; color:var(--text-muted);
}

.follow__links{
  display:grid; gap:var(--space-3);
  margin-top:var(--space-6); text-align:left;
}
.follow__link{
  display:flex; align-items:center; gap:var(--space-4);
  min-height:64px; padding:var(--space-4);
  border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--surface); color:var(--text);
  transition:border-color var(--dur-base) var(--ease-out),
             background-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.follow__link:hover,
.follow__link:focus-visible{
  border-color:var(--line-strong); background:var(--surface-hover);
  transform:translateY(-2px);
}
.follow__link svg{ width:24px; height:24px; flex:none; color:var(--brass); }
.follow__link--wa svg{ color:var(--whatsapp-bright); }
.follow__link-text{ display:flex; flex-direction:column; gap:2px; }
.follow__link-text strong{
  font-family:var(--font-display); font-size:16.5px; font-weight:600; color:var(--text);
}
.follow__link-text span{ font-size:13px; color:var(--text-muted); }

/* The channel is the one worth taking, so it is the one that is picked out. */
.follow__link--wa{ border-color:rgba(37,211,102,.34); }
.follow__link--wa:hover{ border-color:rgba(37,211,102,.6); }

@media (min-width:640px){
  .follow__links{ grid-template-columns:1fr 1fr; }
  .radio__share-row{ grid-template-columns:repeat(4, 1fr); }
  .radio__share{ max-width:520px; }
}


/* On a narrow screen the floating WhatsApp button owns the bottom-right
   corner (a 44px button plus its margin). The chip row is the bottom-most
   thing in the hero, so it is trimmed to stop short of that lane rather
   than sliding underneath it. */
@media (max-width:430px){
  .radio__chip{ padding:0 12px; font-size:11px; gap:6px; letter-spacing:.06em; }
  .radio__chip svg{ width:14px; height:14px; }
  /* Narrow enough that a centred row always stops short of the floating
     button's lane. Share wraps onto its own line as a result, which suits
     it: it is the action this page is built around, not a setting. */
  .radio__chip--share{ padding:0 var(--space-5); }
  /* Paying for the second row out of the mandala rather than out of the
     controls. */
  .radio__art{ width:min(46vw, 17vh, 160px); }
}


/* Small older phones (360x640 and the like) cannot hold the whole hero.
   The transport stays above the fold; the chip row is what scrolls. */
@media (max-height:700px){
  .radio__art{ width:min(40vw, 15vh, 130px); }
  .radio__title{ font-size:clamp(24px, 4.6vh, 34px); }
  .radio__sub{ font-size:13px; }
  .radio__now{ min-height:42px; }
}

/* -------------------------------- the mandala answers the toggles too */
/* Repeat-one means the station is circling one track, so the inner ring
   stops travelling and breathes in place instead. */
[data-playing="true"][data-repeat="true"] .radio__ring--inner{
  animation:radio-breathe 3s ease-in-out infinite;
}
@keyframes radio-breathe{
  0%,100%{ transform:scale(.97); opacity:.4; }
  50%    { transform:scale(1.03); opacity:.85; }
}
/* Shuffle off: the outer ring holds still, because nothing is being
   reordered. */
[data-shuffle="false"] .radio__ring--dashed{ animation:none; }

@media (prefers-reduced-motion: reduce){
  [data-playing="true"][data-repeat="true"] .radio__ring--inner{ animation:none; opacity:.85; }
  .follow__link:hover, .follow__link:focus-visible{ transform:none; }
}

/* A photograph behind the mandala, pushed well back. The page is a dark
   field by design, so the image is there to give the dark somewhere to
   come from rather than to be looked at: heavily dimmed, warm-tinted, and
   faded out at the bottom so the transport keeps its contrast. */
.radio__photo{
  position:absolute; inset:0; pointer-events:none;
  background:url("../img/aarti-thali.jpg") center 30% / cover no-repeat;
  opacity:.22;
  filter:saturate(.85) contrast(1.05);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 42%, transparent 88%);
          mask-image:linear-gradient(180deg, #000 0%, #000 42%, transparent 88%);
}
/* The glow layer already sits above this and carries the ember wash, so the
   photo only ever reads as texture. */