/**
 * SECTION BACKGROUNDS — the media layer 10-section-bg.js mounts per part (2026-08-10).
 *
 * The holder is the section's floor: z-index 0, behind every sibling. Sections that get a
 * background are stamped .vz-has-bg and their children lifted to z-index 1 — EXCEPT canvas
 * elements, whose stacking the GL sheets own (10-about-fluid.css keeps the fluid at the
 * About's own floor; lifting it here would reorder a seam this layer must not touch).
 */

.vz-section-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Window slots (2026-08-11): the runtime sizes/positions these inline — the inset base
   must not fight the inline box. */
.vz-section-bg--win {
	inset: auto;
	/* gives the pointer/gyro rotateX/Y tilt real depth (view-rotation ruling 2026-08-11) */
	perspective: 900px;
}

/* BAND windows (2026-09-06 deep-refinement): a full-width near-black rectangle
   crossing the whole section — the runtime sets the box inline (full host width,
   the marker's vertical extent). The contour-lines mask and the per-window media
   layer are gone; the alpha overlay (the practice's main video) is the only
   media, tilting inside the band. */
.vz-section-bg--band {
	/* Phase 2 (2026-09-06): the paint moved to the four .vz-band-strip children
	   so a transparent HOLE can open onto the sky. A mask here would also mask
	   the overlay (descendant) — strips avoid the whole class of problem. */
	background: transparent;
}
.vz-section-bg--band .vz-band-strip {
	position: absolute;
	background: #060310;
}
.vz-section-bg--band .vz-band-clip {
	position: absolute;
	overflow: hidden; /* the tilting media can never poke outside its square */
	perspective: 900px;
}

.vz-section-bg > img,
.vz-section-bg > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vz-has-bg {
	position: relative;
}

.vz-has-bg > *:not(.vz-section-bg):not(canvas) {
	position: relative;
	z-index: 1;
}