/**
 * The atmosphere layer.
 *
 * A fixed canvas holding one continuous body of mist, behind the document.
 *
 * Two things have to be true for it to work, and neither is automatic:
 *
 * 1. The canvas is positioned, so it paints in the positioned-descendant step.
 *    In-flow static content paints *earlier* than that, which means an
 *    unpositioned section would end up underneath the mist rather than over it.
 *    Every band of the page is therefore given its own stacking position.
 *
 * 2. The bands give up their backgrounds — but only once the layer has proved
 *    it can draw. Every rule that does so is scoped to `.has-atmosphere`, a
 *    class the module adds to <html> after its shader has compiled and its
 *    grounds are measured. Without WebGL2 the class never appears, the grounds
 *    below stay opaque, and the page looks exactly as it did before this file
 *    existed.
 *
 * The colours here are therefore the single source of truth for the page's
 * grounds in both states: the stylesheet paints them when the layer is absent,
 * and the module reads these same computed values to hand to the shader when it
 * is present.
 *
 * @package Domaine
 */

.atmos {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	contain: strict;
	/* Until the layer draws there is nothing here; the grounds are opaque. */
	background: transparent;
}

.atmos__canvas {
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	transition: opacity 1.8s var(--ease, ease);
}

.atmos__canvas.is-ready { opacity: 1; }

/* Everything the visitor reads sits above the air. footer.php's markup is
   `</main><footer class="footer">` — the footer is <main>'s sibling, not its
   child, and its real class is .footer, not .site-footer. That mismatched
   name meant the footer never got a stacking context of its own, so once its
   own background went transparent under `.has-atmosphere` the fixed, opaque
   canvas beneath it — which paints above ordinary static-flow content
   regardless of who is later in the document — covered it completely. */
.site-main,
.footer {
	position: relative;
	z-index: 1;
}

/*
 * The grounds.
 *
 * Declared unconditionally so they are what the module measures, then dropped
 * only under `.has-atmosphere` so the shader can paint them itself with the
 * mist worked into them.
 */
.tour,
.showcase,
.atlas,
.footer,
.residence-tour {
	background-color: var(--bone-deep);
	color: var(--ink);
}

.manifesto,
.collection,
.story,
.amenities,
.advisors,
.journal-teaser {
	background-color: var(--paper);
}

.has-atmosphere .tour,
.has-atmosphere .showcase,
.has-atmosphere .atlas,
.has-atmosphere .footer,
.has-atmosphere .residence-tour,
.has-atmosphere .manifesto,
.has-atmosphere .collection,
.has-atmosphere .story,
.has-atmosphere .amenities,
.has-atmosphere .advisors,
.has-atmosphere .journal-teaser {
	background-color: transparent;
}

/*
 * The body ground has to go too, or it paints over the canvas beneath the
 * document's own height — visible as a band of flat paper below the footer on a
 * short page.
 */
.has-atmosphere body { background-color: transparent; }

/*
 * The hero keeps its own ground: it is already carrying a photograph and a
 * scrim, and the shader is told to hold the mist back across it.
 */
.hero { background-color: var(--stone-900); }

/*
 * Reduced motion removes the layer outright rather than freezing it. A still
 * frame of mist is a grey wash that dulls the palette and buys nothing.
 */
@media (prefers-reduced-motion: reduce) {
	.atmos { display: none; }
	.has-atmosphere .tour,
	.has-atmosphere .showcase,
	.has-atmosphere .atlas,
	.has-atmosphere .footer,
	.has-atmosphere .residence-tour { background-color: var(--bone-deep); }

	.has-atmosphere .manifesto,
	.has-atmosphere .collection,
	.has-atmosphere .story,
	.has-atmosphere .amenities,
	.has-atmosphere .advisors,
	.has-atmosphere .journal-teaser { background-color: var(--paper); }

	.has-atmosphere body { background-color: var(--paper); }
}