/* ==========================================================================
   StreetSmart Driving Academy — Scroll-driven hero
   --------------------------------------------------------------------------
   Layer 3 of 4. The Apple-style pinned canvas sequence.

   Structure (see template-parts/hero-sequence.php):

     .hero-sequence            the section ScrollTrigger pins (one viewport tall)
       .hero-stage             fills the pinned box, clips everything
         canvas.hero-canvas    the frame sequence, painted "cover"
         video.hero-video      fallback for reduced-motion / no-canvas
         .hero-scrim           gradients that keep copy legible on bright frames
         .hero-chapters        copy panels cross-faded across the scrub
         .hero-hud             corner instrumentation
         .hero-cue             scroll prompt, fades out once scrubbing starts

   GSAP writes opacity/transform on .hero-chapter and .hero-cue; everything
   else here is static so nothing fights the timeline.
   ========================================================================== */

.hero-sequence {
	position: relative;
	height: 100vh;
	height: 100svh;
	background: var(--ink-950);
	overflow: hidden;
	isolation: isolate;
}

/* ScrollTrigger's pin-spacer inherits the section background so the seam
   between hero and the section beneath it never flashes. */
.hero-sequence-pin-spacer { background: var(--ink-950); }

.hero-stage {
	position: absolute; inset: 0;
	overflow: hidden;
}

/* ---------- Frame surface ------------------------------------------------- */
.hero-canvas,
.hero-video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	/* The canvas is sized in device pixels by JS; these keep the CSS box
	   locked to the stage regardless of the backing-store size. */
}
.hero-canvas { z-index: 1; opacity: 0; transition: opacity 0.6s var(--e-out); }
.hero-canvas.is-ready { opacity: 1; }

/* Poster sits under the canvas so the first paint is never black, then is
   hidden once real frames are drawing. */
.hero-poster {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%; object-fit: cover;
	filter: blur(12px) saturate(1.05);
	transform: scale(1.06);
	transition: opacity 0.6s var(--e-out);
}
.hero-canvas.is-ready ~ .hero-poster { opacity: 0; }

.hero-video { z-index: 1; }

/* ---------- Scrim --------------------------------------------------------- */
/* Three stacked gradients: a top wash so the transparent header stays
   readable, a bottom/left wedge for the headline, and a soft vignette. The
   sequence ends on a very bright frame, so these have to be assertive. */
.hero-scrim {
	position: absolute; inset: 0; z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(7, 7, 10, 0.82) 0%, rgba(7, 7, 10, 0.18) 26%, transparent 46%),
		linear-gradient(0deg, rgba(7, 7, 10, 0.92) 0%, rgba(7, 7, 10, 0.55) 26%, transparent 62%),
		linear-gradient(90deg, rgba(7, 7, 10, 0.78) 0%, rgba(7, 7, 10, 0.2) 42%, transparent 68%),
		radial-gradient(130% 90% at 50% 50%, transparent 38%, rgba(7, 7, 10, 0.5) 100%);
}

/* Faint moving grain keeps large flat gradients from banding. */
.hero-grain {
	position: absolute; inset: -50%; z-index: 3;
	pointer-events: none; opacity: 0.045;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: grain-drift 8s steps(6) infinite;
}
@keyframes grain-drift {
	0%   { transform: translate(0, 0); }
	20%  { transform: translate(-6%, 3%); }
	40%  { transform: translate(4%, -5%); }
	60%  { transform: translate(-3%, -3%); }
	80%  { transform: translate(5%, 4%); }
	100% { transform: translate(0, 0); }
}

/* ---------- Copy chapters ------------------------------------------------- */
/* Centred rather than bottom-anchored: the chapters share one grid cell, so
   the cell is as tall as the tallest of them. Anchoring to the bottom would
   push a long headline up behind the header on short viewports. */
.hero-chapters {
	position: absolute; inset: 0; z-index: 4;
	display: flex; align-items: center;
	padding-top: calc(var(--header-h) + 56px);
	padding-bottom: clamp(104px, 15vh, 180px);
	pointer-events: none;
}
.hero-chapters .container { width: 100%; }

.hero-chapter {
	grid-area: 1 / 1;
	max-width: min(620px, 52vw);
	pointer-events: none;
}
/* Stacking the chapters in a single grid cell lets them cross-fade in place
   without absolute positioning guesswork. */
.hero-chapter-stack { display: grid; }
.hero-chapter > * { pointer-events: auto; }

.hero-chapter .eyebrow { color: var(--gold-400); margin-bottom: 18px; }
.hero-chapter h1,
.hero-chapter h2 {
	font-size: var(--fs-display);
	font-weight: 600;
	line-height: 1.0;
	letter-spacing: -0.04em;
	color: var(--t-hi);
	margin: 0 0 22px;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
	/* body sets break-word so long words never overflow a card; a display
	   headline must never be hyphen-less-broken mid-word, so opt out here. */
	overflow-wrap: normal;
	word-break: normal;
}
.hero-chapter p {
	max-width: 34ch;
	font-size: var(--fs-lead);
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 32px;
	text-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Only the first chapter is visible before GSAP takes over, so a no-JS or
   reduced-motion visitor still gets a complete hero. */
.hero-chapter { opacity: 0; }
.hero-chapter:first-child { opacity: 1; }
.no-js .hero-chapter,
html.reduced-motion .hero-chapter { opacity: 0; }
.no-js .hero-chapter:first-child,
html.reduced-motion .hero-chapter:first-child { opacity: 1; }

/* ---------- Corner HUD ---------------------------------------------------- */
.hero-hud {
	position: absolute; inset: auto 0 0 0; z-index: 5;
	/* Extra right padding keeps the frame counter clear of the floating
	   back-to-top button, which is on screen for the whole pinned scroll. */
	padding: 0 calc(var(--gutter) + 58px) clamp(24px, 4vh, 40px) var(--gutter);
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px;
	pointer-events: none;
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}
.hero-hud-meta { display: flex; flex-direction: column; gap: 6px; }
.hero-hud-meta span { display: flex; align-items: center; gap: 8px; }
.hero-hud-meta span::before {
	content: ""; width: 14px; height: 1px; background: var(--gold-500);
}

/* Segmented progress read-out driven by --progress (0..1) */
.hero-hud-progress { display: flex; align-items: center; gap: 12px; }
.hero-hud-track {
	position: relative;
	width: clamp(80px, 14vw, 190px); height: 2px;
	background: rgba(255, 255, 255, 0.18);
	border-radius: var(--r-pill);
	overflow: hidden;
}
.hero-hud-track::after {
	content: ""; position: absolute; inset: 0;
	transform: scaleX(var(--progress, 0)); transform-origin: 0 50%;
	background: var(--gold-500);
}
.hero-hud-count { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.72); }

/* ---------- Scroll cue ---------------------------------------------------- */
.hero-cue {
	position: absolute; left: 50%; bottom: clamp(24px, 4vh, 40px); z-index: 6;
	transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	pointer-events: none;
	font-size: 0.6875rem; font-weight: 600;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}
.hero-cue-rail {
	position: relative;
	width: 1px; height: 46px;
	background: rgba(255, 255, 255, 0.2);
	overflow: hidden;
}
.hero-cue-rail::after {
	content: ""; position: absolute; left: 0; top: 0;
	width: 100%; height: 40%;
	background: var(--gold-400);
	animation: cue-run 2.1s var(--e-in-out) infinite;
}
@keyframes cue-run {
	0%   { transform: translateY(-100%); }
	60%  { transform: translateY(250%); }
	100% { transform: translateY(250%); }
}

/* ---------- Static fallback ----------------------------------------------- */
/* Applied by JS when the sequence cannot run (reduced motion, no GSAP, a
   device that fails the capability probe). The hero becomes an ordinary
   full-height banner using the looping video or the poster still. */
.hero-sequence.is-static { height: clamp(620px, 92vh, 900px); }
.hero-sequence.is-static .hero-canvas,
.hero-sequence.is-static .hero-hud,
.hero-sequence.is-static .hero-cue { display: none; }
.hero-sequence.is-static .hero-poster { filter: none; transform: none; opacity: 1; }
.hero-sequence.is-static .hero-chapter { opacity: 0; position: absolute; }
.hero-sequence.is-static .hero-chapter:first-child { opacity: 1; position: relative; }
.hero-sequence.is-static .hero-chapters { padding-bottom: clamp(64px, 9vh, 110px); }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 900px) {
	.hero-chapter { max-width: none; }
	.hero-chapter h1, .hero-chapter h2 { font-size: clamp(2.5rem, 11vw, 4rem); }
	.hero-chapters { padding-bottom: clamp(104px, 18vh, 170px); }
	.hero-hud-meta { display: none; }
	.hero-hud { justify-content: flex-end; }
}
@media (max-width: 560px) {
	.hero-actions { width: 100%; }
	.hero-actions .btn { flex: 1 1 100%; }
	.hero-cue { display: none; }
}

/* Landscape phones have too little height for the pinned experience to read
   well, so the copy tightens up. */
@media (max-height: 520px) and (orientation: landscape) {
	.hero-chapter p { display: none; }
	.hero-chapters { padding-bottom: 64px; }
	.hero-hud { display: none; }
}