/**
 * Smart Animate for Elementor – motion layer.
 *
 * Nothing is hidden unless frontend.js has added .sae-js to <html> and
 * .sae-target to an element, so content stays visible without JavaScript.
 * Only opacity and transform are animated to avoid layout shifts.
 */
:root {
	--sae-duration: 650ms;
	--sae-delay: 0ms;
	--sae-easing: cubic-bezier(0.2, 0.7, 0.2, 1);
	--sae-distance: 24px;
}

.sae-js .sae-target {
	transition:
		opacity var(--sae-duration) var(--sae-easing) var(--sae-delay),
		transform var(--sae-duration) var(--sae-easing) var(--sae-delay);
}

.sae-js .sae-target:not(.sae-visible) {
	opacity: 0;
}

.sae-js .sae-target[data-sae-effect="fade-up"]:not(.sae-visible) {
	transform: translate3d(0, var(--sae-distance), 0);
}

.sae-js .sae-target[data-sae-effect="slide-left"]:not(.sae-visible) {
	transform: translate3d(var(--sae-distance), 0, 0);
}

.sae-js .sae-target[data-sae-effect="slide-right"]:not(.sae-visible) {
	transform: translate3d(calc(var(--sae-distance) * -1), 0, 0);
}

.sae-js .sae-target[data-sae-effect="zoom-in"]:not(.sae-visible) {
	transform: scale(0.94);
}

.sae-js .sae-target[data-sae-effect="fade-down"]:not(.sae-visible) {
	transform: translate3d(0, calc(var(--sae-distance) * -1), 0);
}

.sae-js .sae-target[data-sae-effect="zoom-out"]:not(.sae-visible) {
	transform: scale(1.06);
}

/* Pop In settles with a small overshoot. */
.sae-js .sae-target[data-sae-effect="pop-in"] {
	--sae-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sae-js .sae-target[data-sae-effect="pop-in"]:not(.sae-visible) {
	transform: scale(0.85);
}

/* Flips keep their hinge for the whole transition, not just the hidden state. */
.sae-js .sae-target[data-sae-effect="flip-up"] {
	transform-origin: 50% 100%;
}

.sae-js .sae-target[data-sae-effect="flip-up"]:not(.sae-visible) {
	transform: perspective(800px) rotateX(20deg);
}

.sae-js .sae-target[data-sae-effect="flip-left"] {
	transform-origin: 0 50%;
}

.sae-js .sae-target[data-sae-effect="flip-left"]:not(.sae-visible) {
	transform: perspective(800px) rotateY(-20deg);
}

.sae-js .sae-target[data-sae-effect="rotate-in"]:not(.sae-visible) {
	transform: translate3d(0, var(--sae-distance), 0) rotate(-3deg);
}

/*
 * Set by frontend.js only while targets whose effect can extend sideways
 * (slides, zoom-out, pop-in, flips, rotate) are pending, so they cannot add
 * horizontal scroll. "clip" (unlike "hidden") creates no scroll container,
 * so position: sticky keeps working.
 */
html.sae-clip-x,
html.sae-clip-x body {
	overflow-x: clip;
}

/* Reduced motion and print always show content statically. */
@media (prefers-reduced-motion: reduce) {
	.sae-js .sae-target,
	.sae-js .sae-target:not(.sae-visible) {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

@media print {
	.sae-js .sae-target,
	.sae-js .sae-target:not(.sae-visible) {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}
