/*
 * Radio dock (components/RadioDock.tsx): a small PSX CRT TV whose screen is the YouTube player.
 * Imported by app/layout.tsx right after globals.css, which declares the layer order.
 * The TV: WebGL canvas (body, with a transparent hole on the screen) above a CSS3D layer holding
 * .radio-screen (the iframe + the CRT glass). Our controls sit next to the TV, never on the screen.
 */
@layer fx {
  .radio-dock {
    --tv-w: 380px;
    --tv-h: 340px;
    position: fixed;
    right: clamp(0.5rem, 2vw, 1.4rem);
    bottom: clamp(0.5rem, 2vw, 1.2rem);
    z-index: 80; /* under the full-screen scenes (seen through their dim, still playing), over the page */
    display: grid;
    grid-template-columns: minmax(0, 15rem) var(--tv-w);
    grid-template-areas: "info tv";
    align-items: end;
    gap: 0 0.6rem;
    max-width: calc(100vw - 1rem);
    color: var(--ink);
  }

  /* The TV canvas box: transparent, the TV stands on the page. */
  .radio-tv {
    grid-area: tv;
    position: relative;
    width: var(--tv-w);
    height: var(--tv-h);
    filter: drop-shadow(5px 6px 0 color-mix(in srgb, var(--ink) 55%, transparent));
  }
  /* Flat fallback (no WebGL): the screen alone in an ink frame, at its minimum size. */
  .radio-tv[data-flat] { display: grid; place-items: center; filter: none; }
  .radio-tv[data-flat] > .radio-screen {
    position: relative;
    width: 220px;
    height: 220px;
    border: 10px solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--drop);
  }

  /* What CSS3DRenderer places on the screen plane (sized in px by the TV). */
  .radio-screen { overflow: hidden; background: #07130b; }
  .radio-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #07130b;
    /* Light warm CRT grade: a touch of paper in the whites, still clearly watchable. */
    filter: sepia(0.14) saturate(1.06) contrast(1.06) brightness(1.02);
  }
  .radio-screen-cover { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: cover; background: var(--ink); }

  /* CRT glass over the video (author's decision of 2026-10-13, docs/PIVOT.md): fine static
   * scanlines, corner vignette, a soft glare on the bulge. It takes the pointer: the radio is a TV
   * channel, the YouTube player is never clicked; our buttons drive it. */
  .radio-crt {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: default;
    background:
      radial-gradient(120% 90% at 28% 18%, rgb(255 255 255 / 0.12), transparent 42%),
      radial-gradient(ellipse at center, transparent 58%, rgb(7 19 11 / 0.42) 100%),
      repeating-linear-gradient(to bottom, rgb(7 19 11 / 0.16) 0 1px, transparent 1px 3px);
    mix-blend-mode: normal;
  }

  .radio-info {
    grid-area: info;
    display: grid;
    gap: 0.3rem;
    justify-items: start;
    padding: 0.7rem 0.8rem 0.75rem;
    background: var(--ink);
    color: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--stamp);
    rotate: -1.5deg;
    min-width: 0;
    margin-bottom: 1.2rem;
  }
  .radio-info a { color: var(--paper); text-decoration-color: var(--stamp); }
  .radio-info a:hover { background: var(--paper); color: var(--ink); }
  .radio-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    font: 500 0.66rem/1.3 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .radio-from { opacity: 0.75; overflow-wrap: anywhere; }
  .radio-title {
    max-width: 100%;
    font: 400 1.35rem/1.05 var(--font-display);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }
  .radio-meta { max-width: 100%; font-size: 0.82rem; line-height: 1.3; opacity: 0.85; overflow-wrap: anywhere; }
  .radio-mute.label { font-size: 0.68rem; }
  .radio-stalled { font: 500 0.7rem/1.3 var(--font-mono); text-transform: uppercase; color: var(--paper); }
  /* "Lien cassé": a small text button under the controls; "Merci !" once clicked. */
  button.radio-broken {
    min-height: 0;
    padding: 0.1rem 0;
    border: 0;
    background: none;
    box-shadow: none;
    translate: none;
    color: var(--paper);
    font: 500 0.62rem/1.3 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: underline 1px var(--stamp);
    text-underline-offset: 3px;
    opacity: 0.85;
    cursor: pointer;
  }
  button.radio-broken:hover { background: none; box-shadow: none; translate: none; opacity: 1; color: var(--paper); }
  button.radio-broken:disabled { text-decoration: none; cursor: default; opacity: 1; color: var(--stamp); }

  .radio-controls { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
  button.radio-btn {
    --btn-bg: var(--paper);
    --btn-fg: var(--ink);
    --btn-shadow: var(--stamp);
    min-height: 2.1rem;
    min-width: 2.1rem;
    padding: 0.3rem 0.45rem 0.25rem;
    border-color: var(--paper);
    font: 600 0.85rem/1 var(--font-mono);
    letter-spacing: 0;
  }
  /* Channel −/+ (zapping), a row of their own under the transport. */
  .radio-channels { display: flex; flex-wrap: wrap; gap: 0.3rem; }
  button.radio-chan {
    --btn-bg: var(--ink);
    --btn-fg: var(--paper);
    --btn-shadow: var(--stamp);
    font: 400 0.92rem/1 var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.38rem 0.6rem 0.3rem;
  }
  .radio-dock[data-tuning] button.radio-chan { cursor: progress; }

  /* Changing channel: static snow on the screen, under the same glass. Still in reduced motion. */
  .radio-snow {
    position: absolute;
    inset: 0;
    background-color: #07130b;
    /* Opaque grey static (contrast-boosted turbulence), tinted towards the paper by multiply. */
    background-image:
      linear-gradient(rgb(255 223 116 / 0.35), rgb(255 223 116 / 0.35)),
      repeating-linear-gradient(to bottom, rgb(7 19 11 / 0.35) 0 1px, transparent 1px 3px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='3 0 0 0 -1 3 0 0 0 -1 3 0 0 0 -1 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
    background-size: auto, auto, 120px;
    background-blend-mode: multiply, normal, normal;
    image-rendering: pixelated;
    animation: radio-snow 140ms steps(3) infinite;
  }
  .radio-snow::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgb(255 223 116 / 0.18) 50%, transparent 60%);
    animation: radio-roll 420ms linear infinite;
  }
  @keyframes radio-snow {
    0% { background-position: 0 0, 0 0, 0 0; }
    33% { background-position: 0 0, 0 1px, -37px 21px; }
    66% { background-position: 0 0, 0 2px, 53px -14px; }
    100% { background-position: 0 0, 0 0, 11px 47px; }
  }
  @keyframes radio-roll {
    from { translate: 0 -60%; }
    to { translate: 0 60%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .radio-snow, .radio-snow::after { animation: none !important; }
    .radio-snow::after { display: none; }
  }

  button.radio-btn-main { --btn-bg: var(--stamp); --btn-fg: var(--paper); --btn-shadow: var(--paper); border-color: var(--stamp); }
  /* Closed dock, and the parts that do not apply to the current track. */
  .radio-dock[hidden], .radio-dock [hidden] { display: none; }
  .radio-play-error { margin-left: 0.6rem; }

  /* Room for the dock at the end of the page (the footer stays reachable). */
  html[data-radio] body { padding-bottom: var(--radio-h, 0); }
  @media (min-width: 861px) {
    /* Desktop: the dock floats at the right, half its height is enough. */
    html[data-radio="open"] body { padding-bottom: calc(var(--radio-h, 0) * 0.5); }
  }

  /* Phones and narrow tablets: a bottom band, the TV over most of the width, info beside / below. */
  @media (max-width: 640px) {
    .radio-dock {
      --tv-w: min(100vw, 360px);
      --tv-h: 262px;
      left: 0;
      right: 0;
      bottom: 0;
      max-width: none;
      grid-template-columns: 1fr;
      grid-template-areas: "tv" "info";
      justify-items: center;
      padding: 0.3rem 0 0;
      background: var(--paper);
      border-top: 3px solid var(--ink);
      box-shadow: 0 -4px 0 color-mix(in srgb, var(--ink) 22%, transparent);
    }
    .radio-tv { filter: none; }
    .radio-info {
      width: 100%;
      margin: 0;
      rotate: none;
      box-shadow: none;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 0.15rem 0.6rem;
      padding: 0.45rem 0.7rem 0.5rem;
    }
    .radio-info > * { grid-column: 1; }
    .radio-info > .radio-controls { grid-column: 2; grid-row: 1 / span 3; margin: 0; justify-content: end; max-width: 9.6rem; }
    .radio-info > .radio-channels { grid-column: 2; grid-row: 4; justify-content: end; }
    button.radio-chan { font-size: 0.8rem; padding: 0.32rem 0.45rem 0.25rem; min-height: 2rem; }
    .radio-title { font-size: 1.05rem; }
    .radio-meta { font-size: 0.74rem; }
    button.radio-btn { min-height: 2rem; min-width: 2rem; }
  }
}