/* statement.css: de grote zin die bij het scrollen woord voor woord oplicht (effect 03, woordscrub).
   De sectie is het gordijn dat over de sticky hero schuift: effen papier met een haarlijn bovenaan. Het begin steekt onder de vouw van de hero uit.

   Eindstaat eerst: zonder JS, bij een fout, bij reduce en bij "Beweging uit" staat de hele zin op volle sterkte.
   Alleen met beweging aan is hij vooraf gedimd, tot statement.js hem in woorden heeft gesplitst. Het dimmen gaat met kleur (--gedempt, 6,08 op 1),
   niet met dekking: een woord op dekking 0,25 haalt maar 1,7 op 1 (accent 1,4 op 1), ook in rust bij het laden, en in Windows-hoog-contrast
   (forced-colors) blijft een dekking staan terwijl kleuren worden vervangen (D05). Elke tussentint tussen --gedempt en inkt of accent haalt 3,4 op 1. */

.statement {
  position: relative;
  background-color: var(--bg);
  border-top: var(--haar) solid var(--lijn);
  padding-top: var(--s-24);
  padding-bottom: var(--sectie);
}

/* Naast de sticky hero moet de sectie minstens een scherm hoog zijn: anders eindigt de sticky-fase voordat het gordijn de hero dekt */
@media (min-width: 900px) and (min-height: 40rem) and (prefers-reduced-motion: no-preference) {
  .js:not(.motion-failed):not(.motion-off) .statement {
    min-height: 100svh;
    padding-bottom: var(--s-96);
  }
}

.statement__tekst {
  max-width: 21em;
  font-family: var(--f-display);
  font-size: clamp(2rem, min(0.9rem + 7vw, 0.5rem + 12.5svh), 9rem);   /* breedte en hoogte: de zin vult het gordijn zonder uit beeld te lopen */
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: break-word;
  color: var(--fg);
}
.statement__sleutel {
  color: var(--accent);                        /* groot en zwaar: 3,42 op papier haalt de 3:1 voor grote tekst */
  font-weight: 800;
  letter-spacing: -0.034em;
}

@media (prefers-reduced-motion: no-preference) {
  /* tot de woorden zijn gesplitst: geen flits van volle sterkte (ook niet in het accent). Blijft statement.js weg, dan is de zin gewoon gedempt leesbaar. */
  .js:not(.motion-failed):not(.motion-off) .statement__tekst,
  .js:not(.motion-failed):not(.motion-off) .statement__tekst .statement__sleutel { color: var(--gedempt); }
}