/* THAL-616 Bewegungsschicht (GSAP + Lenis), siehe motion.js */

/* Überschrift wartet auf ihren Auftritt. Fällt motion.js aus, ist sie nach
   2,5 s trotzdem da — Inhalt hängt nie an JavaScript. */
.tx-motion #hero-heading { opacity: 0; animation: tx-reveal-fallback 0s 2.5s forwards; }
.tx-motion #hero-heading.tx-ready { opacity: 1; animation: none; }
@keyframes tx-reveal-fallback { to { opacity: 1; } }
#hero-heading .tx-word { display: inline-block; }

/* Magnetische Knöpfe über die eigenständige `translate`-Eigenschaft: die
   vorhandenen Hover-Transforms (.slat-cta:hover translateY) bleiben unberührt. */
.tx-magnet { translate: calc(var(--mx, 0) * 1px) calc(var(--my, 0) * 1px); }

.tx-count { font-variant-numeric: tabular-nums; }

/* „Bauplan wird Website": fertige Website kippt beim Wegscrollen leicht nach
   hinten. Eigene Eigenschaften `rotate`/`translate` — die Layout-Transforms der
   .composition (je Projekt verschieden) bleiben unberührt. */
/* Vor dem ersten Zusammensetzen nichts zeigen, was die Choreografie gleich wieder
   ausblendet: sonst blitzen Handy, Notiz und fertiges Bild kurz auf, verschwinden
   und kommen erst am Ende wieder (Befund Alex 2026-10-09). Sobald living.js eine
   Phase setzt, übernimmt die Animation; ohne sie nach 4 s trotzdem sichtbar. */
.tx-motion .living-stage:not([data-phase]) .composition-phone,
.tx-motion .living-stage:not([data-phase]) .composition-note,
.tx-motion .living-stage:not([data-phase]) .living-fallback { opacity: 0; animation: tx-reveal-fallback 0s 4s forwards; }

.tx-desk .living-hero .composition { rotate: x calc(var(--tilt, 0) * 14deg); translate: 0 calc(var(--tilt, 0) * -28px); }
.motion-paused .living-hero .composition { rotate: none; translate: none; }

/* Projektwechsel: Handy und Notiz blendet living.js per GSAP; die CSS-Übergänge
   aus living.css würden das Ausblenden verschmieren und den Lagewechsel zwischen
   den Layouts sichtbar animieren. Lage springt nur, solange sie unsichtbar sind. */
.tx-motion .composition-phone, .tx-motion .composition-note { transition: none; }