/* ==========================================================================
   Motion layer.

   Every initial (hidden) state is scoped to html.sb-motion, which site.js
   adds only when JavaScript runs, the visitor has not asked for reduced
   motion, and the page is not open in the Elementor editor. Without it, all
   content is simply visible. Animations run once; nothing loops.
   ========================================================================== */

/* ---------- Scroll progress (thin gold line under the sticky header) ---------- */

.sb-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--sb-accent);
	transform: scaleX(var(--sb-progress, 0));
	transform-origin: left center;
	pointer-events: none;
}

/* ---------- Hero ---------- */

/* Headline: word-by-word rise. */
.sb-motion .sb-hero h1 .sb-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.45em);
	transition: opacity 0.6s var(--sb-ease), transform 0.6s var(--sb-ease);
	transition-delay: calc(var(--i, 0) * 70ms + 120ms);
}

.sb-motion .sb-hero .is-visible h1 .sb-word {
	opacity: 1;
	transform: none;
}

/* Photo: upward wipe, then the gold frame settles into place. */
.sb-motion .sb-hero .sb-media--hero img {
	clip-path: inset(100% 0 0 0 round var(--sb-radius-lg));
	transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}

.sb-motion .sb-hero .is-visible .sb-media--hero img {
	clip-path: inset(0 0 0 0 round var(--sb-radius-lg));
}

.sb-motion .sb-reveal .sb-media--hero::before,
.sb-motion .sb-reveal .sb-media--tall::before,
.sb-motion .sb-reveal .sb-media--portrait::before {
	opacity: 0;
	translate: -18px -18px;
	transition: opacity 0.7s var(--sb-ease) 0.7s, translate 0.9s var(--sb-ease) 0.7s;
}

.sb-motion .sb-reveal.is-visible .sb-media--hero::before,
.sb-motion .sb-reveal.is-visible .sb-media--tall::before,
.sb-motion .sb-reveal.is-visible .sb-media--portrait::before {
	opacity: 1;
	translate: var(--sb-parallax-x, 0) var(--sb-parallax-y, 0);
}

/* After the entrance, parallax updates should follow the scroll directly. */
.sb-motion .sb-hero .sb-media--hero.sb-settled::before {
	transition: none;
}

/* Badge slides in last. */
.sb-motion .sb-hero .sb-hero__badge {
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 0.6s var(--sb-ease) 1s, transform 0.6s var(--sb-ease) 1s;
}

.sb-motion .sb-hero .is-visible .sb-hero__badge {
	opacity: 1;
	transform: none;
}

/* Trust items one after another. */
.sb-motion .sb-reveal ul.sb-trust li {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.45s var(--sb-ease), transform 0.45s var(--sb-ease);
	transition-delay: calc(var(--i, 0) * 90ms + 650ms);
}

.sb-motion .sb-reveal.is-visible ul.sb-trust li {
	opacity: 1;
	transform: none;
}

/* ---------- Section labels: gold rule draws in ---------- */

.sb-motion .sb-reveal .sb-eyebrow .elementor-heading-title::before {
	width: 0;
	transition: width 0.6s var(--sb-ease) 0.2s;
}

.sb-motion .sb-reveal.is-visible .sb-eyebrow .elementor-heading-title::before {
	width: 28px;
}

/* ---------- Stats: value rises as it counts ---------- */

.sb-motion .sb-stat-card .sb-stat__value .elementor-heading-title {
	display: inline-block;
	transform: translateY(10px);
	transition: transform 0.7s var(--sb-ease) 0.1s;
}

.sb-motion .sb-stat-card.is-visible .sb-stat__value .elementor-heading-title {
	transform: none;
}

/* ---------- Service cards: photo eases from a slight zoom ---------- */

.sb-motion .sb-service-card.sb-reveal .elementor-image-box-img img {
	transform: scale(1.1);
	transition: transform 1.2s var(--sb-ease);
}

.sb-motion .sb-service-card.sb-reveal.is-visible .elementor-image-box-img img {
	transform: scale(1);
	transition: transform 0.45s var(--sb-ease);
}

.sb-motion .sb-service-card.sb-reveal.is-visible .elementor-image-box-wrapper:hover img {
	transform: scale(1.03);
}

/* ---------- Checklists: items arrive one by one ---------- */

.sb-motion .sb-reveal .sb-checklist li {
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity 0.4s var(--sb-ease), transform 0.4s var(--sb-ease);
	transition-delay: calc(var(--i, 0) * 80ms + 250ms);
}

.sb-motion .sb-reveal.is-visible .sb-checklist li {
	opacity: 1;
	transform: none;
}

/* ---------- Offers: gold bar sweeps across ---------- */

.sb-motion .sb-offer.sb-reveal::before {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.9s var(--sb-ease) 0.25s;
}

.sb-motion .sb-offer.sb-reveal.is-visible::before {
	transform: scaleX(1);
}

/* ---------- Reviews: quote mark settles ---------- */

.sb-motion .sb-review.sb-reveal::before {
	opacity: 0;
	transform: translateY(-10px) scale(0.8);
	transition: opacity 0.5s var(--sb-ease) 0.3s, transform 0.5s var(--sb-ease) 0.3s;
}

.sb-motion .sb-review.sb-reveal.is-visible::before {
	opacity: 1;
	transform: none;
}

/* ---------- Closing band: one light sweep ---------- */

.sb-cta-band {
	position: relative;
	overflow: hidden;
}

.sb-motion .sb-cta-band::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -40%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgb(255 255 255 / 7%), transparent);
	transform: translateX(0);
	pointer-events: none;
}

.sb-motion .sb-cta-band.sb-swept::after {
	transform: translateX(360%);
	transition: transform 1.6s cubic-bezier(0.45, 0, 0.25, 1);
}