/* Purpose: PedalBox Series hero scene — the arrival and the Pitch as one shot
 * (template-parts/series/hero.php + assets/js/series-hero.js). Loaded only when
 * uploads/series/hero/manifest.json exists; the video hero in series.css stays
 * the fallback.
 *
 * Default = static (no JS / reduced motion): a full-viewport poster hero, the
 * Pitch as a block below. .is-live = sticky stage over a JS-sized runway with
 * every layer stacked in it. */

.series-hero.series-hero--scene {
	display: block;
	min-height: 0;
	padding: 0;
	background: var(--color-bg);
}
.series-hero--scene .series-hero__runway { position: relative; }
.series-hero--scene .series-hero__stage {
	--hx: 50%;
	--hdim: 1;
	--line-y: 82vh;
	--line-l: 8vw;
	--line-r: 8vw;
	--line-shift: 0px;
	position: relative;
	overflow: hidden;
}

/* Soft red glow under the product's base (no hard line). */
.series-hero__horizon {
	position: absolute;
	inset: 0;
	height: 100vh;
	height: 100svh;
	z-index: 0;
	pointer-events: none;
	opacity: calc(0.4 + 0.6 * var(--hdim));
	background:
		radial-gradient(420px 150px at var(--hx) calc(var(--line-y) + var(--line-shift)), rgba(255, 0, 18, 0.34) 0%, rgba(255, 0, 18, 0.1) 45%, rgba(255, 0, 18, 0) 75%),
		radial-gradient(70% 55% at var(--hx) calc(var(--line-y) + var(--line-shift) - 30vh), rgba(120, 8, 16, 0.18) 0%, rgba(0, 0, 0, 0) 70%);
}
/* Long-exposure light trails behind the product during the Pitch. */
.series-hero--scene .series-hero__streaks {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}
.series-hero--scene.is-live .series-hero__streaks {
	display: block;
	mix-blend-mode: screen;
	/* Kept out from under the Pitch copy on the left. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.15) 38%, #000 62%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.15) 38%, #000 62%);
}
@media (max-width: 1023px) and (max-aspect-ratio: 5/4) {
	.series-hero--scene.is-live .series-hero__streaks {
		-webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.15) 62%, transparent 72%);
		mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.15) 62%, transparent 72%);
	}
}

/* Masthead: the H1, huge, behind the product. */
.series-hero__mast {
	position: absolute;
	left: 50%;
	top: calc(var(--hero-bars, 0px) + 7vh);
	top: calc(var(--hero-bars, 0px) + 7svh);
	z-index: 1;
	margin: 0;
	transform: translate3d(-50%, 0, 0);
	transform-origin: 50% 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	/* Width- and height-aware so short windows keep the title and product apart. */
	font-size: clamp(2.5rem, min(11.2vw, 17vh), 13rem);
	line-height: 0.92;
	letter-spacing: 0;
	white-space: nowrap;
	text-align: center;
	color: var(--color-text-strong);
	pointer-events: none;
}
.series-hero__mast .accent { color: var(--color-primary); }

/* Static product poster (hidden once the canvas takes over). */
.series-hero--scene .series-hero__poster {
	position: absolute;
	left: 50%;
	top: auto;
	right: auto;
	bottom: 10vh;
	bottom: 10svh;
	z-index: 2;
	width: auto;
	height: 64vh;
	height: 64svh;
	transform: translateX(-50%);
	-webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
}
.series-hero--scene .series-hero__canvas {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
}

/* The unit's LED breathes once the pair has landed. */
.series-hero--scene .series-hero__led {
	position: absolute;
	z-index: 3;
	width: calc(260px * var(--hero-k, 0.4));
	height: calc(260px * var(--hero-k, 0.4));
	border-radius: var(--radius-full);
	background: radial-gradient(circle, rgba(255, 46, 36, 0.75) 0%, rgba(255, 46, 36, 0.24) 28%, rgba(255, 46, 36, 0) 68%);
	mix-blend-mode: screen;
	opacity: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.series-hero--scene.is-landed .series-hero__led {
	animation: series-hero-led 2.8s ease-in-out 0.3s infinite;
}
@keyframes series-hero-led {
	0%,
	100% { opacity: calc(0.2 * var(--led-alpha, 1)); }
	50% { opacity: calc(0.9 * var(--led-alpha, 1)); }
}

/* Bottom bar: eyebrow + sub on the left, actions on the right. */
.series-hero__intro {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	min-height: 100svh;
	padding-bottom: clamp(var(--space-8), 6vh, var(--space-16));
	pointer-events: none;
}
.series-hero__intro-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--space-8);
	pointer-events: auto;
}
.series-hero__intro .series-eyebrow { margin: 0 0 var(--space-3); }
.series-hero--scene .series-hero__sub {
	max-width: 36ch;
	margin: 0;
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}
.series-hero--scene .series-hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }

/* The Pitch. Static: a normal block below the hero. */
.series-hero__pitch {
	position: relative;
	z-index: 4;
	padding-block: var(--space-24);
}
.series-hero__pitch-inner { display: grid; gap: var(--space-6); }
.series-hero__pitch .series-eyebrow { margin: 0; }
.series-hero__pitch-heading {
	max-width: 15ch;
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: clamp(2.5rem, 4.6vw, 4.75rem);
	line-height: 1.02;
	letter-spacing: 0;
	color: var(--color-text-strong);
}
.series-hero__pitch-body {
	max-width: 38ch;
	margin: 0;
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}
.series-hero__word { display: inline-block; will-change: transform, opacity; }

/* Intro: the bar waits for the arrival, then rises. */
.series-hero--scene.is-seq-intro .series-hero__intro-row > * {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.series-hero--scene.is-seq-intro.is-seq-in .series-hero__intro-row > * { opacity: 1; transform: none; }
.series-hero--scene.is-seq-in .series-hero__intro-row > :nth-child(2) { transition-delay: 0.15s; }
.series-hero--scene.is-seq-intro .series-hero__mast { opacity: 0; transition: opacity 1.2s ease 0.2s; }
.series-hero--scene.is-seq-intro.is-seq-in .series-hero__mast { opacity: 1; }
/* Once landed, scroll drives the masthead directly (a CSS fade would trail it). */
.series-hero--scene.is-landed .series-hero__mast { transition: none; }

/* ---------- live: one sticky stage ---------- */
.series-hero--scene.is-live .series-hero__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
}
.series-hero--scene.is-live .series-hero__poster { display: none; }
.series-hero--scene.is-live .series-hero__canvas { display: block; }
.series-hero--scene.is-live .series-hero__intro {
	position: absolute;
	inset: 0;
	min-height: 0;
}
.series-hero--scene.is-live .series-hero__pitch {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.series-hero--scene.is-live .series-hero__pitch-inner { width: 100%; }
.series-hero--scene.is-live .series-hero__pitch-inner > * { max-width: min(46%, 40rem); }

/* ---------- phones / tablets ---------- */
@media (max-width: 1023px) and (max-aspect-ratio: 5/4) {
	.series-hero__mast {
		top: calc(var(--hero-bars, 0px) + 5vh);
		top: calc(var(--hero-bars, 0px) + 5svh);
		/* One line, scaled to the phone's width. */
		font-size: clamp(1.6rem, 12.8vw, 5rem); /* 14.6vw → 12.8vw: a touch smaller on phones (user, 2026-09-16) */
		white-space: nowrap;
	}
	.series-hero--scene .series-hero__poster { bottom: 38svh; height: 40svh; }
	.series-hero__intro-row { grid-template-columns: 1fr; gap: var(--space-5); }
	.series-hero--scene .series-hero__actions { justify-content: stretch; }
	.series-hero--scene .series-hero__actions { flex-wrap: nowrap; gap: var(--space-2); }
	/* One-line labels: smaller, tighter type. */
	.series-hero--scene .series-hero__actions .btn {
		flex: 1 1 0;
		justify-content: center;
		padding-inline: var(--space-3);
		font-size: 0.625rem;
		letter-spacing: 0.1em;
		white-space: nowrap;
	}
	.series-hero--scene.is-live .series-hero__pitch { align-items: flex-end; padding-bottom: 9svh; }
	.series-hero--scene.is-live .series-hero__pitch-inner > * { max-width: none; }
	.series-hero__pitch-heading { font-size: clamp(2rem, 8.6vw, 3rem); }
	.series-hero__pitch-body { font-size: var(--text-base); }
}

/* The next section picks the shot straight up: no top padding band between the
 * hero scene's scroll-out and its own stage. */
.series-hero--scene + .series-inside { padding-top: 0; }

/* Short landscape windows: little height under the bars, so the masthead scales
 * with height and sits behind the product instead of crowding it. */
.series-hero--scene.is-short .series-hero__mast {
	top: calc(var(--hero-bars, 0px) + 3vh);
	font-size: clamp(2.25rem, 13vh, 7rem);
}