/* ------------------------------------------------------------------
Reveal on scroll — Progressive Enhancement
------------------------------------------------------------------
Grundregel: Alles ist per Default sichtbar.
Versteckt wird nur, wenn gesetzt ist – also wenn
JavaScript nachweislich läuft. Ohne JS bleibt die Seite komplett
lesbar, weil diese Regeln dann gar nicht greifen.
Markup:
…
von rechts
…
von links
…
gestaffelt
------------------------------------------------------------------ */
body {
overflow-x: clip;
}
.js .reveal {
opacity: 0;
transform: translate3d(var(--reveal-shift, 3rem), 0, 0);
transition:
opacity var(--reveal-duration, 750ms) ease-out,
transform var(--reveal-duration, 750ms) cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
.js .reveal--left {
--reveal-shift: -3rem;
}
.js .reveal.is-revealed {
opacity: 1;
transform: none;
will-change: auto;
}
/* ------------------------------------------------------------------
Bewegungsreduzierung: sofort sichtbar, keine Transition, kein Versatz.
Bewusst kein „sanftes Einblenden light“ – ein Opacity-Fade ist zwar
harmlos, aber der Kontrollpunkt hier ist Verlässlichkeit.
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.js .reveal,
.js .reveal.is-revealed {
opacity: 1;
transform: none;
transition: none;
transition-delay: 0ms;
will-change: auto;
}
}
/* Druckausgabe: nie etwas verstecken. */
@media print {
.js .reveal {
opacity: 1 !important;
transform: none !important;
}
}