/* Den of Lore living liquid backdrop — canvas host + section hand-off.
   The overrides only apply once the JS confirms WebGL works
   (html[data-liquid-bg="on"]), so the CSS gradients remain the fallback. */

#liquid-bg {
	position: fixed;
	inset: 0;
	/* Negative z: paints above the root background but below every in-flow
	   section, so transparent sections reveal it and text is never covered. */
	z-index: -1;
	pointer-events: none;
}

/* body's paper background would paint over the negative-z canvas */
html[data-liquid-bg="on"] body {
	background: transparent;
}

/* The root background is dark ink. With body transparent, any strip the fixed
   canvas does not cover - iOS URL-bar collapse, rubber-band overscroll - showed
   as black at the bottom. Paper matches the page instead. */
html[data-liquid-bg="on"] {
	background: #fbf8f0;
}

/* Cover the LARGEST viewport so the collapsed-URL-bar state is still painted. */
html[data-liquid-bg="on"] #liquid-bg {
	height: 100lvh;
	min-height: 100vh;
}

#liquid-bg canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* The shader paints these sections' gradients (and the paper between them),
   so their own backgrounds step aside. Text and inner decorations stay. */
html[data-liquid-bg="on"] .hero,
html[data-liquid-bg="on"] .tools,
html[data-liquid-bg="on"] .contact {
	background: transparent;
	animation: none;
}

html[data-liquid-bg="on"] .services,
html[data-liquid-bg="on"] .accountability,
html[data-liquid-bg="on"] .process,
html[data-liquid-bg="on"] .fit,
html[data-liquid-bg="on"] .outcomes {
	background: transparent;
}

/* the outcome grid sat on its own tint; let the field show through */
html[data-liquid-bg="on"] .outcomes::before {
	display: none;
}


/* The hero keeps its own mesh at reduced strength so the moving field shows
   through it. That mesh is the part that made the hero feel like the hero. */
html[data-liquid-bg="on"] .hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .55;
	mix-blend-mode: multiply;
	background:
		radial-gradient(circle at 13% 18%, rgba(255,255,255,.84) 0 4%, transparent 22%),
		radial-gradient(circle at 81% 18%, rgba(245,197,19,.78) 0 5%, transparent 26%),
		radial-gradient(circle at 60% 68%, rgba(251,97,167,.74) 0 7%, transparent 35%),
		radial-gradient(circle at 20% 79%, rgba(40,184,151,.68) 0 7%, transparent 38%),
		radial-gradient(circle at 92% 72%, rgba(121,102,231,.58) 0 8%, transparent 36%),
		linear-gradient(126deg, #dff5ff 0%, #9ee6d4 28%, #fff0a8 52%, #ff9a8f 72%, #c78be2 100%);
	background-size: 150% 150%;
	animation: mesh-breathe 14s ease-in-out infinite alternate;
}

/* The statement's ink panel goes translucent so the dark geometric flow behind
   it shows, while the light text keeps its contrast. */
html[data-liquid-bg="on"] .statement {
	background: rgba(37, 36, 36, .58) !important;
}