/**
 * Sitto - Animation (see assets/js/sitto-animation.js).
 *
 * Uses the individual `translate` / `scale` / `rotate` properties so it
 * never fights with `transform` set by Elementor or the theme (e.g. sticky
 * cards). Hidden states only apply to .sa-ready, which the script adds — no
 * JS or reduced motion means content is simply visible.
 *
 * Site defaults (duration, distance, easing, stagger, offset) arrive as
 * --sa-* variables on <body> from Elementor Site Settings; per-element
 * settings override them on the element.
 */

/* ------------------------------------------------------------------
 * Transitions
 * ------------------------------------------------------------------ */

.sa-ready,
.sa-ready .sa-word {
	--sa-d: var(--sa-duration, 900ms);
	--sa-e: var(--sa-ease, cubic-bezier(0.22, 1, 0.36, 1));
	--sa-wait: calc(var(--sa-delay, 0ms) + min(var(--sa-i, 0), var(--sa-stagger-max, 8)) * var(--sa-stagger, 90ms));
	transition:
		opacity var(--sa-d) var(--sa-e) var(--sa-wait),
		translate var(--sa-d) var(--sa-e) var(--sa-wait),
		scale var(--sa-d) var(--sa-e) var(--sa-wait),
		rotate var(--sa-d) var(--sa-e) var(--sa-wait),
		filter var(--sa-d) var(--sa-e) var(--sa-wait),
		clip-path calc(var(--sa-d) * 1.2) var(--sa-e) var(--sa-wait),
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.45s ease;
}

.sa-ready .sa-word,
.sa-ready .sa-w {
	/* Word gap: the stagger, capped so a whole text spreads over at most 0.7 s. */
	--sa-ws: min(var(--sa-stagger, 60ms), calc(700ms / var(--sa-wn, 1)));
	--sa-wait: calc(var(--sa-delay, 0ms) + var(--sa-wo, 0ms) + var(--sa-wi, 0) * var(--sa-ws));
	display: inline-block;
}

.sa-ready .sa-w {
	transition:
		opacity var(--sa-d) var(--sa-e) var(--sa-wait),
		translate var(--sa-d) var(--sa-e) var(--sa-wait);
}

/* Badge / description inside a heading widget, around the words. */
.sa-ready .sa-part {
	--sa-wait: calc(var(--sa-delay, 0ms) + var(--sa-pd, 0ms));
	transition:
		opacity var(--sa-d) var(--sa-e) var(--sa-wait),
		translate var(--sa-d) var(--sa-e) var(--sa-wait);
}

/* Springy transform for "pop", whatever easing is chosen for opacity. */
.sa-ready[data-sa-effect="pop"] {
	transition:
		opacity calc(var(--sa-d) * 0.6) var(--sa-e) var(--sa-wait),
		translate var(--sa-d) cubic-bezier(0.34, 1.56, 0.64, 1) var(--sa-wait),
		scale var(--sa-d) cubic-bezier(0.34, 1.56, 0.64, 1) var(--sa-wait),
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.45s ease;
}

/* Reset (element left the screen): jump back without animating. */
.sa-ready.sa-reset,
.sa-ready.sa-reset .sa-word,
.sa-ready.sa-reset .sa-w,
.sa-ready.sa-reset .sa-part,
.sa-ready.sa-reset > *,
.sa-ready.sa-reset img,
.sa-ready.sa-reset video,
.sa-ready.sa-reset .sa-hl-sweep::before {
	transition: none !important;
}

/* ------------------------------------------------------------------
 * Start states. --sa-sign flips vertical motion when the element comes
 * back in from above (scrolling up).
 * ------------------------------------------------------------------ */

.sa-ready {
	--sa-sign: 1;
	--sa-dist: var(--sa-distance, 40px);
}

.sa-ready.sa-from-above {
	--sa-sign: -1;
}

.sa-ready:not(.sa-in)[data-sa-effect="fade"] {
	opacity: 0;
}

.sa-ready:not(.sa-in)[data-sa-effect="rise"] {
	opacity: 0;
	translate: 0 calc(var(--sa-dist) * var(--sa-sign));
}

.sa-ready:not(.sa-in)[data-sa-effect="fall"] {
	opacity: 0;
	translate: 0 calc(var(--sa-dist) * var(--sa-sign) * -1);
}

.sa-ready:not(.sa-in)[data-sa-effect="from-left"] {
	opacity: 0;
	translate: calc(var(--sa-dist) * -1) 0;
}

.sa-ready:not(.sa-in)[data-sa-effect="from-right"] {
	opacity: 0;
	translate: var(--sa-dist) 0;
}

.sa-ready:not(.sa-in)[data-sa-effect="soft-zoom"] {
	opacity: 0;
	scale: 0.96;
	translate: 0 calc(var(--sa-dist) * 0.5 * var(--sa-sign));
}

.sa-ready:not(.sa-in)[data-sa-effect="pop"] {
	opacity: 0;
	scale: 0.82;
	translate: 0 calc(var(--sa-dist) * 0.3 * var(--sa-sign));
}

.sa-ready:not(.sa-in)[data-sa-effect="zoom-in"] {
	opacity: 0;
	scale: 0.85;
}

.sa-ready:not(.sa-in)[data-sa-effect="zoom-out"] {
	opacity: 0;
	scale: 1.15;
}

.sa-ready:not(.sa-in)[data-sa-effect="blur"] {
	opacity: 0;
	filter: blur(14px);
	translate: 0 calc(var(--sa-dist) * 0.5 * var(--sa-sign));
}

.sa-ready[data-sa-effect="tilt"] {
	transform-origin: 0% 100%;
}

.sa-ready:not(.sa-in)[data-sa-effect="tilt"] {
	opacity: 0;
	rotate: calc(5deg * var(--sa-sign));
	translate: 0 calc(var(--sa-dist) * var(--sa-sign));
}

/*
 * Clip reveals are applied to the direct children, never to the observed
 * element itself: the browser treats a fully clipped target as off screen,
 * so it would never be told to animate. The rest state reaches past the box
 * so shadows and overflowing children are not clipped.
 */
.sa-ready[data-sa-effect="wipe-up"] > *,
.sa-ready[data-sa-effect="wipe-right"] > *,
.sa-ready[data-sa-effect="unveil"] > * {
	clip-path: inset(-25% -25% -25% -25%);
	transition: clip-path calc(var(--sa-d) * 1.2) var(--sa-e) var(--sa-wait);
}

.sa-ready:not(.sa-in)[data-sa-effect="wipe-up"] > * {
	clip-path: inset(100% 0 0 0);
}

.sa-ready.sa-from-above:not(.sa-in)[data-sa-effect="wipe-up"] > * {
	clip-path: inset(0 0 100% 0);
}

.sa-ready:not(.sa-in)[data-sa-effect="wipe-right"] > * {
	clip-path: inset(0 100% 0 0);
}

.sa-ready[data-sa-effect="mask"] > * {
	clip-path: inset(-25% -25% -25% -25% round 0px);
	transition: clip-path calc(var(--sa-d) * 1.2) var(--sa-e) var(--sa-wait);
}

/* Unveil: the frame opens upward while the picture settles from a zoom. */
.sa-ready:not(.sa-in)[data-sa-effect="unveil"] > * {
	clip-path: inset(100% 0 0 0);
}

.sa-ready.sa-from-above:not(.sa-in)[data-sa-effect="unveil"] > * {
	clip-path: inset(0 0 100% 0);
}

.sa-ready[data-sa-effect="unveil"] img,
.sa-ready[data-sa-effect="unveil"] video {
	transition: scale calc(var(--sa-d) * 1.6) var(--sa-e) var(--sa-wait);
}

.sa-ready:not(.sa-in)[data-sa-effect="unveil"] img,
.sa-ready:not(.sa-in)[data-sa-effect="unveil"] video {
	scale: 1.18;
}

.sa-ready:not(.sa-in)[data-sa-effect="mask"] {
	opacity: 0;
	scale: 1.06;
}

.sa-ready:not(.sa-in)[data-sa-effect="mask"] > * {
	clip-path: inset(14% 12% 14% 12% round 24px);
}

/* Small screens: sideways slides become a rise (no horizontal scroll). */
@media (max-width: 767px) {
	.sa-ready:not(.sa-in)[data-sa-effect="from-left"],
	.sa-ready:not(.sa-in)[data-sa-effect="from-right"] {
		translate: 0 calc(var(--sa-dist) * var(--sa-sign));
	}
}

/* Words (blur) */
.sa-ready:not(.sa-in)[data-sa-effect="words"] .sa-word {
	opacity: 0;
	translate: 0 calc(0.55em * var(--sa-sign));
	filter: blur(6px);
}

/* Words (mask): each word rises out of its own line box. */
.sa-ready[data-sa-effect="words-mask"] .sa-word {
	clip-path: inset(-0.1em -0.15em 0 -0.15em);
	padding-bottom: 0.15em;
	margin-bottom: -0.15em;
}

.sa-ready:not(.sa-in)[data-sa-effect="words-mask"] .sa-w {
	translate: 0 calc(108% * var(--sa-sign));
}

/* Badge above / description below the words. */
.sa-ready:not(.sa-in)[data-sa-effect="words"] .sa-part,
.sa-ready:not(.sa-in)[data-sa-effect="words-mask"] .sa-part {
	opacity: 0;
	translate: 0 calc(18px * var(--sa-sign));
}

/* Highlight bar (e.g. pxl heading highlight) sweeps in after the words. */
.sa-ready .sa-hl-sweep {
	position: relative;
	z-index: 0;
	background-color: transparent !important;
}

.sa-ready .sa-hl-sweep::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--sa-hl-bg);
	transform-origin: left center;
	transition: scale 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--sa-hl-delay, 0ms);
}

.sa-ready:not(.sa-in) .sa-hl-sweep::before {
	scale: 0 1;
}

/* ------------------------------------------------------------------
 * Automatic mode: an adopted element owns its motion. Theme (WOW) and
 * Elementor entrance animations inside it are switched off, whatever their
 * scripts set inline, so nothing stays hidden or animates twice.
 * ------------------------------------------------------------------ */

[data-sa-auto].elementor-invisible,
[data-sa-auto] .elementor-invisible,
[data-sa-auto].wow,
[data-sa-auto] .wow {
	visibility: visible !important;
}

[data-sa-auto].wow,
[data-sa-auto] .wow,
[data-sa-auto].animated,
[data-sa-auto] .animated {
	animation: none !important;
}

/* ------------------------------------------------------------------
 * Parallax & hover. Hover uses `transform` and includes the parallax
 * offset, so the two combine instead of overriding each other.
 * ------------------------------------------------------------------ */

.sitto-parallax-yes {
	transform: translate3d(0, var(--sa-py, 0px), 0);
	will-change: transform;
}

[class*="sitto-hover--"] {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.sitto-hover--lift:hover,
.sitto-hover--lift-zoom:hover {
	transform: translate3d(0, calc(var(--sa-py, 0px) - 6px), 0);
}

.sitto-hover--grow:hover {
	transform: translate3d(0, var(--sa-py, 0px), 0) scale(1.03);
}

.sitto-hover--zoom-img img,
.sitto-hover--lift-zoom img {
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.sitto-hover--zoom-img:hover img,
.sitto-hover--lift-zoom:hover img {
	transform: scale(1.06);
}

.sitto-hover--zoom-img .elementor-widget-image,
.sitto-hover--lift-zoom .elementor-widget-image,
.sitto-hover--zoom-img .pxl-image__item,
.sitto-hover--lift-zoom .pxl-image__item,
.elementor-widget-image.sitto-hover--zoom-img,
.elementor-widget-image.sitto-hover--lift-zoom {
	overflow: hidden;
}

.sitto-hover--tilt {
	transform: translate3d(0, var(--sa-py, 0px), 0) perspective(900px) rotateX(var(--sa-rx, 0deg)) rotateY(var(--sa-ry, 0deg));
	transition: transform 0.25s ease-out;
}

/* ------------------------------------------------------------------
 * Reduced motion: the script does nothing; make sure nothing moves.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.sitto-parallax-yes,
	[class*="sitto-hover--"],
	[class*="sitto-hover--"] img {
		transform: none !important;
	}
}