/*!
 * tp-motion.css — Basis-Styles für die TwoPixels Premium Interaction Layer.
 * Nur die technisch nötigen Zustaende (Ausgangs-Sichtbarkeit, Masken, Split,
 * Laufband, Tilt). Das eigentliche Design liegt im Stylesheet der Seite.
 */

/* Vor der Initialisierung: Reveal-Elemente unsichtbar halten, damit nichts
   ungeanimiert aufblitzt. Sobald JS läuft (tp-ready) übernimmt GSAP. */
:root:not(.tp-ready) [data-tp-reveal]:not([data-tp-reveal="mask"]) { opacity: 0; }

/* Kein JS / prefers-reduced-motion: alles sofort sichtbar. */
.tp-reduced [data-tp-reveal] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  [data-tp-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Mask-Reveal: Text/Block wandert aus einer Klammer nach oben herein. */
.tp-mask { display: block; overflow: hidden; }
[data-tp-reveal="mask"] { display: block; will-change: transform; }

/* Split-Text: jede Einheit ist eine Maske, die herein fährt.
   padding/margin geben Ober- und Unterlaengen Luft, damit overflow:hidden
   die Glyphen nicht anschneidet. */
[data-tp-split] { }
.tp-split-line { display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0.06em 0 0.16em; margin-bottom: -0.16em; }
.tp-split-unit { display: inline-block; will-change: transform; }

/* Laufband. */
[data-tp-marquee] { display: flex; overflow: hidden; white-space: nowrap; width: 100%; }
[data-tp-marquee] .tp-marquee-track { display: inline-flex; flex: 0 0 auto; will-change: transform; }

/* Horizontal-Scroll-Track. */
[data-tp-hscroll] { overflow: hidden; }
[data-tp-hscroll] .tp-hscroll-track { display: flex; flex-wrap: nowrap; will-change: transform; }

/* Tilt/Magnetic wollen GPU-Beschleunigung. */
[data-tp-tilt], [data-tp-magnetic] { will-change: transform; }

/* Fortschrittsbalken (optional): <div data-tp-progress></div> ganz oben. */
[data-tp-progress] { transform: scaleX(0); transform-origin: left; }

/* Lenis-Grundzustand (auch ohne separate lenis.css). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }