/* Systical — Scroll Video Reveal */

.sys-sv {
	--sys-accent: #9afd0d;
	--slot-w: 168px;
	--slot-h: 0.86em;
	position: relative;
	z-index: 1;
	/* flow-root establishes a BFC so the track's negative margin below cannot
	   drag this element's background box up over the previous section — only
	   the video moves, the dark panel stays where it belongs. */
	display: flow-root;
	background-color: #070707;
}

/* Scroll distance for the grow phase. The negative margin lifts the video so
   it already peeks above this section while the hero is still on screen; it
   overflows upward rather than moving the section's background. */
.sys-sv__track {
	/* Driven by custom properties rather than the controls writing height and
	   margin directly. Elementor's generated selectors are far more specific
	   than a plain class, so direct values would out-rank the plain-layout
	   overrides below and leave thousands of pixels of dead scroll on mobile. */
	height: var(--track-h, 260vh);
	margin-top: var(--track-pull, -32vh);
	pointer-events: none;
}

/* Sticky stage: holds the video centred in the viewport for the whole grow
   phase, so it expands evenly in every direction instead of being anchored to
   one edge and unfolding downwards. */
.sys-sv__stage {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

/* ---------- the video frame ---------- */

.sys-sv__frame {
	position: relative;
	width: 70vw;
	margin: 0;
	overflow: hidden;
	border-radius: 22px;
	background: #0d0d0d;
	z-index: 2;
	pointer-events: none;
	/* No transition: size is written every scroll frame, so a transition
	   would fight the scrub and lag behind the wheel. */
	will-change: width, height;
	backface-visibility: hidden;
}

/* Phase 2 only. The frame leaves the sticky stage and is placed in viewport
   coordinates so it can travel into the heading's gap. It is switched at the
   exact moment its sticky rect equals its fixed rect, so there is no jump. */
.sys-sv__frame.is-pinned {
	position: fixed;
	top: 0;
	left: 0;
	will-change: transform, width, height;
}

/* ---------- plain layout ----------
   Used below the breakpoint, for reduced-motion, and if the effect is turned
   off: hero, then an ordinary video, then the heading. Nothing pinned,
   nothing resized. Written without :has() so older mobile Safari is covered. */

.sys-sv--simple .sys-sv__track {
	height: auto;
	margin-top: 0;
}

/* Belt and braces: also zero the properties themselves, so nothing can leak
   through if a control is later pointed straight at a property again. */
.sys-sv--simple {
	--track-h: auto;
	--track-pull: 0px;
	--outro-pull: 0px;
	--settle-h: 0px;
}

.sys-sv--simple .sys-sv__stage {
	position: static;
	display: block;
	height: auto;
	padding: 0 18px 56px;
}

.sys-sv--simple .sys-sv__frame,
.sys-sv__frame.is-static {
	position: relative;
	width: 100%;
	height: auto;
	max-width: 1200px;
	margin: 0 auto;
	transform: none;
	border-radius: 14px;
}

.sys-sv--simple .sys-sv__video,
.sys-sv__frame.is-static .sys-sv__video {
	height: auto;
	aspect-ratio: 16 / 9;
}

/* No video is going to nest here, so the gap must not leave a hole in the
   sentence. */
.sys-sv--simple .sys-sv__slot {
	display: none;
}

.sys-sv--simple .sys-sv__outro {
	margin-top: 0;
	transform: none !important;
}

.sys-sv--simple .sys-sv__settle {
	height: 0;
}

.sys-sv__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #0d0d0d;
}

.sys-sv__frame.is-static .sys-sv__video {
	height: auto;
	aspect-ratio: 16 / 9;
}

.sys-sv__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 200px;
	color: #6a6a6a;
	font-family: Inter, system-ui, sans-serif;
	font-size: 15px;
	background: #131313;
}

/* ---------- the heading the video lands in ---------- */

/* Bounds the heading's parked transform.
   The heading starts pushed down by --heading-rise and travels up as the
   video shrinks. That is a transform, so it takes no layout space and would
   otherwise render straight over the next section. Clipping here keeps it
   inside this section without reintroducing an empty spacer below.
   Deliberately NOT on .sys-sv itself — an overflow ancestor would break the
   sticky video stage. */
.sys-sv__outro-clip {
	position: relative;
	z-index: 3;
	overflow: hidden;
}

.sys-sv__outro {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: 40px 64px;
	align-items: start;
	max-width: 1400px;
	/* The `margin` shorthand must come BEFORE the margin-top below — declared
	   the other way round it silently resets the pull back to zero. */
	margin: 0 auto;
	/* Climbs back over the scroll space the pinned video leaves behind,
	   otherwise an empty stage-height band sits above the heading. */
	margin-top: var(--outro-pull, -60vh);
	padding: 120px 40px;
}

/* Scroll room after the heading, so the landing point is always reachable
   even when this is the last section on the page. */
.sys-sv__settle {
	height: var(--settle-h, 34vh);
	pointer-events: none;
}

.sys-sv__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	padding: 8px 16px;
	border-radius: 40px;
	background: #1a1a1a;
	color: #fff;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
}

.sys-sv__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sys-accent);
}

.sys-sv__title {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: clamp(37.5px, 5.2vw, 75px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #fff;
}

/* Inline gap the video settles into. Its width is driven by JS during the
   scrub — it opens as the video arrives and closes as the video leaves, so
   the heading closes ranks when nothing is nested in it. */
.sys-sv__slot {
	display: inline-block;
	width: 0;
	height: var(--slot-h, 0.86em);
	vertical-align: middle;
	border-radius: 12px;
	overflow: hidden;
}

.sys-sv__aside {
	padding-top: 10px;
}

.sys-sv__aside p {
	margin: 0 0 30px;
	font-family: Inter, system-ui, sans-serif;
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.65;
	color: #929292;
}

.sys-sv__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 34px;
	border: 1px solid #3a3a3a;
	border-radius: 60px;
	color: #fff;
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color 240ms ease,
		border-color 240ms ease,
		color 240ms ease;
}

.sys-sv__button:hover {
	background: var(--sys-accent);
	border-color: var(--sys-accent);
	color: #070707;
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.sys-sv__outro {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 90px 28px;
	}

	.sys-sv {
		--slot-w: 120px;
	}
}

@media (max-width: 767px) {
	.sys-sv__track {
		height: 180vh;
	}

	/* Selector matches the plain-layout rule above it, which is what actually
	   applies at this width — a bare .sys-sv__stage would lose to it. */
	.sys-sv--simple .sys-sv__stage {
		padding: 0 18px 28px;
	}

	/* Kept in step with the widget's mobile_default for Heading Padding, which
	   is what wins on the front end; this is the fallback if that is cleared. */
	.sys-sv__outro {
		padding: 44px 20px 56px;
	}

	.sys-sv {
		--slot-w: 84px;
	}

	.sys-sv__slot {
		border-radius: 8px;
	}
}

/* Scrubbing a fixed element is motion-heavy; opt out entirely. */
@media (prefers-reduced-motion: reduce) {
	.sys-sv__track {
		height: auto;
	}

	.sys-sv__stage {
		position: static;
		height: auto;
		padding: 80px 0;
	}

	.sys-sv__frame {
		position: relative !important;
		width: min(70vw, 1200px) !important;
		height: auto !important;
		margin: 0 auto !important;
	}

	.sys-sv__video {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.sys-sv__settle {
		height: 0;
	}
}