/**
 * Acron Scroll Hero — v1.2.13
 *
 * All motion is driven by custom properties written on .esd-hero by the JS.
 * With JS off (or on mobile / reduced motion) .esd-hero--static renders the
 * final slide as a plain hero.
 */

.esd-hero {
	--esd-hero-scroll: 610;
	--esd-hero-inset: clamp(20px, 3vw, 48px);
	--esd-hero-hud: 64px;
	--esd-hero-bg: #1c1f22;
	--esd-hero-line: rgba(255, 255, 255, 0.62);
	--esd-hero-grid: rgba(255, 255, 255, 0.16);
	--esd-hero-ink: #fff;
	--esd-hero-accent: #f7cf94;
	/*
	 * Theme type: New Science (display + HUD) and Roboto (body), both served by
	 * the theme's Typekit kit. The theme.json presets win when present.
	 */
	--esd-hero-font: var(--wp--preset--font-family--new-science, "new-science", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	--esd-hero-font-body: var(--wp--preset--font-family--roboto, "roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

	--esd-crosshair-o: 0;
	--esd-box-x: 50%;
	--esd-box-y: 50%;
	--esd-box-w: 14px;
	--esd-box-h: 14px;
	--esd-box-o: 0;
	--esd-grid-o: 0;
	--esd-media-o: 0;
	--esd-final-scale: 1;
	--esd-words-y: 0px;
	--esd-words-s: 1;
	--esd-tagline-o: 0;
	--esd-tagline-y: 24px;
	--esd-hud-o: 0;
	--esd-hud-motto-o: 0;
	--esd-hud-meters-o: 0;
	--esd-hud-meter-a: 0;
	--esd-hud-meter-b: 0;
	--esd-hud-gauge-o: 0;
	--esd-hud-marker: 0;
	--esd-hud-meta-o: 0;
	--esd-hud-est-o: 0;
	--esd-exit-o: 1;

	position: relative;
	background: var(--esd-hero-bg);
	/* Exit fade once the finished block scrolls away (see EXIT_FADE in the JS). */
	opacity: var(--esd-exit-o);
	color: var(--esd-hero-ink);
	font-family: var(--esd-hero-font);
}

.esd-hero *,
.esd-hero *::before,
.esd-hero *::after {
	box-sizing: border-box;
}

/*
 * Full-bleed breakout.
 *
 * ACF only hands the template $block['align']; render.php turns that into
 * .alignfull + .esd-hero--full. Themes that already support alignfull make this
 * a no-op (the margins resolve to ~0); themes that constrain content width get
 * broken out of the container here.
 *
 * --esd-hero-vw is written by the JS as documentElement.clientWidth so the
 * breakout excludes the scrollbar. 100vw is the no-JS fallback. Do NOT "fix"
 * any resulting overflow with overflow-x: hidden on html/body — that kills
 * position: sticky and the whole sequence with it.
 */
.esd-hero--full {
	width: var(--esd-hero-vw, 100vw);
	max-width: var(--esd-hero-vw, 100vw);
	margin-left: calc(50% - (var(--esd-hero-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--esd-hero-vw, 100vw) / 2));
}

.esd-hero__track {
	position: relative;
	height: calc(var(--esd-hero-scroll) * 1vh);
}

.esd-hero__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

/*
 * The overlay shares the frame's box (so --esd-box-x/y stay in frame
 * coordinates) but does not clip, letting the crosshair lines run out to the
 * stage edges — i.e. the viewport.
 */
.esd-hero__frame,
.esd-hero__overlay {
	position: absolute;
	top: var(--esd-hero-inset);
	right: var(--esd-hero-inset);
	bottom: calc(var(--esd-hero-hud) + var(--esd-hero-inset));
	left: var(--esd-hero-inset);
}

.esd-hero__frame {
	overflow: hidden;
}

.esd-hero__overlay {
	pointer-events: none;
	z-index: 4;
}

/* ------------------------------------------------------------- crosshair */

.esd-hero__crosshair {
	position: absolute;
	inset: 0;
	opacity: var(--esd-crosshair-o);
	pointer-events: none;
	z-index: 4;
}

/*
 * The lines bleed past the frame so they read edge-to-edge on the viewport.
 * They live in .esd-hero__overlay, not the frame — the frame clips.
 */
.esd-hero__crosshair::before,
.esd-hero__crosshair::after {
	content: "";
	position: absolute;
	background: var(--esd-hero-line);
}

.esd-hero__crosshair::before {
	left: calc(-1 * var(--esd-hero-inset));
	right: calc(-1 * var(--esd-hero-inset));
	top: var(--esd-box-y);
	height: 1px;
}

.esd-hero__crosshair::after {
	top: calc(-1 * var(--esd-hero-inset));
	bottom: calc(-1 * (var(--esd-hero-hud) + var(--esd-hero-inset)));
	left: var(--esd-box-x);
	width: 1px;
}

.esd-hero__box {
	position: absolute;
	top: var(--esd-box-y);
	left: var(--esd-box-x);
	width: var(--esd-box-w);
	height: var(--esd-box-h);
	margin: calc(var(--esd-box-h) / -2) 0 0 calc(var(--esd-box-w) / -2);
	border: 1px solid var(--esd-hero-line);
	opacity: var(--esd-box-o);
	pointer-events: none;
	z-index: 4;
}

/* ------------------------------------------------------------ media + grid */

/*
 * The media and grid are cropped to the targeting box, so they are revealed by
 * the rectangle as it expands. --esd-box-* are frame-relative px (centre + size);
 * once the box has opened to the full frame the inset resolves to 0.
 */
.esd-hero__media,
.esd-hero__grid {
	clip-path: inset(
		calc(var(--esd-box-y) - var(--esd-box-h) / 2)
		calc(100% - var(--esd-box-x) - var(--esd-box-w) / 2)
		calc(100% - var(--esd-box-y) - var(--esd-box-h) / 2)
		calc(var(--esd-box-x) - var(--esd-box-w) / 2)
	);
}

.esd-hero__media {
	position: absolute;
	inset: 0;
	opacity: var(--esd-media-o);
	background: #000;
	z-index: 1;
}

.esd-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	display: block;
}

.esd-hero__video--final {
	transform: scale(var(--esd-final-scale));
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

.esd-hero__grid {
	position: absolute;
	inset: 0;
	opacity: var(--esd-grid-o);
	pointer-events: none;
	z-index: 2;
	background-image:
		linear-gradient(to right, var(--esd-hero-grid) 0 1px, transparent 1px),
		linear-gradient(to bottom, var(--esd-hero-grid) 0 1px, transparent 1px);
	background-size:
		calc(100% / 7) 100%,
		100% calc(100% / 4);
}

/* ------------------------------------------------------------------- words */

.esd-hero__words {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: baseline;
	/*
	 * 0.34em while the words are full size, opening to 1.84em by the time they
	 * have collapsed (--esd-words-s 1 -> 0.34) — ~59px at 32px, per the storyboard.
	 */
	gap: calc(0.34em + (1 - var(--esd-words-s)) * 2.2727em);
	margin-top: -0.62em;
	font-size: clamp(44px, 6.667vw, 128px); /* 96px @ 1440 */
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	transform: translateY(var(--esd-words-y)) scale(var(--esd-words-s));
	transform-origin: 50% 50%;
	will-change: transform;
	pointer-events: none;
	z-index: 3;
}

/*
 * Never shrink or wrap. The unscaled row (words + the widened collapse gap) is
 * wider than the frame, but it is scaled to 0.34 by then; with justify-content:
 * center the overflow spills evenly either side and the lockup stays centred.
 */
.esd-hero__word {
	flex: 0 0 auto;
	white-space: nowrap;
	opacity: 0;
}

.esd-hero__word-inner,
.esd-hero__letter {
	display: inline-block;
	will-change: transform, opacity, filter;
}

/* ----------------------------------------------------------------- tagline */

.esd-hero__tagline {
	--esd-hero-headline-size: clamp(36px, 6.667vw, 128px); /* 96px @ 1440 */

	/*
	 * Headline + sub-copy are centred in the frame, then nudged down 22.5px @ 1440
	 * to leave room for the collapsed words above (which the JS parks relative
	 * to the headline), so the full lockup sits centred as on the storyboard.
	 */
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin-top: calc(var(--esd-hero-headline-size) * 0.234);
	padding: 0 4%;
	text-align: center;
	opacity: var(--esd-tagline-o);
	transform: translateY(calc(-50% + var(--esd-tagline-y)));
	pointer-events: none;
	z-index: 3;
}

/*
 * Both are <p>, and theme.json's core/paragraph preset is printed as
 * `:root :where(p)` (Roboto 300, 16px, 1.438) — one class of specificity, loaded
 * after this file. Scope under .esd-hero so these rules win on the real page.
 */
.esd-hero .esd-hero__headline {
	max-width: 9.9em; /* 950px @ 96px */
	margin: 0 auto 0.365em;
	font-family: var(--esd-hero-font);
	font-size: var(--esd-hero-headline-size);
	line-height: 1.0417; /* 100 / 96 */
	font-weight: 700;
	letter-spacing: 0;
	color: var(--esd-hero-accent);
}

.esd-hero .esd-hero__sub {
	margin: 0 auto;
	max-width: 28.2em; /* 790px @ 28px */
	font-family: var(--esd-hero-font-body);
	font-size: clamp(16px, 1.944vw, 36px); /* 28px @ 1440 */
	font-weight: 300;
	line-height: 1.0714; /* 30 / 28 */
	color: rgba(255, 255, 255, 0.76);
}

/* --------------------------------------------------------------- HUD bar */

.esd-hero__hud {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--esd-hero-hud);
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 54px);
	padding: 0 clamp(16px, 2.4vw, 34px);
	background: rgba(16, 19, 22, 0.46);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	opacity: var(--esd-hud-o);
	z-index: 5;
}

.esd-hero__hud-motto {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
	opacity: var(--esd-hud-motto-o);
}

.esd-hero__hud-motto::first-line {
	letter-spacing: 1.5px;
}

.esd-hero__hud-meters {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: clamp(90px, 11vw, 150px);
	opacity: var(--esd-hud-meters-o);
}

.esd-hero__meter {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Both are spans: without display they stay inline and the fill's width is ignored. */
.esd-hero__meter-track {
	display: block;
	flex: 1 1 auto;
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.14);
	overflow: hidden;
}

.esd-hero__meter-fill {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: var(--esd-hero-ink);
}

.esd-hero__meter-fill--a {
	width: calc(var(--esd-hud-meter-a) * 100%);
}

.esd-hero__meter-fill--b {
	width: calc(var(--esd-hud-meter-b) * 100%);
}

.esd-hero__meter-icon {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	opacity: 0.72;
}

.esd-hero__hud-gauge {
	flex: 1 1 auto;
	position: relative;
	height: 18px;
	opacity: var(--esd-hud-gauge-o);
}

.esd-hero__gauge-ticks {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 8px;
	background-image: repeating-linear-gradient(
		to right,
		rgba(255, 255, 255, 0.5) 0 1px,
		transparent 1px 14px
	);
}

.esd-hero__gauge-fill {
	position: absolute;
	left: 0;
	top: 3px;
	height: 1px;
	width: calc(var(--esd-hud-marker) * 100%);
	overflow: hidden;
}

.esd-hero__gauge-fill::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 100vw;
	background: var(--esd-hero-ink);
}

.esd-hero__gauge-marker {
	position: absolute;
	top: 3px;
	left: calc(var(--esd-hud-marker) * 100%);
	margin: -9px 0 0 -5px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 7px solid var(--esd-hero-ink);
}

.esd-hero__hud-meta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.4vw, 20px);
	opacity: var(--esd-hud-meta-o);
}

.esd-hero__meta-icon {
	width: 18px;
	height: 18px;
	opacity: 0.8;
}

.esd-hero__meta-item,
.esd-hero__meta-est {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.esd-hero__meta-est {
	opacity: var(--esd-hud-est-o);
}

.esd-hero__meta-label {
	font-size: 8px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.5);
}

.esd-hero__meta-value {
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.9);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.esd-hero__meta-est .esd-hero__meta-value {
	letter-spacing: 2px;
}

.esd-hero__meta-divider {
	width: 1px;
	height: 22px;
	background: rgba(255, 255, 255, 0.18);
}

/* -------------------------------------------------- static / no-JS fallback */

.esd-hero--static .esd-hero__track {
	height: auto;
}

.esd-hero--static .esd-hero__stage {
	position: relative;
	height: 100vh;
	min-height: 520px;
}

.esd-hero--static .esd-hero__frame {
	box-sizing: border-box;
}

.esd-hero--static .esd-hero__crosshair,
.esd-hero--static .esd-hero__box,
.esd-hero--static .esd-hero__words {
	display: none;
}

.esd-hero--static .esd-hero__media,
.esd-hero--static .esd-hero__grid {
	opacity: 1;
	clip-path: none;
}

.esd-hero--static .esd-hero__video--final {
	opacity: 1;
	transform: none;
}

.esd-hero--static .esd-hero__tagline {
	opacity: 1;
	transform: translateY(-50%);
}

.esd-hero--static .esd-hero__hud,
.esd-hero--static .esd-hero__hud-motto,
.esd-hero--static .esd-hero__hud-meters,
.esd-hero--static .esd-hero__hud-gauge,
.esd-hero--static .esd-hero__hud-meta,
.esd-hero--static .esd-hero__meta-est {
	opacity: 1;
}

.esd-hero--static .esd-hero__meter-fill--a {
	width: 82%;
}

.esd-hero--static .esd-hero__meter-fill--b {
	width: 64%;
}

.esd-hero--static .esd-hero__gauge-fill,
.esd-hero--static .esd-hero__gauge-marker {
	display: none;
}

/*
 * Editor preview: the canvas is narrower than the front end and is itself a
 * scroll container, so never break out there.
 */
.esd-hero--preview {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.esd-hero--preview .esd-hero__stage {
	height: 70vh;
	min-height: 420px;
}

/*
 * Mobile version: matches MOBILE_QUERY in the JS — phones, portrait iPads (up
 * to 1032px), and phones in landscape.
 */
@media (max-width: 743px),
	(max-width: 1032px) and (orientation: portrait),
	(max-height: 500px) and (orientation: landscape) {
	.esd-hero {
		--esd-hero-hud: 52px;
	}

	.esd-hero__hud {
		gap: 14px;
	}

	.esd-hero__hud-meters,
	.esd-hero__hud-gauge {
		display: none;
	}
}