/* Gekopieerd uit NorthByte Lab: /home/user/nb-lab/lab/effecten/E122-poster-kop-vult-breedte/effect.css (03-10-2026), ongewijzigd. */
/* ==========================================================================
   E122 · Posterkop die de breedte vult
   Elke regel van de kop wordt precies zo groot dat hij de volle breedte vult,
   zoals op een affiche: korte regels worden reusachtig, lange regels kleiner.
   Komt de kop in beeld, dan schuiven de regels om en om van links en rechts
   binnen. Alleen transform en opacity bewegen; de lettergrootte wordt één keer
   berekend (en opnieuw bij een andere breedte).
   Instellen op .e122 met CSS-variabelen:
     --e122-teken   gemiddelde tekenbreedte van je letter in em (standaard .6),
                    voor de eerste schatting voordat het script meet
     --e122-duur    duur van het binnenschuiven  (standaard 900ms)
   Per regel: style="--n: 12" met het aantal tekens, voor een goede eerste schatting.
   ========================================================================== */

.e122 { container-type: inline-size; margin: 0; }
.e122-r {
  display: block; width: max-content; max-width: none; white-space: nowrap; line-height: .92;
  /* Eerste schatting met container-eenheden; effect.js meet daarna precies */
  font-size: calc(100cqi / (var(--n, 12) * var(--e122-teken, .6)));
}
@supports not (font-size: 1cqi) { .e122-r { font-size: calc(100vw / (var(--n, 12) * var(--e122-teken, .6) * 1.15)); } }
.e122-r + .e122-r { margin-top: .04em; }

@media (prefers-reduced-motion: no-preference) {
  /* Tot het script heeft gemeten: verborgen, met een vangnet na 2 s */
  html.js:not([data-rm]) .e122:not(.e122-klaar) { visibility: hidden; animation: e122-vangnet 0s 2s forwards; }
  html.js:not([data-rm]) .e122-wacht .e122-r { opacity: 0; transform: translate3d(-18%, 0, 0); }
  html.js:not([data-rm]) .e122-wacht .e122-r:nth-child(even) { transform: translate3d(18%, 0, 0); }
  html.js:not([data-rm]) .e122-wacht.e122-aan .e122-r {
    opacity: 1; transform: none;
    transition: transform var(--e122-duur, 900ms) cubic-bezier(.16, 1, .3, 1), opacity calc(var(--e122-duur, 900ms) * .6) ease;
    transition-delay: calc(var(--i, 0) * 110ms);
  }
}
@keyframes e122-vangnet { to { visibility: visible; } }