/* ============ TENSILE Motion-System — Progressive Enhancement ============ Alle Motion-Startzustaende (opacity 0) gelten NUR unter html.tensile-motion. Die Klasse setzt das Inline-Gate-Script im — und zwar nur, wenn (a) JavaScript laeuft und (b) prefers-reduced-motion NICHT reduce ist. Ohne Gate-Klasse (kein JS / reduced motion): alles sofort sichtbar. Kurve ueberall: cubic-bezier(0.2, 0.8, 0.2, 1) — einrasten, nicht schweben. */ /* Smooth-Scroll nur mit Motion (deckt reduced-motion gleich mit ab) */ html.tensile-motion{scroll-behavior:smooth} /* ---------- Scroll-Reveal (Content-Sektionen unterhalb des Heros) ---------- */ html.tensile-motion .reveal{ opacity:0; transform:translateY(10px); transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1); } html.tensile-motion .reveal.in{opacity:1;transform:none} /* ---------- Hero-Einstieg: gestaffelter Auftritt on load ---------- */ html.tensile-motion .rise{ opacity:0; transform:translateY(10px); animation:tensile-rise .45s cubic-bezier(.2,.8,.2,1) forwards; } html.tensile-motion .rise.d1{animation-delay:.05s} html.tensile-motion .rise.d2{animation-delay:.12s} html.tensile-motion .rise.d3{animation-delay:.19s} html.tensile-motion .rise.d4{animation-delay:.26s} html.tensile-motion .rise.d5{animation-delay:.33s} @keyframes tensile-rise{to{opacity:1;transform:none}} /* ---------- Doppelte Absicherung: reduced-motion schlaegt auch eine faelschlich gesetzte Gate-Klasse ---------- */ @media (prefers-reduced-motion:reduce){ html.tensile-motion{scroll-behavior:auto} html.tensile-motion .rise, html.tensile-motion .reveal{ opacity:1!important; transform:none!important; animation:none!important; transition:none!important; } .fill{transition:none} }