/* ==========================================================================
   Mondios — the Legend, scroll-scrubbed through the film

   The section is tall; the stage sticks to the viewport while the frames
   advance with scroll. Six sentences — the Legend, verbatim — crossfade in
   sequence. js/scrub.js decides eligibility and reveals this section; until
   it does, the v1 chapter (.legend-static) is what renders. Both share the
   #legend anchor through the wrapper.
   ========================================================================== */

.legend-scrub {
  position: relative;
  height: 320svh;
  background: var(--ground-black);
}
.legend-scrub__stage {
  position: sticky;
  inset-block-start: 0;
  height: 100svh;
  overflow: clip;
  display: grid;
  align-content: end;
}
.legend-scrub__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.92;
}
.legend-scrub__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, oklch(0% 0 0 / .92) 0%, oklch(0% 0 0 / .55) 38%, transparent 70%),
    linear-gradient(to bottom, oklch(0% 0 0 / .6) 0%, transparent 30%);
  pointer-events: none;
}

.legend-scrub__head {
  position: absolute;
  inset-block-start: clamp(5rem, 4rem + 4vw, 8rem);
  inset-inline-start: 0;
  width: var(--shell);
  margin-inline: auto;
  inset-inline: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.legend-scrub__text {
  position: relative;
  width: var(--shell);
  margin-inline: auto;
  min-height: 9em;
  padding-block-end: clamp(5rem, 3rem + 7vw, 9rem);
  display: grid;
}
.legend-line {
  grid-area: 1 / 1;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: var(--text-scrub);
  line-height: 1.22;
  color: var(--bone);
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  will-change: opacity, transform;
}
.legend-line.is-active { opacity: 1; transform: none; }
.legend-line.is-past   { opacity: 0; transform: translateY(-0.4em); }

/* A vertical rail on the right marks position through the chapter. */
.legend-scrub__rail {
  position: absolute;
  inset-inline-end: var(--space-4);
  inset-block: 22% 22%;
  width: 1px;
  background: var(--hairline);
}
.legend-scrub__rail-fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: top;
  transform: scaleY(var(--p, 0));
}
.legend-scrub__index {
  position: absolute;
  inset-inline-end: calc(var(--space-4) - 0.35rem);
  inset-block-start: calc(22% - 2rem);
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: var(--track-caps);
  color: var(--gold-dim);
}
@media (max-width: 48em) {
  .legend-scrub__rail, .legend-scrub__index { display: none; }
  .legend-line { max-width: 20ch; }
}