/*
 * Rodrigo Heading Entrance Animation 2.0
 * Apply exactly one direction class to an Elementor Heading or its widget wrapper:
 * rhea-from-bottom | rhea-from-top | rhea-from-left | rhea-from-right
 */

:where(
	.rhea-from-bottom,
	.rhea-from-top,
	.rhea-from-left,
	.rhea-from-right
) {
	--rhea-x: 0;
	--rhea-y: 115%;
	--rhea-duration: 800ms;
	--rhea-delay: 0ms;
	--rhea-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

.rhea-from-top {
	--rhea-x: 0;
	--rhea-y: -115%;
}

.rhea-from-left {
	--rhea-x: -105%;
	--rhea-y: 0;
}

.rhea-from-right {
	--rhea-x: 105%;
	--rhea-y: 0;
}

/* Hide only until the script has prepared the internal mask. */
html.rhea-js :where(
	.rhea-from-bottom,
	.rhea-from-top,
	.rhea-from-left,
	.rhea-from-right
):not([data-rhea-ready="yes"]) {
	opacity: 0;
}

:where(
	.rhea-from-bottom,
	.rhea-from-top,
	.rhea-from-left,
	.rhea-from-right
)[data-rhea-ready="yes"] {
	opacity: 1;
}

/* The outer heading keeps its original position, so viewport detection remains reliable. */
[data-rhea-mask="yes"] {
	overflow: hidden;
	overflow: clip;
}

[data-rhea-inner="yes"] {
	display: block;
	opacity: 0;
	transform: translate3d(var(--rhea-x), var(--rhea-y), 0);
	transform-origin: center;
	will-change: transform, opacity;
	transition:
		transform var(--rhea-duration) var(--rhea-easing) var(--rhea-delay),
		opacity calc(var(--rhea-duration) * 0.65) ease-out var(--rhea-delay);
}

[data-rhea-visible="yes"] [data-rhea-inner="yes"] {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	html.rhea-js :where(
		.rhea-from-bottom,
		.rhea-from-top,
		.rhea-from-left,
		.rhea-from-right
	) {
		opacity: 1 !important;
	}

	[data-rhea-inner="yes"] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}