/**
 * Hero particle field.
 *
 * The stage sits between the cover block's video background and its dim veil, so the
 * layering reads: field -> veil -> content. WP core only applies its own cover z-indexes
 * when `.wp-block-cover__background` is NOT adjacent to `.wp-block-cover__inner-container`;
 * here it is, so the video's `z-index: 0` is the only one in play and DOM order decides the
 * rest. Inserting after the video is what puts the field above it.
 *
 * The canvas is inert to the pointer — the hero's nav and buttons sit on top of it, and the
 * fluid solver reads pointer moves off the cover element instead.
 *
 * There is no video-to-particles crossfade: the loader adds `.vz-field-pending` at footer
 * parse time, before the video paints. The stage carries the field's own clear colour so
 * hiding the video can't flash the page background underneath, and the canvas is opaque from
 * the first frame. The video is only restored if the field fails or loses its GL context.
 */

/* Declared-stage host (templates/front-page.html): provides the hero's height and the
   positioning context the absolute stage fills. */
.vz-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	background: #090909;
}

.vz-gfx-stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: #090909;
}

/* Universal fallback (GEO spec): a real cosmos image, visible by default, never
   display:none. This is what mobile, reduced-motion, save-data, no-WebGL2, JS-off and
   every runtime failure path see. The canvas fades in over it when the field is ready.
   CSS background rather than <img>: the URL resolves against this file, which a static
   block template cannot do, and the image is decorative (the entity text is the LCP). */
.vz-gfx-stage .poster {
	position: absolute;
	inset: 0;
	background: #090909 url(../../images/hero-cosmos-poster.jpg) center / cover no-repeat;
}

.vz-gfx-stage canvas {
	display: block;
	width: 100%;
	height: 100%;
	position: relative; /* paints above the poster without z-index games */
	opacity: 0;
	/* Canvas fade-in duration (TUNABLE). 900ms — MIKO wanted the reveal snappier (was 2.5s).
	   NOTE: this base fade only runs on the non-entry / post-`.vz-entry-active` path. During the
	   entry the coalesce IS the reveal, so `.vz-entry-active …is-ready canvas` (in
	   assets/entry/10-entry-flash.css) overrides this to opacity:1 / transition:none and the
	   coalesce is seen directly — this duration does not affect that beat. */
	transition: opacity 900ms ease;
}

.vz-gfx-stage.is-ready canvas {
	opacity: 1;
}

.wp-block-cover.vz-field-pending > .wp-block-cover__video-background {
	opacity: 0;
}

/* Reduced motion: the loader never boots the field, so no canvas exists — but the stage
   (and its poster) must stay visible. Hide only a canvas, never the stage. */
@media (prefers-reduced-motion: reduce) {
	.vz-gfx-stage canvas {
		display: none;
	}
}