/*
 * A single page-wide fixed background layer (not scoped to any one
 * section), so illustrations read as ambient decoration behind the
 * entire site — including behind the nav, which has no opaque
 * background of its own so the art can show through it.
 */
.parallax-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.parallax-item {
	position: absolute;
	will-change: transform, opacity;
	opacity: 1;
	/* Only governs the return-to-visible transition (below); scrolling
	   itself snaps to 0.4 opacity instantly, no ease-in. */
	transition: opacity 1.2s ease-out;
}

/* Scrolling starts -> instantly 40% opacity (transition: none beats the
   base rule's transition since it's the more specific selector). Ease
   back to fully visible only once scrolling stops (see parallax.js). */
.parallax-layer.is-scrolling .parallax-item {
	opacity: 0.4;
	transition: none;
}

/* Everything else stacks above the fixed background layer. */
.page-grid {
	position: relative;
	z-index: 1;
}

.nav-column {
	z-index: 40;
}

/* Above .nav-drawer (z-index: 100): the hamburger must stay visible,
   morphed into an X, even while the drawer it controls is open. */
.nav-hamburger {
	z-index: 110;
}