/* Gekopieerd uit NorthByte Lab, effect E100 (lab/effecten/E100-kop-woord-voor-woord, 03-10-2026).
   ==========================================================================
   E100 · Kop die woord voor woord binnenkomt
   Elk woord schuift uit een onzichtbaar masker omhoog, in een vast ritme.
   Alleen transform en opacity, geen blur. Beweging is opt-in: alleen bij
   prefers-reduced-motion: no-preference en zonder data-rm op <html>.
   Instellen per kop met CSS-variabelen:
     --e100-stap     vertraging per woord   (standaard 70ms)
     --e100-duur     duur per woord         (standaard 900ms)
     --e100-afstand  hoe ver het woord zakt (standaard 108%)
   ========================================================================== */

.e100-w {
  display: inline-block;
  vertical-align: top;
  /* Masker met wat lucht voor schuine letters en onderkasten; de marge compenseert */
  overflow: hidden;
  padding: .12em .08em .18em;
  margin: -.12em -.08em -.18em;
}
.e100-b { display: inline-block; transform-origin: 0 100%; }
.e100-nb { white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  /* Tot effect.js de woorden heeft gesplitst: onzichtbaar, met een vangnet na 2 s */
  .js:not([data-rm]) .e100:not(.e100-klaar) { visibility: hidden; animation: e100-vangnet 0s 2s forwards; }

  html:not([data-rm]) .e100-klaar .e100-b {
    opacity: 0;
    transform: translate3d(0, var(--e100-afstand, 108%), 0) rotate(3deg);
    transition:
      transform var(--e100-duur, 900ms) cubic-bezier(.22, 1, .36, 1),
      opacity calc(var(--e100-duur, 900ms) * .7) ease;
    transition-delay: calc(var(--i, 0) * var(--e100-stap, 70ms));
  }
  html:not([data-rm]) .e100-aan .e100-b { opacity: 1; transform: none; }
}

@keyframes e100-vangnet { to { visibility: visible; } }