/* ============================================================================
   S5 · Dawn — "WHO". The stage is transparent: the light canvas is the picture
   (night → the dawn band → paper). Three lines of display type, flush left,
   vertically centred: LEAD CONSULTANT / MULESOFT DEVELOPER / INDIE PRODUCT
   BUILDER, Anybody 900 wdth 125 like the hero, the longest line fitted to the
   gutters. Everything on the stage is ink, so the sweep reveals it: ink on
   night is invisible, ink on paper is the chapter.
   CSS default = key pose (still edition / no JS): paper, the three lines solid
   ink. js/scenes/dawn.js adds .display--outline at mount (outline only) and
   fills each line back to ink over the pinned room.
   The clock is a corner detail bottom-right: 23:58 · PARIS split-flaps to
   05:58 · MANILA as the edge passes it (the `b` glyph is the key pose).
   ========================================================================== */
.scene--dawn .scene__stage {
  display: grid;
  align-content: center;
  padding: var(--header-h) var(--gutter) max(var(--gutter), 24px);
  background: transparent;
}

/* The block. --dawn-fs is set by JS after fonts load (the longest line fitted to the gutters); the ratios
   below are the measured em-widths in Anybody 900 / wdth 125 (INDIE PRODUCT BUILDER 15.92em; the longest word,
   CONSULTANT, 8.86em), so the block fits without JS. */
.dawn__who {
  --dawn-em: 15.92;
  --dawn-em-word: 8.86;
  --dawn-fit: calc((100vw - 2 * var(--gutter)) / var(--dawn-em));
  --dawn-fs: min(var(--dawn-fit), calc(58svh / 2.66));
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: var(--dawn-fs);
  line-height: 0.86;
  white-space: nowrap;
}
.scene--dawn .dawn__line {
  display: block;
  width: fit-content;
  white-space: nowrap;
  color: var(--ink);
  -webkit-text-stroke: 1.5px var(--ink);
}
.dawn__line + .dawn__line {
  margin-top: 0.04em;
}
/* the motion edition's starting state: the outline only (the fill is written inline per frame by JS) */
.scene--dawn .dawn__line.display--outline {
  color: transparent;
}
/* the chapter label is ink too (the paper tier-2 grey), so the light reveals it with the lines */
.scene--dawn .dawn__h {
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}

/* ---------- the clock: a corner detail, split-flapped by the edge ---------- */
.dawn__clock {
  white-space: nowrap;
  color: var(--ink);
}
.dawn__time,
.dawn__city {
  display: inline-block;
  perspective: 600px;
  perspective-origin: 50% 50%;
  font-variant-numeric: tabular-nums;
}
.dawn__sep {
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}
.dawn__cell {
  position: relative;
  display: inline-block;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.dawn__time .dawn__cell {
  width: 0.6em; /* the mono advance, so the row never re-measures as the glyphs swap */
  text-align: center;
}
.dawn__g--a {
  position: absolute;
  top: 0;
  right: 0;
  visibility: hidden;
  color: var(--bone);
}
.dawn__time .dawn__g--a {
  left: 0;
}
.dawn__g--b {
  position: relative;
  color: var(--ink);
}
.dawn__cell--before .dawn__g--a {
  visibility: visible;
}
.dawn__cell--before .dawn__g--b {
  visibility: hidden;
}

/* ---------- Phone (portrait, <768): each role wraps at its word breaks (never mid-word), one size, the longest
   word fitted to the gutters; the block capped at 62svh (JS). Three nowrap lines would be 23–29px at 390px. ---------- */
@media (max-width: 767px) and (orientation: portrait) {
  .dawn__who {
    --dawn-fs: min(calc((100vw - 2 * var(--gutter)) / var(--dawn-em-word)), 10svh);
    white-space: normal;
  }
  .scene--dawn .dawn__line {
    width: auto;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
  }
  .dawn__line + .dawn__line {
    margin-top: 0.16em;
  }
}

/* ---------- Landscape phone: three lines at ~9vh, one size ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .dawn__who {
    --dawn-fs: min(9vh, var(--dawn-fit));
  }
}

/* ---------- still edition / no JS: the hard cut. One clean panel: paper, the three lines in ink ---------- */
html:not(.motion) .scene--dawn .scene__stage,
html:not(.js) .scene--dawn .scene__stage {
  background: var(--paper);
}
html:not(.motion) .dawn__cell,
html:not(.js) .dawn__cell {
  transform: none !important;
}