/* ============================================================================= scroll-reveal — generisches Einblenden beim Sichtbarwerden ============================================================================= Grund-Vokabular jeder Scrollytelling-Sektion (Design-Sprache Eigen-Sites): ein Element mit [data-reveal] startet versteckt (leicht verschoben + transparent) und blendet beim Sichtbarwerden ein (IntersectionObserver -> .is-revealed). TOKEN-PUR: enthaelt KEINE Farben (nur Opacity/Transform/Timing). Die --sr-* sind komponenten-lokale Motion-Konstanten (Distanz, Dauer, Easing, Delay) — an keine Marke gekettet, laut rules/lp-components-token-disziplin.md erlaubt. No-JS-/Fallback-sicher: ohne JS bleibt nichts unsichtbar. Der versteckte Startzustand gilt NUR, wenn das JS die Klasse .sr-ready auf setzt. Lade-Reihenfolge: _tokens/_base.css -> .css -> diese Datei -> scroll-reveal.js ============================================================================ */ [data-reveal] { --sr-distance: 24px; /* Start-Versatz */ --sr-duration: 0.8s; /* Einblend-Dauer */ --sr-easing: cubic-bezier(0.22, 1, 0.36, 1); /* weiches Aus-Schwingen */ --sr-delay: 0s; /* optionaler Stagger pro Element */ } /* Versteckter Startzustand NUR aktiv, wenn JS laeuft (setzt .sr-ready auf ). */ .sr-ready [data-reveal] { opacity: 0; transform: translateY(var(--sr-distance)); transition: opacity var(--sr-duration) var(--sr-easing), transform var(--sr-duration) var(--sr-easing); transition-delay: var(--sr-delay); will-change: opacity, transform; } /* Richtungs-Varianten (optional via Attribut-Wert) */ .sr-ready [data-reveal="up"] { transform: translateY(var(--sr-distance)); } .sr-ready [data-reveal="down"] { transform: translateY(calc(-1 * var(--sr-distance))); } .sr-ready [data-reveal="left"] { transform: translateX(var(--sr-distance)); } .sr-ready [data-reveal="right"] { transform: translateX(calc(-1 * var(--sr-distance))); } .sr-ready [data-reveal="fade"] { transform: none; } /* Eingeblendeter Endzustand */ .sr-ready [data-reveal].is-revealed { opacity: 1; transform: none; } /* Reduced-Motion: kein Versteck-/Bewegungs-Zustand, alles sofort sichtbar. */ @media (prefers-reduced-motion: reduce) { .sr-ready [data-reveal] { opacity: 1; transform: none; transition: none; } }