/* Isoline FX 1.0.1 · Text- und Element-Effekte (Skill webdesign-motion, Katalog in effekte.md)
   Anfangszustände nur, wenn JavaScript läuft (Klasse fx-an auf <html>, gesetzt im <head>) und Bewegung erwünscht ist.
   Ohne JavaScript oder bei «weniger Bewegung» ist alles sofort sichtbar und lesbar. */

/* Masken von SplitText (mask: "lines") schneiden nur oben und unten: dort gleitet die Zeile herein. Seitlich nie, sonst wird
   ein Wort abgeschnitten, das über seine Spalte ragt (MadMax 18.10.2026). !important schlägt den Inline-Stil von SplitText. */
.fx-an [data-fx="zeilen"] > div, .fx-an [data-fx="woerter"] > div, .fx-an [data-fx="absatz"] > div { overflow: visible clip !important; }

/* Wortwechsel: ohne JavaScript nur das erste Wort */
[data-fx="wechsel"] > :not(:first-child) { display: none; }
.fx-an [data-fx="wechsel"].fx-bereit { display: inline-grid; vertical-align: bottom; overflow: clip; overflow-clip-margin: 0.1em; }
.fx-an [data-fx="wechsel"].fx-bereit > * { display: block; grid-area: 1 / 1; white-space: nowrap; }

/* Unterstreichung im Scroll-Text, Fortschrittslinie, Handschrift: Grundform */
.fx-strich { position: relative; display: inline-block; }
.fx-strich::after {
  content: ""; position: absolute; left: 0; right: 0.05em; bottom: 0.04em; height: 0.07em;
  background: var(--fx-akzent, currentColor); transform-origin: 0 50%;
}
[data-fx="handschrift"] { display: inline-flex; align-items: flex-start; gap: 0.35em; }
[data-fx="handschrift"] .fx-hand__text { display: inline-block; white-space: nowrap; }
[data-fx="handschrift"] svg path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: no-preference) {
  /* Text, den SplitText zerlegt: bis zum Zerlegen unsichtbar, sonst blitzt er kurz auf. fx.js zeigt ihn wieder. */
  .fx-an [data-fx="zeilen"], .fx-an [data-fx="woerter"], .fx-an [data-fx="absatz"] { visibility: hidden; }

  .fx-an .fx-strich::after { transform: scaleX(0); transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
  .fx-an .fx-strich.ist-an::after { transform: scaleX(1); }

  .fx-an [data-fx="handschrift"] .fx-hand__text { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.2, .7, .2, 1); }
  .fx-an [data-fx="handschrift"] svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.2, .7, .2, 1) .7s; }
  .fx-an [data-fx="handschrift"] svg path + path { transition-delay: 1.4s; transition-duration: .4s; }
  .fx-an [data-fx="handschrift"].ist-an .fx-hand__text { clip-path: inset(0 -4% 0 0); }
  .fx-an [data-fx="handschrift"].ist-an svg path { stroke-dashoffset: 0; }
}

/* Fortschrittslinie mit wanderndem Punkt (Form frei gestaltbar, hier senkrecht) */
[data-fx="fortschritt"] { position: relative; }
[data-fx="fortschritt"] .fx-linie { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--fx-akzent, currentColor); transform-origin: 50% 0; }
[data-fx="fortschritt"] .fx-punkt { position: absolute; left: -5px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--fx-akzent, currentColor); }