/**
 * 500 SPPA · Sticky Stages — structural styles only.
 * All colours, sizes and spacing are driven by Elementor controls (scoped to {{WRAPPER}}).
 * Mirrors the original demo: sticky 1440x760 frame, text above illustrations,
 * compact/large/full framings that can spill behind the text, instant opacity swap.
 */

.sppa-sticky {
	position: relative;
}

/* Tall track: total height = number of stages * scroll-per-stage (set by JS). */
.sppa-sticky__section {
	position: relative;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh; /* small viewport = stable on mobile toolbar show/hide */
}

/* The element that gets pinned to the viewport while scrolling.
   Stays in normal flow (position: relative) so GSAP/ScrollTrigger can manage
   pinning with its standard pinSpacing:true recipe — it inserts its own
   spacer and restores layout correctly on unpin, even if a refresh lands
   mid-pin (e.g. triggered by another section's images finishing loading).
   svh (small viewport height) keeps the pinned box the SAME size whether the
   mobile address bar is shown or hidden, so it never gets clipped and the pin
   doesn't need to re-measure. Falls back to vh on older browsers. */
.sppa-sticky__content {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #141f0f; /* fallback; overridden by control */
}

/* Locked to the Figma frame proportion, 1440 x 760. */
.sppa-sticky__frame {
	position: relative;
	width: min(96vw, var(--sppa-frame-w, 1440px));
	aspect-ratio: 1440 / 760;
	/* --sppa-frame-h (optional): sets an exact height and overrides the ratio.
	   When unset, the value is invalid and height falls back to auto (ratio governs). */
	height: var(--sppa-frame-h);
	max-height: var(--sppa-frame-maxh, 92vh);
	overflow: hidden;
}

/* Every illustration lives in this layer, BELOW the text. */
.sppa-sticky__stages {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sppa-sticky__stage {
	position: absolute;
	display: flex;
	opacity: 0;
	will-change: opacity;
	transition: opacity 0.18s ease;
}

.sppa-sticky__stage picture {
	display: contents;
}

.sppa-sticky__stage img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Compact — early stages, small, anchored to the bottom, clear of the text. */
.sppa-sticky__stage.is-compact {
	width: 34%;
	height: 56%;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	align-items: flex-end;
	justify-content: center;
}

/* Large — spills upward behind the title/subtitle. */
.sppa-sticky__stage.is-large {
	width: 66%;
	height: 86%;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	align-items: flex-end;
	justify-content: center;
}

/* Full-bleed — fills the whole frame, text floats on top. */
.sppa-sticky__stage.is-full {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	align-items: center;
	justify-content: center;
}

.sppa-sticky__stage.is-full img {
	width: 100%;
	height: 100%;
}

/* Text block — above the illustrations. */
.sppa-sticky__text {
	position: absolute;
	top: 22%;
	left: 0;
	width: 100%;
	z-index: 3;
	text-align: center;
	padding: 0 8%;
	pointer-events: none;
}

.sppa-sticky__title {
	font-size: clamp(20px, 2.7vw, 40px);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 14px 0;
	color: #f4f1ea;
}

.sppa-sticky__subtitle {
	font-size: clamp(11px, 1vw, 14px);
	color: rgba(244, 241, 234, 0.62);
	line-height: 1.5;
	margin: 0 auto;
	max-width: 640px;
}

/* Progress dots — absolute inside the pinned content, so they read as fixed
   while pinned and never collide between instances. */
.sppa-sticky__progress {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 10;
}

.sppa-sticky__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(244, 241, 234, 0.22);
	transition: background 0.15s ease, transform 0.15s ease;
}

.sppa-sticky__dot.is-active {
	background: #e7c94c;
	transform: scale(1.4);
}

/* ---------- Mobile: portrait frame, text on top, larger bottom illustration ---------- */
@media (max-width: 767px) {
	.sppa-sticky__frame {
		aspect-ratio: auto;
		width: 96vw;
		height: var(--sppa-frame-h, 92vh);
		height: var(--sppa-frame-h, 92svh);
		max-height: none;
	}

	.sppa-sticky__text {
		padding: 0 6%;
	}

	.sppa-sticky__title {
		font-size: clamp(28px, 8vw, 40px);
	}

	.sppa-sticky__subtitle {
		font-size: 15px;
	}

	/* Bigger framings so the illustration reads well in a portrait frame.
	   Per-stage size/position controls (if set) override these. */
	.sppa-sticky__stage.is-compact {
		width: 62%;
		height: 50%;
	}

	.sppa-sticky__stage.is-large {
		width: 92%;
		height: 70%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sppa-sticky__stage {
		transition: none;
	}
}