/* Gekopieerd uit NorthByte Lab: /home/user/nb-lab/lab/effecten/E114-tekst-als-wegmarkering/effect.css (04-10-2026), ongewijzigd. */
/* ==========================================================================
   E114 · Tekst die als wegmarkering verschijnt
   Een zin ligt als witte belijning op een kronkelende weg (SVG-tekstpad) en
   wordt letter voor letter "geschilderd", van het begin van de weg naar het
   eind. Daarna rijdt er een autootje binnen. De letters veranderen alleen van
   dekking; de auto beweegt met transform.
   Instellen op .e114 met CSS-variabelen:
     --e114-weg     kleur van het wegdek       (standaard #2d3138)
     --e114-rand    kleur van de randlijnen    (standaard #f4f1e8)
     --e114-letter  kleur van de letters       (standaard #ffffff)
     --e114-tempo   ms per letter              (standaard 28ms)
   ========================================================================== */

.e114 { margin: 0; }
.e114 svg { display: block; width: 100%; height: auto; overflow: visible; }
.e114-rand { fill: none; stroke: var(--e114-rand, #f4f1e8); stroke-width: 48; }
.e114-weg { fill: none; stroke: var(--e114-weg, #2d3138); stroke-width: 42; }
.e114-tekst {
  fill: var(--e114-letter, #fff); font-family: var(--e114-font, inherit); font-size: 16.5px; font-weight: 600;
  letter-spacing: .4px; dominant-baseline: central;
}
.e114-auto { transform-box: fill-box; transform-origin: 50% 50%; }
.e114-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e114-wacht .e114-l { fill-opacity: 0; }
  html:not([data-rm]) .e114-wacht .e114-auto { opacity: 0; transform: translate3d(-40px, 0, 0); }
  html:not([data-rm]) .e114-wacht.e114-aan .e114-l {
    fill-opacity: 1;
    transition: fill-opacity .22s ease calc(var(--i, 0) * var(--e114-tempo, 28ms));
  }
  html:not([data-rm]) .e114-wacht.e114-aan .e114-auto {
    opacity: 1; transform: none;
    transition: opacity .3s ease var(--e114-eind, 2000ms), transform .9s cubic-bezier(.2, .9, .3, 1) var(--e114-eind, 2000ms);
  }
}