/* =====================================================================
   SALTMARSH · the light on the wall
   The fixed ambient plate, and the translucency that lets it through.
   ===================================================================== */

.rl {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	contain: strict;
}

.rl__gl {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1200ms var(--slow);
}
.rl__gl.on { opacity: 1; }
.rl__gl.is-off { opacity: 0; }

/* The CSS half. Two warm pools high on the wall, drifting on periods
   that do not divide into each other, so the loop never lands twice in
   the same place. This is the whole warmth on a machine with no WebGL,
   so it is set to stand alone rather than to top the canvas up. */
.rl__wash {
	position: absolute;
	inset: -15%;
	background:
		radial-gradient(42% 34% at 22% 8%, rgba(214, 176, 116, 0.34), transparent 70%),
		radial-gradient(38% 30% at 78% 2%, rgba(238, 219, 186, 0.42), transparent 68%),
		radial-gradient(52% 44% at 60% 46%, rgba(206, 173, 121, 0.18), transparent 72%);
	filter: blur(46px);
	will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
	.rl__wash { animation: rl-drift 71s var(--ease) infinite alternate; }
	@keyframes rl-drift {
		0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.00); }
		50%  { transform: translate3d(2.5%, 1.5%, 0) scale(1.05); }
		100% { transform: translate3d(-0.5%, 2.5%, 0) scale(1.02); }
	}
}

/* Only the two elements that already sit in normal flow get raised.
   .skip is absolute, .site-head and .drawer are fixed with their own
   z-index — giving either of those position:relative would drop it into
   the flow and blow a hole in the page. */
main,
.site-foot { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   Letting the light through
   The bands were opaque, which made the plate pointless below the first
   screen. Plain paper bands go nearly clear; the tinted bands keep
   enough body to still read as a change of key.
   ------------------------------------------------------------------ */

.band--paper2 { background: rgba(239, 233, 221, 0.62); }
.band--sand   { background: rgba(228, 220, 203, 0.70); }

/* The dining room is the one part of the building with no window on the
   water, so no light lands in it. Left deliberately opaque. */
.band--dark { background: var(--ink); }

.bookbar form { background: rgba(251, 250, 246, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cal__cell    { background: rgba(251, 250, 246, 0.72); }
.cal__cell.pad { background: rgba(239, 233, 221, 0.55); }
.cal__dow     { background: rgba(239, 233, 221, 0.72); }
.place__i     { background: rgba(247, 244, 237, 0.66); }
.place__i:hover { background: rgba(251, 250, 246, 0.86); }
.searchform input[type="search"] { background: rgba(251, 250, 246, 0.8); }

/* The header rail already blurs what is behind it; the plate simply
   becomes part of that. */
.site-head.solid { background: rgba(247, 244, 237, 0.86); }