/* ============================================================ scoreprise.AI — Motion-Regeln (gemeinsam, seitenübergreifend) Ken-Burns, gestaffelte Scroll-Reveals, Parallax, Count-up. Verhalten liefert motion.js. Versteckte Ausgangszustände (opacity:0) greifen NUR, wenn JS die Klasse .motion-ready auf gesetzt hat — ohne JS bleibt also alles sichtbar. Drei Intensitäten über html[data-motion="dezent|normal|kraeftig"]. Spiegelt die Inline-Regeln der Startseite, ergänzt um die Use-Case-Hero-Klasse (.uc-feature__bg). ============================================================ */ html[data-motion="dezent"] { --reveal-dist: 14px; --reveal-dur: 520ms; --reveal-stagger: 50ms; --kb-scale: 1.08; --kb-dur: 20s; } html[data-motion="normal"] { --reveal-dist: 20px; --reveal-dur: 650ms; --reveal-stagger: 60ms; --kb-scale: 1.12; --kb-dur: 16s; } html[data-motion="kraeftig"] { --reveal-dist: 32px; --reveal-dur: 820ms; --reveal-stagger: 90ms; --kb-scale: 1.20; --kb-dur: 12s; } /* ---------- Scroll-Reveals ---------- */ .motion-ready [data-reveal] { opacity: 0; transform: translateY(var(--reveal-dist, 42px)); transition: opacity var(--reveal-dur, 650ms) cubic-bezier(0.22, 1, 0.36, 1), transform var(--reveal-dur, 650ms) cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--rd, 0) * var(--reveal-stagger, 60ms)); will-change: opacity, transform; } .motion-ready [data-reveal].is-in { opacity: 1; transform: none; } /* ---------- Ken-Burns im Hero ---------- Endlos alternierend (nie einmalig/forwards). Greift auf die Hero-Fotos der Startseite und der Use-Case-Seiten. */ .motion-ready[data-motion]:not([data-motion="aus"]) .bg-hero__photo, .motion-ready[data-motion]:not([data-motion="aus"]) .uc-feature__bg, .motion-ready[data-motion]:not([data-motion="aus"]) .uc-hero__photo, .motion-ready[data-motion]:not([data-motion="aus"]) .pagehero__bg { animation: kenburns var(--kb-dur, 16s) var(--ease-in-out) infinite alternate; transform-origin: 58% 42%; } @keyframes kenburns { from { transform: scale(1); } to { transform: scale(var(--kb-scale, 1.12)); } } /* Use-Case-Übersicht (body.darkhero): die vielen uc-feature-Blöcke sind Inhalt (15 Fälle), kein Hero — daher KEIN Ken-Burns. Verhindert endlose Dekorations-Loops auf Inhalten; nur der echte Hero (.uc-hero__photo) zoomt. */ .darkhero .uc-feature__bg { animation: none !important; } /* ---------- Parallax ---------- Hintergrundbilder mit data-parallax laufen langsamer als der Vordergrund; das Bild wird dafür über die Sektion hinaus gedehnt. */ .motion-ready.parallax-on [data-parallax] { top: -9%; bottom: auto; height: 118%; will-change: transform; } /* ---------- Reduced Motion ---------- Alles sofort sichtbar, keine Endlos-Animation. */ @media (prefers-reduced-motion: reduce) { .motion-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .bg-hero__photo, .uc-feature__bg, .uc-hero__photo, .pagehero__bg { animation: none !important; } } /* ---------- Lenis Smooth-Scroll ---------- Lenis setzt die Klassen .lenis / .lenis-smooth auf . */ 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; } .lenis.lenis-smooth iframe { pointer-events: none; }