/* Scroll Journey — fixed full-viewport stage (2026-07-14, Fabão).
 *
 * The continuous camera ride's canvas lives here, BEHIND the whole page (z-index -1 over
 * the root background), while the UI and monospace type scroll freely above it. The stage
 * itself is the static fallback: its light-gray archival ground is what mobile (≤781px),
 * reduced-motion, save-data, no-WebGL2, JS-off and every runtime failure path see — the
 * same poster discipline as the hero stage, in the journey's own palette.
 *
 * Sections that must reveal the ride need transparent backgrounds (an opaque section
 * paints over a fixed z-index:-1 layer). That is template/theme.json territory — flagged
 * to MIKO in the PR, not forced from here.
 *
 * Load order: 12- sits after 10-hero-field.css so the overrides below win by cascade
 * as well as by specificity. */

.vz-gfx-stage.vz-journey-stage {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	/* The archival ground — doubles as the universal static fallback (no .poster div:
	   the ground IS the poster). Matches the runtime's JOURNEY_LIGHT clear color. */
	background: #e4e4e7;
}

/* The ride's canvas fades in on `is-ready`, mirroring the hero stage contract. The base
   `.vz-gfx-stage canvas` rules (block, 100%, opacity 0 → transition) already apply; only
   the reveal needs restating for THIS stage since the loader marks it independently. */
.vz-gfx-stage.vz-journey-stage.is-ready canvas {
	opacity: 1;
}

/* While the ride is live the hero stage becomes a transparent window: its canvas moved
   to the fixed stage, so hide the local poster/ground and let the ride show through.
   Every failure path removes `vz-journey-live` (see the loader's restoreVideo), which
   puts the opaque poster straight back — the fallback contract is untouched. */
.vz-gfx-stage.vz-journey-live {
	background: transparent;
}

.vz-gfx-stage.vz-journey-live .poster {
	opacity: 0;
	transition: opacity 900ms ease;
}

/* The hero section's own dark ground would occlude the fixed canvas behind it. `:has()`
   is progressive enhancement: where unsupported, the hero simply keeps its dark ground
   and the ride begins visually at the hero's lower edge — degraded, never broken. */
.vz-hero:has(.vz-journey-live) {
	background: transparent;
}