/* lava.css — the ember background.
 *
 * A slow, warm lava-lamp glow behind the page, in keeping with the iron-oxide
 * (fe2o3, rust, fire) theme the palette already carries. It is deliberately
 * quiet: a handful of large, heavily-blurred warm pools drifting on the dark,
 * screen-blended so they read as light rather than paint, under a vignette and
 * a film of grain. Decorative only -- the layer is `aria-hidden` and takes no
 * pointer events, and it stills itself entirely for anyone who asks for less
 * motion.
 *
 * Colours are taken from the site tokens (accent, accent-hover, warn) so the
 * glow is the same fire as the marks and the links. */

.lava {
	position:		fixed;
	inset:			0;
	z-index:		-2;
	overflow:		hidden;
	pointer-events:		none;
	background:		var(--bg-primary);
}

/* The pools of light. Each is a soft radial gradient, blurred to a haze and
   added to the dark with `screen`, so where two overlap the light pools rather
   than one hiding the other -- the lava-lamp merge, without the cost of a goo
   filter. */
.blob {
	position:		absolute;
	border-radius:		50%;
	filter:			blur(54px);
	mix-blend-mode:		screen;
	will-change:		transform;
}

/* A deep red rising from the lower left -- the base of the fire. It climbs most
   of the page and sinks back, so its movement is plainly a movement. */
.blob-1 {
	width:			48vmax;
	height:			48vmax;
	left:			-12vmax;
	bottom:			-16vmax;
	background:		radial-gradient(circle at 50% 50%,
					rgba(210, 96, 79, 0.50), rgba(210, 96, 79, 0) 68%);
	animation:		drift-1 15s ease-in-out infinite;
}

/* An amber pool on the right, the warmest note, swinging in and down to meet the
   others through the middle. */
.blob-2 {
	width:			42vmax;
	height:			42vmax;
	right:			-12vmax;
	top:			-10vmax;
	background:		radial-gradient(circle at 50% 50%,
					rgba(214, 162, 74, 0.34), rgba(214, 162, 74, 0) 66%);
	animation:		drift-2 20s ease-in-out infinite;
}

/* A coral ember through the middle, the one that does most of the morphing as it
   crosses the other two. It travels furthest, so the merge reads. */
.blob-3 {
	width:			38vmax;
	height:			38vmax;
	left:			22vmax;
	top:			24vmax;
	background:		radial-gradient(circle at 50% 50%,
					rgba(224, 122, 103, 0.40), rgba(224, 122, 103, 0) 70%);
	animation:		drift-3 13s ease-in-out infinite;
}

/* A smaller, brighter spark that rises up the right, giving the top of the page
   its own motion. */
.blob-4 {
	width:			26vmax;
	height:			26vmax;
	right:			18vmax;
	bottom:			2vmax;
	background:		radial-gradient(circle at 50% 50%,
					rgba(233, 163, 146, 0.34), rgba(233, 163, 146, 0) 68%);
	animation:		drift-4 17s ease-in-out infinite;
}

/* Each drift is a slow wander with a real swell -- the travel is large enough to
   see (a lava lamp is unmistakably moving, only slowly), and no two share a
   period, so the pattern never obviously repeats. Motion is mostly vertical, the
   way a lamp's wax and a fire's heat both move. */
@keyframes drift-1 {
	0%, 100%	{ transform: translate(0, 0) scale(1); }
	50%		{ transform: translate(16vmax, -30vmax) scale(1.32); }
}
@keyframes drift-2 {
	0%, 100%	{ transform: translate(0, 0) scale(1); }
	50%		{ transform: translate(-24vmax, 22vmax) scale(1.28); }
}
@keyframes drift-3 {
	0%, 100%	{ transform: translate(0, 0) scale(1); }
	33%		{ transform: translate(-22vmax, -10vmax) scale(1.3); }
	66%		{ transform: translate(10vmax, -20vmax) scale(1.16); }
}
@keyframes drift-4 {
	0%, 100%	{ transform: translate(0, 0) scale(1); }
	50%		{ transform: translate(18vmax, -24vmax) scale(1.34); }
}

/* Grain, over the glow: a fine fractal-noise film at a whisper of opacity, the
   thing that separates a flat gradient from something that looks lit. */
.lava::before {
	content:		"";
	position:		absolute;
	inset:			0;
	background-image:	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity:		0.04;
	mix-blend-mode:		overlay;
}

/* Vignette: the edges fall to black so the eye is held to the middle and the
   page has a floor and walls rather than an even wash. */
.lava::after {
	content:		"";
	position:		absolute;
	inset:			0;
	background:		radial-gradient(125% 95% at 50% 42%,
					transparent 42%, rgba(6, 4, 3, 0.55) 100%);
}

/* Stillness for anyone who asks for it: the pools stop where they are, the grain
   and vignette stay -- the warmth without the movement. */
@media (prefers-reduced-motion: reduce) {
	.blob { animation: none; }
}