/**
 * Dark-mode site background — Stitch-style (stitch.withgoogle.com).
 *
 * A fine grid of COLOURED dots over a soft aurora glow, on a fixed layer behind
 * all content. The dot GRID is fixed (a mask on a static wrapper); an animated
 * colour field flows underneath it, so the dots recolour and the colour appears
 * to move across them — exactly as Stitch does (their dots don't translate).
 * A subtle cursor parallax nudges the colour field toward the mouse.
 *
 * Only active under html.dark; light mode is untouched.
 */

.skyweb-darkbg { display: none; }

html.dark .skyweb-darkbg {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 0;                 /* content wrapper is z-index:2, sits above */
	pointer-events: none;
	background-color: #0B0B0C;  /* dark base */
	overflow: hidden;
	--sky-mx: 0;                /* cursor parallax (-0.5..0.5), set by JS */
	--sky-my: 0;
}

/* Soft aurora glow — blurred colour blobs drifting on their own. */
html.dark .skyweb-darkbg__aurora {
	position: absolute;
	inset: -25%;
	background:
		radial-gradient(38% 42% at 18% 30%, rgba(74, 114, 255, 0.38), transparent 70%),
		radial-gradient(34% 40% at 78% 22%, rgba(139, 92, 246, 0.32), transparent 70%),
		radial-gradient(46% 46% at 62% 82%, rgba(45, 212, 232, 0.26), transparent 70%),
		radial-gradient(40% 44% at 30% 88%, rgba(124, 58, 237, 0.30), transparent 72%);
	filter: blur(72px);
	opacity: 0.85;
	will-change: transform;
	animation: skyweb-aurora 26s ease-in-out infinite alternate;
	transform: translate3d(calc(var(--sky-mx) * -22px), calc(var(--sky-my) * -22px), 0);
}

/* Dot grid — the fixed mask lives here; nothing about the dots moves. */
html.dark .skyweb-darkbg__dots {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0.7;                   /* dial the whole dot layer down */
	-webkit-mask-image: radial-gradient(circle at center, #000 0.6px, transparent 1.2px);
	        mask-image: radial-gradient(circle at center, #000 0.6px, transparent 1.2px);
	-webkit-mask-size: 20px 20px;   /* dot spacing */
	        mask-size: 20px 20px;
}

/* Colour field seen THROUGH the dots — this is what animates + follows the
   cursor, so the dot colours flow while the dots stay put. A faint base tint
   keeps dots visible where the aurora is dim. */
html.dark .skyweb-darkbg__dotfield {
	position: absolute;
	inset: -30%;
	background:
		linear-gradient(rgba(150, 165, 205, 0.13), rgba(150, 165, 205, 0.13)),
		radial-gradient(36% 40% at 18% 30%, rgba(90, 130, 255, 0.42), transparent 66%),
		radial-gradient(32% 38% at 80% 24%, rgba(165, 115, 255, 0.38), transparent 66%),
		radial-gradient(44% 44% at 62% 82%, rgba(60, 220, 240, 0.34), transparent 66%),
		radial-gradient(40% 42% at 30% 88%, rgba(150, 90, 250, 0.38), transparent 68%);
	will-change: transform;
	animation: skyweb-drift 24s ease-in-out infinite alternate;
	transform: translate3d(calc(var(--sky-mx) * -12px), calc(var(--sky-my) * -12px), 0);
}

/* Fade the whole thing out toward the bottom so it never fights content. */
html.dark .skyweb-darkbg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 0%, transparent 55%, #0B0B0C 92%);
}

@keyframes skyweb-aurora {
	0%   { transform: translate3d(calc(var(--sky-mx) * -22px + -4%), calc(var(--sky-my) * -22px + -2%), 0) scale(1);    }
	50%  { transform: translate3d(calc(var(--sky-mx) * -22px + 4%),  calc(var(--sky-my) * -22px + 3%),  0) scale(1.14); }
	100% { transform: translate3d(calc(var(--sky-mx) * -22px + -2%), calc(var(--sky-my) * -22px + 4%),  0) scale(1.06); }
}

/* The dot colour field drifts (translate only — no scale, so dot spacing under
   the fixed mask never changes). */
@keyframes skyweb-drift {
	0%   { transform: translate3d(calc(var(--sky-mx) * -12px + -3%), calc(var(--sky-my) * -12px + -2%), 0); }
	50%  { transform: translate3d(calc(var(--sky-mx) * -12px + 4%),  calc(var(--sky-my) * -12px + 3%),  0); }
	100% { transform: translate3d(calc(var(--sky-mx) * -12px + -2%), calc(var(--sky-my) * -12px + 4%),  0); }
}

@media (prefers-reduced-motion: reduce) {
	html.dark .skyweb-darkbg__aurora,
	html.dark .skyweb-darkbg__dotfield { animation: none; }
}

/* Let the fixed layer show: page fills go transparent in dark mode. Sections
   and cards keep their own backgrounds; only the page base opens up. */
html.dark body,
html.dark main,
html.dark main > .min-h-full {
	background-color: transparent !important;
}