/**
 * Aufbau-Effekte für die Landingpages („Reveal-Schicht").
 *
 * Grundregel: Versteckt wird ausschließlich unterhalb von
 * `html.mlp-reveal-ready` — diese Klasse setzt das JS selbst. Fehlt JS,
 * IntersectionObserver oder bricht das Skript ab, bleibt die Seite
 * vollständig sichtbar. Animiert werden nur `opacity` und `transform`
 * (Compositor, kein Layout-Shift, kein CLS-Einfluss).
 */

:root {
	--mlp-reveal-shift: 18px;
	--mlp-reveal-scale: 0.96;
	--mlp-reveal-dur: 620ms;
	--mlp-reveal-step: 70ms;
	--mlp-reveal-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

/* Dezente Variante: kürzerer Weg, schneller, kein Zoom. */
body.mlp-reveal-dezent {
	--mlp-reveal-shift: 10px;
	--mlp-reveal-scale: 1;
	--mlp-reveal-dur: 460ms;
}

html.mlp-reveal-ready .mlp-reveal__item {
	opacity: 0;
	transform: translateY( var( --mlp-reveal-shift ) );
	transition:
		opacity var( --mlp-reveal-dur ) var( --mlp-reveal-ease ),
		transform var( --mlp-reveal-dur ) var( --mlp-reveal-ease );
	transition-delay: calc( var( --i, 0 ) * var( --mlp-reveal-step ) );
	will-change: opacity, transform;
}

/* Bilder und Bild-Boxen kommen zusätzlich leicht aus der Tiefe. */
html.mlp-reveal-ready .mlp-reveal__item--zoom {
	transform: translateY( var( --mlp-reveal-shift ) ) scale( var( --mlp-reveal-scale ) );
}

/* Zielzustand: sobald die Sektion im Blick ist (bzw. die Sektion selbst das Item ist). */
html.mlp-reveal-ready .mlp-reveal.is-in .mlp-reveal__item,
html.mlp-reveal-ready .mlp-reveal.is-in.mlp-reveal__item {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/*
 * Sicherungen. Das JS steigt in denselben Fällen aus — doppelt gemoppelt,
 * damit ein Timing-Fehler nie zu einer leeren Seite führt.
 */
@media ( prefers-reduced-motion: reduce ) {
	html.mlp-reveal-ready .mlp-reveal__item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

@media print {
	html.mlp-reveal-ready .mlp-reveal__item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Elementor-Editor: nie animieren, sonst bearbeitet man unsichtbare Elemente. */
body.elementor-editor-active .mlp-reveal__item {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}