/*
Bürofluss — Scroll-Reveal-System
Vanilla CSS, keine Abhängigkeiten. Zusammen mit reveal.js einbinden:
Markup:
...
Ohne JavaScript (deaktiviert / blockiert) bleiben alle Elemente normal
sichtbar — reveal.js setzt die Klasse "js-reveal" auf , erst danach
greift der versteckte Startzustand unten. Kein Flash-of-invisible-content.
*/
:root {
--reveal-distance: 12px;
--reveal-duration: 260ms;
--reveal-stagger: 70ms;
--reveal-easing: ease-out;
}
/* Startzustand nur, wenn JS lief UND das Element noch nicht sichtbar wurde */
html.js-reveal [data-reveal],
html.js-reveal [data-reveal-group] > * {
opacity: 0;
transform: translateY(var(--reveal-distance));
transition:
opacity var(--reveal-duration) var(--reveal-easing),
transform var(--reveal-duration) var(--reveal-easing);
will-change: opacity, transform;
}
html.js-reveal [data-reveal].is-visible,
html.js-reveal [data-reveal-group] > *.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Gestaffelter Rhythmus für Gruppen (Karten-Grids, Listen) — reveal.js setzt
den passenden --reveal-index pro Kind, das Timing bleibt hier zentral */
html.js-reveal [data-reveal-group] > * {
transition-delay: calc(var(--reveal-index, 0) * var(--reveal-stagger));
}
/* Fokus/Tastatur: ein Element, das gerade den Fokus bekommt (z.B. Sprung-
navigation, Tab-Reihenfolge), wird sofort sichtbar statt animiert zu warten */
html.js-reveal [data-reveal]:focus-within,
html.js-reveal [data-reveal-group] > *:focus-within {
transition-duration: 1ms;
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
html.js-reveal [data-reveal],
html.js-reveal [data-reveal-group] > * {
opacity: 1;
transform: none;
transition: none;
will-change: auto;
}
}
/* will-change wird von reveal.js entfernt, sobald ein Element sichtbar
geworden ist — hält den Compositor-Layer nur während der Animation aktiv */
html.js-reveal [data-reveal].is-visible,
html.js-reveal [data-reveal-group] > *.is-visible {
will-change: auto;
}