/* Scroll Story Video — Apple-style scroll-driven hero
 * Scoped to .ssv-root.
 */

.ssv-root {
	position: relative;
	width: 100%;
	height: var(--ssv-height, 400vh);
	background: #000;
}

/* The pin is always position: fixed so it ignores ancestor overflow: hidden
 * (Rey wraps everything in .site-wrapper { overflow: hidden }, which would
 * otherwise clip both sticky and any negative-margin escape trick).
 * JS sets left/width/transform every frame to emulate sticky behavior. */
.ssv-pin {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	will-change: transform;
	/* Hidden until JS positions it, to avoid a flash of full-screen video
	 * during initial page load. */
	visibility: hidden;
}

.ssv-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #000;
	pointer-events: none;
	will-change: transform;
}

.ssv-overlay {
	position: absolute;
	inset: 0;
	background: transparent;
	pointer-events: none;
}

.ssv-overlay--gradient::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0,0,0,0) 40%,
		rgba(0,0,0,0.45) 100%
	);
}

/* Stage holds all slides on top of each other */
.ssv-stage {
	position: absolute;
	inset: 0;
	display: block;
	box-sizing: border-box;
	padding: 32px;
	pointer-events: none;
}

.ssv-slide {
	position: absolute;
	inset: 0;
	display: flex;
	box-sizing: border-box;
	padding: 8vh 32px;
	color: #fff;
	opacity: 0;
	transform: translate3d(0, 40px, 0);
	transition: none; /* JS drives motion via transforms */
	will-change: opacity, transform, filter;
}

/* Vertical position */
.ssv-v-top    { align-items: flex-start; }
.ssv-v-middle { align-items: center; }
.ssv-v-bottom { align-items: flex-end; }

/* Horizontal position */
.ssv-a-left   { justify-content: flex-start; text-align: left; }
.ssv-a-center { justify-content: center;     text-align: center; }
.ssv-a-right  { justify-content: flex-end;   text-align: right; }

.ssv-slide-inner {
	max-width: 900px;
	width: 100%;
}

/* Default typographic scale — Elementor controls override these */
.ssv-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.85;
	margin-bottom: 18px;
}

.ssv-heading {
	font-size: clamp(34px, 6vw, 88px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
}

.ssv-sub {
	font-size: clamp(16px, 1.6vw, 22px);
	font-weight: 400;
	line-height: 1.45;
	opacity: 0.92;
	margin: 0;
}

/* Reduced motion: don't fight the OS — just show the first slide */
@media (prefers-reduced-motion: reduce) {
	.ssv-slide { transition: opacity 0.2s ease; }
	.ssv-slide[data-index="0"] { opacity: 1; transform: none; }
}