/**
 * ABOUT fluid field — full-viewport-bleed WebGL backdrop behind the accordion.
 *
 * A SECOND, independent raw-WebGL runtime (10-about-fluid.js), separate from Fabão's hero
 * particle field. Per the orchestrator seam decision it lands OUTSIDE the gfx seam (like
 * 10-hero-floor.*): it never touches the hero stage contract (.vz-gfx-stage[data-shader]),
 * the hero loader, Fabão's runtime, or assets/entry/.
 *
 * The section (.vz-about) is a max-width field column; the canvas breaks out to span the whole
 * viewport width so the backdrop is not a bounded rectangle (MIKO 2026-07-12). Substantially
 * dimmed — opacity 0.22 when ready — it is a backdrop, never over legibility. The copy rides
 * above it (z-index:1 on non-canvas children, set in 10-about.css).
 *
 * overflow-x containment: this canvas is the first 100vw-width element on the live front page,
 * and 100vw includes the vertical scrollbar gutter, which can trip a horizontal scrollbar.
 * `overflow-x: clip` on the root prevents that WITHOUT creating a scroll container (unlike
 * `hidden`, it does not affect position:fixed descendants such as the header). Co-located here
 * so it is removed with the feature. FLAGGED for QA/GEO: confirm no horizontal-scroll regression.
 */
html { overflow-x: clip; }

/* Guard W1: hidden until the runtime confirms ready, then fades to the dim backdrop opacity. */
.vz-about canvas.field-gl {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	height: 100%;
	z-index: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.2s ease;
}
.vz-about canvas.field-gl.ready { opacity: .22; }

/* Guard W4 + mobile (≤781px, the theme's field gate — header.js uses the same breakpoint):
   the runtime never boots here, and the canvas is hidden so it never paints or reserves paint. */
@media (prefers-reduced-motion: reduce) {
	.vz-about canvas.field-gl { display: none; }
}
@media (max-width: 781px) {
	.vz-about canvas.field-gl { display: none; }
}