/* Gekopieerd uit NorthByte Lab: /home/user/nb-lab/lab/effecten/E105-handgetekende-accenten/effect.css (03-10-2026), ongewijzigd. */
/* ==========================================================================
   E105 · Handgetekende accenten bij woorden
   Een krabbel met de hand (golfje eronder, cirkel eromheen, dubbele streep of
   een pijl) tekent zich bij een woord zodra het in beeld komt. Het tekenen is
   een veeg met twee transforms die elkaar opheffen: het venster schuift open,
   de krabbel zelf staat stil. Geen stroke-dashoffset, geen filter.
   Instellen op .e105 met CSS-variabelen:
     --e105-kleur   kleur van de krabbel      (standaard currentColor)
     --e105-dikte   lijndikte in px           (standaard 3)
     --e105-duur    duur van één krabbel      (standaard 650ms)
   ========================================================================== */

.e105 { position: relative; white-space: nowrap; }
.e105-krabbel {
  position: absolute; pointer-events: none; overflow: hidden;
  color: var(--e105-kleur, currentColor);
}
.e105-krabbel svg { display: block; width: 100%; height: 100%; overflow: visible; }
.e105-krabbel path {
  fill: none; stroke: currentColor; stroke-width: var(--e105-dikte, 3);
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
/* Plek per soort, ten opzichte van het woord */
.e105-onder  { left: -2%; right: -2%; top: 80%; height: .24em; }
.e105-dubbel { left: -3%; right: -3%; top: 82%; height: .28em; }
.e105-cirkel { left: -14%; right: -12%; top: -14%; bottom: -16%; }
.e105-pijl   { left: calc(100% + .2em); top: 35%; width: 1.9em; height: 1.5em; }
.e105-pijl-links { left: auto; right: calc(100% + .2em); }

/* Het venster en de tegenbeweging */
.e105-venster, .e105-binnen { position: absolute; inset: 0; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e105-wacht .e105-venster { transform: translate3d(-101%, 0, 0); }
  html:not([data-rm]) .e105-wacht .e105-binnen { transform: translate3d(101%, 0, 0); }
  html:not([data-rm]) .e105-wacht.e105-aan .e105-venster,
  html:not([data-rm]) .e105-wacht.e105-aan .e105-binnen {
    transform: none;
    transition: transform var(--e105-duur, 650ms) cubic-bezier(.55, .05, .35, 1) var(--e105-na, 0ms);
  }
}