/* Used by elements that had one of the "WPF Text Reveal" options picked
 * from Elementor's native Entrance Animation dropdown (Advanced > Motion
 * Effects). The element gets a [data-wpf-anim] attribute + child spans
 * with class .wpf-anim-item injected by entrance-animations.js. */

[data-wpf-anim] {
	--wpf-duration: 600ms;
	--wpf-stagger: 45ms;
	--wpf-start-delay: 0ms;
}

.wpf-anim-item {
	display: inline-block;
	opacity: 0;
	will-change: transform, opacity, filter;
	transition-property: transform, opacity, filter;
	transition-duration: var(--wpf-duration);
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--wpf-start-delay) + (var(--wpf-index) * var(--wpf-stagger)));
}

/* Fade Up */
[data-wpf-anim="fade-up"] .wpf-anim-item { transform: translateY(35px); }
[data-wpf-anim="fade-up"].wpf-in-view .wpf-anim-item { opacity: 1; transform: translateY(0); }

/* Fade Down */
[data-wpf-anim="fade-down"] .wpf-anim-item { transform: translateY(-35px); }
[data-wpf-anim="fade-down"].wpf-in-view .wpf-anim-item { opacity: 1; transform: translateY(0); }

/* Simple Fade */
[data-wpf-anim="fade-in"] .wpf-anim-item { transform: none; }
[data-wpf-anim="fade-in"].wpf-in-view .wpf-anim-item { opacity: 1; }

/* Slide From Left */
[data-wpf-anim="slide-left"] .wpf-anim-item { transform: translateX(-50px); }
[data-wpf-anim="slide-left"].wpf-in-view .wpf-anim-item { opacity: 1; transform: translateX(0); }

/* Slide From Right */
[data-wpf-anim="slide-right"] .wpf-anim-item { transform: translateX(50px); }
[data-wpf-anim="slide-right"].wpf-in-view .wpf-anim-item { opacity: 1; transform: translateX(0); }

/* Zoom In */
[data-wpf-anim="zoom-in"] .wpf-anim-item { transform: scale(0.4); }
[data-wpf-anim="zoom-in"].wpf-in-view .wpf-anim-item { opacity: 1; transform: scale(1); }

/* Blur In */
[data-wpf-anim="blur-in"] .wpf-anim-item { filter: blur(10px); transform: translateY(15px); }
[data-wpf-anim="blur-in"].wpf-in-view .wpf-anim-item { opacity: 1; filter: blur(0); transform: translateY(0); }

/* Keep things editable/visible while inside the Elementor editor canvas */
.elementor-editor-active .wpf-anim-item {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	transition: none !important;
}