/*
 * Motion layer.
 *
 * Reproduces every animation the Elementor stack provided, without
 * animate.css, hover.css, GSAP, slick, Swiper or vegas. Durations and
 * easings match Elementor's defaults so the rebuild feels identical.
 */

/* ------------------------------------------------------------------ *
 * Keyframes
 * ------------------------------------------------------------------ */

@keyframes jbw-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes jbw-fade-in-up {
	from { opacity: 0; transform: translate3d(0, 100%, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes jbw-fade-in-down {
	from { opacity: 0; transform: translate3d(0, -100%, 0); }
	to   { opacity: 1; transform: none; }
}

/* animate.css pulse, as used by the hero CTA. */
@keyframes jbw-pulse {
	from { transform: scale3d(1, 1, 1); }
	50%  { transform: scale3d(1.05, 1.05, 1.05); }
	to   { transform: scale3d(1, 1, 1); }
}

/* ------------------------------------------------------------------ *
 * Scroll reveals
 *
 * Elementor's entrance animations: 1.25s default, 2s slow, 800ms fast,
 * with a per-element delay. `animation_mobile: none` was set on every one
 * of them, so reveals are disabled under 768px.
 * ------------------------------------------------------------------ */

@media (min-width: 768px) {
	[data-reveal] {
		opacity: 0;
		will-change: opacity, transform;
	}

	[data-reveal].is-revealed {
		animation-duration: 1.25s;
		animation-delay: var(--jbw-reveal-delay, 0ms);
		animation-fill-mode: both;
		animation-timing-function: ease;
	}

	[data-reveal-speed="slow"].is-revealed { animation-duration: 2s; }
	[data-reveal-speed="fast"].is-revealed { animation-duration: 800ms; }

	[data-reveal="fade"].is-revealed      { animation-name: jbw-fade-in; }
	[data-reveal="fade-up"].is-revealed   { animation-name: jbw-fade-in-up; }
	[data-reveal="fade-down"].is-revealed { animation-name: jbw-fade-in-down; }

	/*
	 * pulse animates transform only, so it cannot fade itself in. Elementor
	 * held these elements with visibility instead; same here.
	 */
	[data-reveal="pulse"] {
		opacity: 1;
		visibility: hidden;
	}

	[data-reveal="pulse"].is-revealed {
		visibility: visible;
		animation-name: jbw-pulse;
	}
}

/* ------------------------------------------------------------------ *
 * Hover animations (hover.css equivalents)
 * ------------------------------------------------------------------ */

/*
 * No display here. These classes sit on elements that are already
 * inline-flex or grid, and because this file loads after components.css
 * an `inline-block` here overrode .jbw-btn and knocked its icon onto a
 * second line.
 */
.jbw-hover-float,
.jbw-hover-skew,
.jbw-hover-rotate,
.jbw-hover-grow {
	transform: perspective(1px) translateZ(0);
	transition: transform var(--jbw-dur-fast) ease-out;
	backface-visibility: hidden;
}

.jbw-hover-float:hover,
.jbw-hover-float:focus-visible { transform: translateY(-8px); }

.jbw-hover-skew { transform-origin: 0 100%; }
.jbw-hover-skew:hover,
.jbw-hover-skew:focus-visible { transform: skew(-10deg); }

.jbw-hover-rotate:hover,
.jbw-hover-rotate:focus-visible { transform: rotate(4deg); }

.jbw-hover-grow:hover,
.jbw-hover-grow:focus-visible { transform: scale(1.1); }

/* ------------------------------------------------------------------ *
 * Ken Burns background slideshow
 *
 * Elementor: layers stack, the active one fades in over 650ms and holds
 * for 8s. Zoom direction "out" starts at scale(1.3) and settles to 1.
 * ------------------------------------------------------------------ */

.jbw-slideshow {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.jbw-slideshow__layer {
	position: absolute;
	inset: 0;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transform: scale(1.3);
	transition:
		opacity var(--jbw-slideshow-fade) linear,
		transform 20s linear;
	will-change: opacity, transform;
}

.jbw-slideshow__layer.is-active {
	opacity: 1;
	transform: scale(1);
}

/* ------------------------------------------------------------------ *
 * Reduced motion
 *
 * Everything above degrades to its resting state. Nothing disappears:
 * reveals show, slideshows hold their first frame, FX reset.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	[data-reveal],
	[data-reveal].is-revealed {
		opacity: 1 !important;
		animation: none !important;
		transform: none !important;
	}

	.jbw-slideshow__layer {
		transition: opacity 200ms linear;
		transform: none;
	}

	.jbw-slideshow__layer.is-active {
		transform: none;
	}

	.jbw-hover-float,
	.jbw-hover-skew,
	.jbw-hover-rotate,
	.jbw-hover-grow,
	.jbw-hover-float:hover,
	.jbw-hover-skew:hover,
	.jbw-hover-rotate:hover,
	.jbw-hover-grow:hover {
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}