/* Word-light statement: a big statement whose words brighten one after another, in reading order, as the
   section scrolls up. Measured from DUNA's "Haltung" statement (teardown 09-30), rewritten with our names.
   Each word i of n gets its own slice of the section's view timeline:
     cover (start + span * i/n)  ->  cover (start + span * (i+1)/n), opacity dim -> 1, linear.
   part.js splits the words (sets --i, --n) and drives the same maths on scroll where animation-timeline
   is missing. No JS or reduced motion = the plain statement at full strength. */
.wordlight {
  --wl-dim: .75;        /* opacity before a word lights */
  --wl-start: 13%;      /* cover progress where the first word starts */
  --wl-span: 29%;       /* cover progress over which all words light */
  view-timeline: --wordlight block;
}
.wordlight__words { display: inline; }
.wordlight__word { display: inline; }
.wordlight__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .wordlight__word {
      animation: wordlight-lit linear both;
      animation-timeline: --wordlight;
      animation-range: cover calc(var(--wl-start) + var(--wl-span) * var(--i) / var(--n))
                       cover calc(var(--wl-start) + var(--wl-span) * (var(--i) + 1) / var(--n));
    }
  }
}
@keyframes wordlight-lit { from { opacity: var(--wl-dim); } to { opacity: 1; } }
