/**
 * Hidden until JS marks the document. Without JS, elements stay visible.
 *
 * Usage:
 *   <div data-fade-up="true">scroll-in (once, -60px viewport inset)</div>
 *   <div data-fade-up="true" data-ml-delay="0.12">stagger delay in seconds</div>
 *   <h1 data-fade-up="true" data-ml-trigger="load" data-ml-delay="0.22">page-load / hero</h1>
 */

html.ml-fadeup-js:not(.ml-fadeup-editor) [data-fade-up="true"] {
	--ml-fadeup-from-y: 28px;
	--ml-fadeup-duration: 0.55s;
	--ml-fadeup-delay: 0s;
	--ml-fadeup-ease: cubic-bezier(0.22, 1, 0.36, 1);

	opacity: 0;
	transform: translate3d(0, var(--ml-fadeup-from-y), 0);
	transition:
		opacity var(--ml-fadeup-duration) var(--ml-fadeup-ease) var(--ml-fadeup-delay),
		transform var(--ml-fadeup-duration) var(--ml-fadeup-ease) var(--ml-fadeup-delay);
	will-change: opacity, transform;
}

html.ml-fadeup-js:not(.ml-fadeup-editor) [data-fade-up="true"][data-ml-trigger="load"] {
	--ml-fadeup-from-y: 16px;
	--ml-fadeup-duration: 0.6s;
}

html.ml-fadeup-js:not(.ml-fadeup-editor) [data-fade-up="true"].is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	will-change: auto;
}

/* Elementor editor / preview — always show elements while designing */
html.ml-fadeup-editor [data-fade-up="true"],
body.elementor-editor-active [data-fade-up="true"] {
	opacity: 1;
	transform: none;
	transition: none;
	will-change: auto;
}