/**
 * Hero text floor — the entity copy layer over the particle field.
 *
 * Art Director spec (Hero text floor, 2026-07-11), Route 1: the copy lives as a
 * sibling INSIDE .vz-hero, after the .vz-gfx-stage, so it sits over the field with no
 * separate overlay container. This sheet owns ONLY the floor, veil, scrollcue and reveal
 * motion — it never touches the gfx stage, poster, canvas, or the is-ready fade.
 * MIKO 2026-07-12: hero copy = H1 alone; the entity lede was removed from the hero
 * (canonical entity sentence lives in the About section instead).
 *
 * Stacking (local to .vz-hero): stage+poster+canvas z0 (untouched, set in gfx CSS) <
 *   veil z2 < floor + scrollcue z3.  z1 is RESERVED (entry flash) — never used here.
 *
 * .vz-hero already sets position:relative + min-height in assets/css/gfx/10-hero-field.css,
 * so it is NOT re-declared here (spec §3 note).
 *
 * The .js flag on <html> is set before first paint by vizaion_header_js_gate()
 * (functions.php, wp_head priority 0). The reveal motion below is gated on it, so with JS
 * off the copy renders at full opacity with no transform — the H1 stays a clean LCP.
 */

/* ─── Typography (§2) ─────────────────────────────────────────────────────── */
.vz-hero-h1 {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	color: #F3F1FA;
	/* Contrast insurance (§5): keep copy legible over the field's brightest cores. */
	text-shadow: 0 1px 24px rgba(7, 3, 18, 0.55);
	font-size: clamp(2.2rem, 1.4rem + 3.6vw, 3.6rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin: 0;
	text-wrap: balance;
	/* Clear the centred logo disc (2026-07-13, MIKO: "logo and text overlay a bit, push text right").
	   The disc is centred canvas content; on wide desktop the H1's right edge reached PAST the hero
	   centreline into the disc. Two tunables:
	     --vz-h1-shift-x   nudges the whole block rightward off the left gutter (MIKO's "push right").
	     --vz-h1-max-inline caps the block's RIGHT extent so the right edge stays short of centre.
	   The cap is the load-bearing knob. The OLD cap `min(18ch, 530px)` was VIEWPORT-BLIND: 18ch is a
	   fixed width that ignores where centre is (critic HIGH). Fixed 2026-07-13 to a VIEWPORT-RELATIVE
	   cap that is ALSO floored so it can never squeeze the intended lines: `clamp(360px, 50vw - 100px,
	   530px)`.
	     Empirical basis (measured cold in CfT at 900/1024/1175/1280/1440/1600/1920, real GPU):
	     - The H1 carries explicit <br> breaks (International / Immersive / Art Collective). Its widest
	       line as the SPLIT per-letter layer ("Art Collective") is ~352px (after dropping the letter
	       min-width from 1ch→0.6ch in 20-hero-intro.css — the 1ch inflation was the real sub-wrap
	       cause, see that file). So any cap below ~352px force-wraps the intended lines into ugly
	       sub-wraps. The 360px FLOOR prevents that: the intended 3 lines always fit their own line.
	     - 50vw is the hero centreline (the disc is centred). `50vw - 100px` keeps the block short of
	       centre on WIDE screens where the block's growing left offset would otherwise let text cross
	       into the disc; the 530px CEILING holds the wide-desktop look MIKO approved (≥1280px all hit
	       530, unchanged). The floor only bites ≤~880px, where the disc is small and 340px still clears.
	     - Net: no sub-wrap at any width AND the right edge stays clear of the centred disc. Verified
	       visually at 900/1024/1175/1440 (screenshots in /tmp/vz-text-round2).
	   Left-aligned so the block reads pushed-right, not re-centred. */
	margin-inline-start: var(--vz-h1-shift-x, clamp(0px, 1.5vw, 1.75rem));
	max-inline-size: var(--vz-h1-max-inline, clamp(360px, 50vw - 100px, 530px));
	text-align: start;
}

/* ─── Floor placement & layout (§3) ───────────────────────────────────────── */
.vz-hero-floor {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: flex-end;
	pointer-events: none;
	padding-block-end: clamp(4rem, 10vh, 7rem);
}

.vz-hero-floor__inner {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 4vw, 2.5rem);
	pointer-events: auto;
}

@media (max-width: 781px) {
	.vz-hero-floor {
		align-items: flex-end;
		padding-block-end: clamp(3.5rem, 8vh, 5rem);
	}
}

@media (max-width: 480px) {
	.vz-hero-floor__inner {
		padding-inline: 1.25rem;
	}
}

/* ─── Veil (§5) ───────────────────────────────────────────────────────────── */
.vz-hero-veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(9, 6, 20, 0.00) 0%,
		rgba(9, 6, 20, 0.00) 34%,
		rgba(9, 6, 20, 0.42) 68%,
		rgba(9, 6, 20, 0.72) 100%
	);
}

/* ─── Scroll cue (§6) ─────────────────────────────────────────────────────── */
.vz-hero-scrollcue {
	position: absolute;
	left: clamp(1.5rem, 4vw, 2.5rem);
	bottom: 2.5rem;
	z-index: 3;
	pointer-events: none;
}

.vz-hero-scrollcue__track {
	display: block;
	width: 1px;
	height: 80px;
	background: rgba(243, 241, 250, 0.22);
	position: relative;
	overflow: hidden;
}

.vz-hero-scrollcue__track::after {
	content: "";
	position: absolute;
	left: 0;
	top: -40%;
	width: 1px;
	height: 40%;
	background: linear-gradient(rgba(198, 182, 242, 0.85), transparent);
}

@media (prefers-reduced-motion: no-preference) {
	.vz-hero-scrollcue__track::after {
		animation: vzCueRun 2.2s cubic-bezier(.2, .7, .2, 1) infinite;
	}
}

@keyframes vzCueRun {
	0% { top: -40%; }
	60% { top: 100%; }
	100% { top: 100%; }
}

@media (max-width: 480px) {
	.vz-hero-scrollcue { display: none; }
}

/* ─── Reveal motion (§7) ──────────────────────────────────────────────────── */
/* Rest state: copy is ALWAYS fully visible — the H1 must be a valid LCP with JS off. */
.vz-hero-h1 {
	opacity: 1;
	transform: none;
}

/* With JS (flag set pre-paint), copy starts slightly under and fades in. Never opacity:0
   — floors at 0.6 so it is legible even mid-transition. NOT gated on .is-ready. */
.js .vz-hero-h1 {
	opacity: 0.6;
	transform: translateY(10px);
	transition: opacity 900ms cubic-bezier(.2, .7, .2, 1),
	            transform 900ms cubic-bezier(.2, .7, .2, 1);
}

.js .vz-hero-floor.is-in .vz-hero-h1 {
	opacity: 1;
	transform: none;
	transition-delay: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
	.js .vz-hero-h1 {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}