/*
 * Scroll-Reveal – gestaffelte In-View-Animationen.
 *
 * Wichtig: Ausgeblendet wird nur, wenn JavaScript aktiv ist (`html.js`).
 * Das Flag wird inline im <head> gesetzt (siehe functions.php). Ohne
 * JavaScript bleibt der Inhalt dadurch immer vollständig sichtbar.
 *
 * Steuerung:
 *   .is-style-reveal        – einzelner Block wird beim Scrollen eingeblendet
 *   .is-style-reveal-group  – direkte Kindblöcke werden nacheinander eingeblendet
 *
 * Der Stagger-Index (`--lrb-reveal-i`) wird per JS gesetzt. Der Abstand
 * pro Element lässt sich über `--lrb-reveal-step` überschreiben, z. B.
 *   .meine-gruppe { --lrb-reveal-step: 140ms; }
 */

@media (prefers-reduced-motion: no-preference) {

	html.js .is-style-reveal,
	html.js .is-style-reveal-group > * {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
		transition:
			opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
			transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: calc(var(--lrb-reveal-i, 0) * var(--lrb-reveal-step, 90ms));
	}

	html.js .is-style-reveal.is-revealed,
	html.js .is-style-reveal-group > .is-revealed {
		opacity: 1;
		transform: none;
	}
}