/* 03-statement: a typographic scene in the opening hero's family (COPY-SWAP-NOTES.md, "Typographic statement").
   Outer 250vh white, sticky 100vh pin, everything inside one absolutely positioned stage:
     .st__lk   the two poster lockups (beat 1 «كبر», beat 3 «نظام واحد»), one per beat and layout (landscape / portrait), generated by
               tools/hero-text/build-statement.py: a box sized by js (width; height from its aspect-ratio) holding one inline <svg> per word,
               placed by percentages, so js only sizes the box and moves whole words (transform + opacity)
     .st__ev   the three evidence clauses of beat 2 (live text, the quiet layer)
   js/sections/03-statement.js positions everything from the viewport and choreographs it on the scroll. Colour and size tunables: the
   --st-* block below; layout, phase and motion tunables: the top of the js. */
[data-section="03-statement"] {
  --st-ink: var(--night);                                         /* lockup words: 19.5:1 on white */
  --st-coral: #e35a5b;                                            /* «على عهدتنا»: --orange deepened for type on white, 3.6:1 (AA large: the words are 140-280px) */
  --st-grey: color-mix(in srgb, var(--night) 62%, #fff);          /* beat 2 clauses 1-2: ~#676a6d, 5.6:1 */
  --st-ev: 40px;                                                  /* beat 2 size: js sets it to the lockups' quiet-word size (one voice); this is the pre-js fallback */
  height: 250vh; background: #fff;
}
[data-section="03-statement"] .st__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
[data-section="03-statement"] .st__stage { position: absolute; inset: 0; }
[data-section="03-statement"] .st__lk { position: absolute; left: 0; top: 0; width: 100px; display: none; }
[data-section="03-statement"] .st__lk.is-on { display: block; }
[data-section="03-statement"] .st__wd { position: absolute; display: block; overflow: visible; fill: currentColor; transform-origin: 50% 50%; }
[data-section="03-statement"] .st__wd--ink { color: var(--st-ink); }
[data-section="03-statement"] .st__wd--coral { color: var(--st-coral); }
/* beat 2 in the piece's one voice (type pass 2026-10-17): thmanyah serif display Black, the same face and size as the lockups' quiet words;
   the first two clauses grey, the turn to «وأنت» in ink, so the sentence lands on its last clause */
[data-section="03-statement"] .st__ev { position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap; color: var(--st-grey); transform-origin: 50% 50%;
  font: 900 var(--st-ev)/1.4 var(--f-display); letter-spacing: 0; font-feature-settings: normal; }
[data-section="03-statement"] .st__ev[data-f="3"] { color: var(--st-ink); }
/* before js has placed anything: nothing shows (js adds .st--ready after its first layout) */
[data-section="03-statement"]:not(.st--ready) .st__stage { visibility: hidden; }
/* reduced motion (?motion=reduce or the OS setting): no pin and no choreography. The stage is the whole 250vh and js lays the three beats
   out down it, each at rest: beat 1 on screen one, the three clauses on their diagonal in the middle, beat 3 on the last. */
html.reduce-motion [data-section="03-statement"] .st__pin { position: relative; height: 100%; }