/* Gekopieerd uit NorthByte Lab, effect E104 (lab/effecten/E104-markeerstift, 04-10-2026). */
/* ==========================================================================
   E104 · Markeerstift die achter de woorden tekent
   Een markeerstreep trekt zich in één haal achter een stuk tekst, ook als dat
   over twee regels loopt: elk woord krijgt zijn eigen streep en de pen gaat
   met een vaste snelheid van woord naar woord. Alleen transform (scaleX).
   Instellen op .e104 (een <mark>) met CSS-variabelen:
     --e104-kleur    kleur van de stift            (standaard rgba(255, 210, 40, .6))
     --e104-hoogte   welk deel van de regel        (standaard 62%, vanaf onder)
     --e104-snelheid ms per letter                 (standaard 22ms)
   ========================================================================== */

/* De gewone <mark> zonder browserkleur. Zonder JavaScript (en bij beperkte beweging) staat de streep er meteen. */
.e104 {
  color: inherit; padding: 0 .08em; margin: 0 -.08em;
  background: linear-gradient(to bottom, transparent calc(100% - var(--e104-hoogte, 62%)), var(--e104-kleur, rgba(255, 210, 40, .6)) 0);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Met JavaScript: een eigen streep per woord, die getekend wordt */
.e104.e104-klaar { background: none; padding: 0; margin: 0; }
.e104-w { position: relative; z-index: 0; isolation: isolate; }
/* Elk woord draagt zijn spatie mee, zodat de strepen precies op elkaar aansluiten zonder overlap */
.e104-w::before {
  content: ""; position: absolute; z-index: -1;
  left: 0; right: 0; bottom: .02em; height: var(--e104-hoogte, 62%);
  background: var(--e104-kleur, rgba(255, 210, 40, .6));
  transform: scaleX(0); transform-origin: 0 50%;
}
/* Begin en eind van de haal (per regel) steken iets uit en zijn rond, als een echte stift */
.e104-w.e104-begin::before { left: -.1em; border-top-left-radius: .3em .45em; border-bottom-left-radius: .18em .3em; }
.e104-w.e104-eind::before { right: -.1em; border-top-right-radius: .22em .35em; border-bottom-right-radius: .35em .45em; }
.e104-aan .e104-w::before { transform: scaleX(1); }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e104-w::before {
    transition: transform var(--t, 300ms) linear var(--d, 0ms);
  }
  /* Eerste woord zet aan, laatste woord remt af: voelt als een echte haal */
  html:not([data-rm]) .e104-w.e104-eerste::before { transition-timing-function: cubic-bezier(.5, 0, 1, 1); }
  html:not([data-rm]) .e104-w.e104-laatste::before { transition-timing-function: cubic-bezier(0, 0, .3, 1); }
  html:not([data-rm]) .e104-w.e104-eerste.e104-laatste::before { transition-timing-function: cubic-bezier(.45, 0, .25, 1); }
}