/* ========================================================================== motion.css — Bewegung -------------------------------------------------------------------------- Regel dieses Projekts: Animation transportiert Information oder sie fliegt raus. Erlaubt sind Fade, Slide, Scale und leichte Parallaxe. Keine Rotation, keine Partikel, kein Bounce. Alles Animierte läuft ausschliesslich über opacity und transform – die zwei Eigenschaften, die der Compositor ohne Layout- oder Paint-Arbeit verrechnen kann. Das ist die eigentliche Bedingung für 60 fps. ========================================================================== */ /* -------------------------------------------------------------------------- Eintritt beim Scrollen 36px Weg, 1s Dauer, Ease-out. Der Weg ist absichtlich kurz: Elemente sollen sich setzen, nicht einfliegen. -------------------------------------------------------------------------- */ /* Der Startzustand hängt an der Klasse .js, die ein Einzeiler im setzt. So ist die Logik richtig herum: ohne JavaScript ist alles sichtbar, und es gibt keinen Moment, in dem Inhalt erst erscheint und dann verschwindet. */ .js [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } .js [data-reveal="scale"] { transform: translateY(36px) scale(.97); } .js [data-reveal].is-in { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- Parallaxe Sehr kleine Faktoren (0.04–0.07). Sichtbar als Tiefe, nicht als Effekt. -------------------------------------------------------------------------- */ [data-parallax] { will-change: transform; } /* -------------------------------------------------------------------------- Hero-Auftritt Gestaffelt in 150ms-Schritten. Die Reihenfolge folgt der Leserichtung: Label, Titel, Claim, Text, Schaltflächen. -------------------------------------------------------------------------- */ @keyframes rise { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes cue { 0%, 100% { transform: scaleY(.3); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } } .hero [data-enter] { animation: rise .9s var(--ease-out) both; animation-delay: calc(var(--enter, 0) * 150ms); } .hero__cue { animation: fade 1s var(--ease-soft) 1.2s both; } .hero__cue-line { animation: cue 2.2s var(--ease-soft) infinite; } /* -------------------------------------------------------------------------- Reduzierte Bewegung Nicht "weniger Animation", sondern keine. Alle Inhalte bleiben sichtbar und vollständig – nur ohne Weg und ohne Zeit. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js [data-reveal], .hero [data-enter] { opacity: 1 !important; transform: none !important; } [data-parallax] { transform: none !important; will-change: auto; } .hero__cue { display: none; } }