/* ============================================================
   STEM SCOPE · identity beat
   One line across the name. Drums scroll it right to left; the
   vocal stands it up in ticks at the centre. Both come from
   js/stem-scope-data.js — the analysis is baked, so the section
   costs one 39KB file and no Web Audio until someone asks for
   sound. Settings are frozen in js/stem-scope.js (CFG); this
   file only places the thing and dresses the sound switch.
   ------------------------------------------------------------
   The line takes no row of its own: it lies on the name's band,
   full bleed across all five columns, at zero height so the
   fixed-height stage is unchanged by it.
   ============================================================ */

.k-ident__frame {
  /* THE LINE IS NOT A ROW ANY MORE. It had one of its own under
     the pictures, which made it a fourth block of content and
     put the film's audio as far from the name as the sheet
     allows. It belongs ON the name: the waveform is the man
     speaking and the name is who is speaking, so they occupy
     one band and the type sits in front of the line. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    ". name name name ."
    "spineL factsL pair factsR spineR"
    ". . voice . .";
  row-gap: var(--kdb-space-base);
}

@media (max-width: 900px) {
  /* Same five rows the beat has always had. The line is not one of
     them — it rides the name's row, which is row one here too. */
  .k-ident__frame {
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "name name"
      "pair pair"
      "spineL spineR"
      "factsL factsR"
      "voice voice";
  }
}

.k-scope {
  /* Row one, all five columns - full bleed across the name's
     band, while the name keeps its own indented area inside it.
     Zero height and overflow visible, so the line floats on the
     row's centre line and contributes nothing to the layout:
     the frame is a fixed-height stage and the waveform must not
     be able to grow it. */
  grid-row: 1;
  grid-column: 1 / -1;
  align-self: center;
  position: relative;
  width: 100%;
  height: 0;
  overflow: visible;
  z-index: 0;
  pointer-events: none;
}
/* Only the switch takes a pointer - the line itself is a
   drawing, and it is now underneath type. */
.k-scope__sound { pointer-events: auto; }
/* THE NAME IN FRONT. Same band, higher layer. */
.k-ident__name { position: relative; z-index: 2; }

.k-scope__canvas {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  /* Centred on the band it shares with the name. */
  top: 50%;
  translate: 0 -50%;
  width: 100%;
  height: clamp(7rem, 24vh, 15rem);
}

@media (max-width: 900px) {
  .k-scope { margin-block-start: 0; }
  .k-scope__canvas { height: clamp(4.5rem, 14vh, 8rem); }
}

/* The switch. Almost not there: a hairline dot at the right of
   the line, at the ink's lowest step. It only names itself on
   hover or keyboard focus, and it never moves the layout. */
.k-scope__sound {
  position: absolute;
  right: clamp(0.75rem, 3vw, 2.25rem);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35rem 0.1rem 0.35rem 0.5rem;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--kdb-neutral-40, #a8afb9);
  font-family: var(--kdb-family-archivo, sans-serif);
  font-size: var(--kdb-size-micro, 0.625rem);
  letter-spacing: var(--kdb-track-caps-wide, 0.14em);
  text-transform: uppercase;
  opacity: 0.28;
  transition: opacity 240ms ease, color 240ms ease;
}

.k-scope__sound:hover,
.k-scope__sound:focus-visible { opacity: 1; color: var(--kdb-neutral-80, #3a424d); }
.k-scope__sound:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.k-scope__sound-label {
  opacity: 0;
  transform: translateX(0.25rem);
  transition: opacity 240ms ease, transform 240ms ease;
}
.k-scope__sound:hover .k-scope__sound-label,
.k-scope__sound:focus-visible .k-scope__sound-label,
.k-scope__sound[aria-pressed="true"] .k-scope__sound-label { opacity: 1; transform: none; }

.k-scope__sound-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  transition: background 240ms ease;
}
.k-scope__sound[aria-pressed="true"] { opacity: 0.85; }
.k-scope__sound[aria-pressed="true"] .k-scope__sound-dot { background: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .k-scope__sound,
  .k-scope__sound-label { transition: none; }
}

/* ---- THE VOCAL LIGHTS THE LETTERS -------------------------
   js/stem-scope.js writes the singing out as --kdb-vox on the
   sheet, one number a frame, 0 at silence and 1 at a syllable's
   peak. Everything below is CSS reading that number.

   WHY WHITE, ON WHITE PAPER. A halo the colour of the ground is
   invisible against the ground and bright against the waveform
   the letters are standing on - so the glow does not paint a
   light around the type, it BURNS THE LINE AWAY from around it,
   in time with the voice that drew the line. On a syllable each
   letter clears itself a little room; between syllables the
   waveform runs right up to the strokes again.

   The wrapper that clips each character for the build reveal
   would also clip the halo, so it is opened once the build has
   finished and shut again when the name leaves - see
   js/ident-lockup.js, which owns `data-lit`. */
.k-ident__name { --vox: var(--kdb-vox, 0); }
.k-ident__name-lock[data-lit] .k-ident__ch { overflow: visible; }
.k-ident__name-lock[data-lit] .k-ident__ch-in {
  text-shadow:
    0 0 calc(var(--vox) * 10px) rgba(255, 255, 255, calc(var(--vox) * 0.95)),
    0 0 calc(var(--vox) * 26px) rgba(255, 255, 255, calc(var(--vox) * 0.75)),
    0 0 calc(var(--vox) * 54px) rgba(255, 255, 255, calc(var(--vox) * 0.45));
}
@media (prefers-reduced-motion: reduce) {
  .k-ident__name-lock[data-lit] .k-ident__ch-in { text-shadow: none; }
}