/**
 * Delad reveal-helper för Mercurius-moduler.
 *
 * Två globala verktyg som fungerar på vilken modul/rad/kolumn som helst:
 *
 *   .merc-reveal            – tonar in + stiger när elementet scrollas in.
 *                             Lägg på via Beaver Builder: Advanced → CSS Class.
 *   [data-reveal-stagger]   – barnen tonar in ett efter ett (index via --reveal-i).
 *
 * Initialläget appliceras bara när JS körts (html.merc-reveal-ready), så att
 * innehållet aldrig fastnar dolt om JavaScript saknas.
 */

/* ===== Enkel fade + rise ===== */
html.merc-reveal-ready .merc-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	will-change: opacity, transform;
}
html.merc-reveal-ready .merc-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ===== Stagger på barn ===== */
html.merc-reveal-ready [data-reveal-stagger] > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
	will-change: opacity, transform;
}
html.merc-reveal-ready [data-reveal-stagger].is-in > * {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--reveal-i, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
	html.merc-reveal-ready .merc-reveal,
	html.merc-reveal-ready [data-reveal-stagger] > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/**
 * I Beaver Builder-editorn: visa allt direkt.
 *
 * Under redigering renderas moduler om dynamiskt, så IntersectionObservern
 * hinner inte fånga de nya noderna och innehållet skulle annars fastna dolt
 * ("modulen försvinner"). Täcker både den delade helpern och modulernas
 * egna .reveal-element. Gäller bara i editorn (body.fl-builder-edit), inte
 * på publik frontend.
 */
.fl-builder-edit .merc-reveal,
.fl-builder-edit [data-reveal-stagger] > *,
.fl-builder-edit .reveal {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}