/* kit/text-lines — MIT, siehe LICENSE im selben Ordner. 0 Abhaengigkeiten.

   Eine Ueberschrift wischt beim Sichtwerden von unten frei: die Grundlinie
   kommt zuerst, die Zeile hebt sich dabei um 10px. Einmalig, per
   IntersectionObserver — nicht scroll-gebunden.

   WARUM KEIN SPLIT IN WOERTER ODER ZEICHEN:
   Der naheliegende Effekt aus der react-bits-Ecke zerlegt den Text in <span>
   pro Wort. Damit zerfaellt die Auswahl, Copy-Paste verliert Leerzeichen, und
   ein Screenreader liest je nach Engine Wortfragmente. Auf einer Verkaufsseite
   ist der Text das Produkt — er wird nicht angefasst. Gewischt wird deshalb das
   Element als Ganzes; das sieht auf einer einzeiligen Ueberschrift praktisch
   gleich aus und auf einer mehrzeiligen ruhiger.

   Der Endzustand schneidet ABSICHTLICH ins Negative (-22% oben/unten, -12%
   seitlich): clip-path beschneidet an der Border-Box, und eine Ueberschrift
   ragt regelmaessig darueber hinaus — Unterlaengen, text-shadow, ein
   Fokusring. Mit inset(0) waeren die nach dem Einblenden dauerhaft gekappt,
   und niemand haette den Zusammenhang zum Kit hergestellt. */

[data-kit-lines="pending"] {
  clip-path: inset(0 0 100% 0);
  transform: translateY(var(--kit-ldy, 26px));
  will-change: clip-path, transform;
}

/* --kit-lgap ist die NACHRANGIGKEIT. Bis 2026-07-30 schlossen sich Block-Reveal
   und Ueberschrift-Wisch gegenseitig aus ("zwei Einblendungen uebereinander
   sind Matsch") — auf der Messseite hat das allein 8 von 11 moeglichen
   Ueberschriften gekostet, und die betroffenen Sektionen trugen danach genau
   einen einzigen Effekt. Der Ausschluss war die falsche Antwort auf ein echtes
   Problem: Matsch entsteht durch GLEICHZEITIGKEIT, nicht durch Koexistenz.
   text-lines.js setzt die Variable auf 0, wenn die Ueberschrift frei steht, und
   auf den Versatz, wenn ein Vorfahr ebenfalls eingeblendet wird — dann kommt
   erst der Block, danach die Zeile. Zwei lesbare Bewegungen statt einer. */
[data-kit-lines="in"] {
  clip-path: inset(-22% -12% -22% -12%);
  transform: none;
  transition: clip-path var(--kit-ldur, 780ms) cubic-bezier(.2, .7, .3, 1) var(--kit-lgap, 0ms),
              transform var(--kit-ldur, 780ms) cubic-bezier(.2, .7, .3, 1) var(--kit-lgap, 0ms);
}

/* Nach dem Einblenden wird das will-change wieder abgeraeumt — sonst behaelt
   der Browser fuer jede Ueberschrift der Seite eine eigene Ebene. */
[data-kit-lines="done"] {
  clip-path: none;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-kit-lines] {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}