/**
 * 15-sky-swallow.css — swallow #2 host + the CSS tier of the curtain.
 * Runtime: assets/js/gfx/15-sky-swallow.js (auto-enqueued by the gfx glob).
 *
 * The host is a fixed full-viewport layer, LAST child of <body>, z-index:-1 —
 * the same slot as the .vz-journey-stage but later in the DOM, so it paints
 * above swallow #1's parked art and below every in-flow section. It must live
 * on <body> directly (never inside .wp-site-blocks) or WP's blockGap margin
 * pushes it 32px down — the exact trap 13-journey-world.css:172 documents.
 *
 * STACKING CONTRACT (breaks silently if violated — the runtime's ?vzsky=1
 * check asserts it): <body>/<html> must never gain transform/filter (they
 * would capture position:fixed), and this host must stay after the journey
 * stage/track in DOM order.
 */

/* Backstop while the scroll tilt is live (runtime-stamped on <html>): the body
   ground is what shows through the slivers the rotated host opens — repaint it
   as the veil base so page-end slivers read as dark sky, not purple. */
html.vz-sky-solid body {
	background: #04020C;
}

/* Same backstop, one layer up: the journey stage (swallow #1's parked purple
   About interior) sits between the body and this sky host — it is what the
   tilt slivers actually reveal. While the tilt is live the sky covers the
   stage completely anyway, so capping it is invisible except in the slivers. */
html.vz-sky-solid .vz-gfx-stage.vz-journey-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #04020C;
}

.vz-sky {
	/* The "só escurecida" ruling: this ONE token is the veil for BOTH tiers —
	   the GL runtime parses it and bakes it into the holder texture. */
	--vz-sky-veil: rgba(4, 2, 12, 0.62);
	/* CSS tier: height of the ragged edge falloff. */
	--vz-sky-edge: 160px;

	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	contain: layout paint;
}

/* Hidden until the seam approaches; the GL canvas fades in over 150ms so any
   sub-perceptual grading difference against #1's parked frame never pops. */
.vz-sky > canvas,
.vz-sky-curtain {
	opacity: 0;
	transition: opacity 150ms linear;
}

.vz-sky.is-live > canvas,
.vz-sky.is-live .vz-sky-curtain { opacity: 1; }

.vz-sky > canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* ── CSS tier ────────────────────────────────────────────────────────────── */

.vz-sky-curtain {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: calc(100% + var(--vz-sky-edge));
	will-change: transform;
	/* Ragged top edge: turbulence-displaced ALPHA rect tiled across, solid
	   below. 1024px fixed tile so the noise frequency never stretches with the
	   viewport; the two layers compose additively. */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221024%22%20height%3D%22160%22%3E%3Cfilter%20id%3D%22t%22%20x%3D%22-.2%22%20y%3D%22-.6%22%20width%3D%221.4%22%20height%3D%222.2%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.006%200.02%22%20numOctaves%3D%223%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20scale%3D%2290%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%224%22%2F%3E%3C%2Ffilter%3E%3Crect%20x%3D%22-64%22%20y%3D%2280%22%20width%3D%221152%22%20height%3D%22240%22%20fill%3D%22#fff%22%20filter%3D%22url(%23t)%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(#000, #000);
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221024%22%20height%3D%22160%22%3E%3Cfilter%20id%3D%22t%22%20x%3D%22-.2%22%20y%3D%22-.6%22%20width%3D%221.4%22%20height%3D%222.2%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.006%200.02%22%20numOctaves%3D%223%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20scale%3D%2290%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%224%22%2F%3E%3C%2Ffilter%3E%3Crect%20x%3D%22-64%22%20y%3D%2280%22%20width%3D%221152%22%20height%3D%22240%22%20fill%3D%22#fff%22%20filter%3D%22url(%23t)%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(#000, #000);
	-webkit-mask-size: 1024px var(--vz-sky-edge), 100% calc(100% - var(--vz-sky-edge) + 1px);
	mask-size: 1024px var(--vz-sky-edge), 100% calc(100% - var(--vz-sky-edge) + 1px);
	-webkit-mask-position: left top, left bottom;
	mask-position: left top, left bottom;
	-webkit-mask-repeat: repeat-x, no-repeat;
	mask-repeat: repeat-x, no-repeat;
}

/* The art counter-translates against the curtain, so it stays locked to the
   viewport while the ragged edge passes over it — the same reading as the
   shader, whose holder is cover-fit to the CANVAS, not to the curtain. */
.vz-sky-art {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 100%;
	will-change: transform;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
	.vz-sky > canvas,
	.vz-sky-curtain { transition: none; }
}