/* ── Animated Background — NEWKID ──────────────────────────────────────────── */

/* Disable the layout.css placeholder pseudo-element — grain is now handled
   by .nk-grain inside the animated background component. */
body::before {
	display: none;
}


/* ── Palette CSS variables ───────────────────────────────────────────────────── */
/* These are set here as defaults and overridden at runtime by animated-background.js
   via root.style.setProperty() as the user scrolls between themed sections. */

:root {
	--bg-grain-opacity: 0.62;
	--bg-orb-opacity:   0.32;

	--c1:       rgba(214, 103, 28, 0.72);
	--c1-soft:  rgba(214, 103, 28, 0.20);
	--c1-faint: rgba(214, 103, 28, 0.07);

	--c2:       rgba(32, 92, 210, 0.78);
	--c2-soft:  rgba(32, 92, 210, 0.22);
	--c2-faint: rgba(32, 92, 210, 0.08);

	--c3:       rgba(33, 150, 176, 0.62);
	--c3-soft:  rgba(33, 150, 176, 0.16);
	--c3-faint: rgba(33, 150, 176, 0.06);

	--c4:       rgba(110, 86, 204, 0.58);
	--c4-soft:  rgba(110, 86, 204, 0.17);
	--c4-faint: rgba(110, 86, 204, 0.06);

	--c5:       rgba(140, 54, 190, 0.36);
	--c5-soft:  rgba(140, 54, 190, 0.11);
	--c5-faint: rgba(140, 54, 190, 0.04);
}


/* ── Background wrapper ──────────────────────────────────────────────────────── */

.nk-animated-bg {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(circle at 50% 50%, rgba(8, 12, 18, 0.35), rgba(0, 0, 0, 1) 72%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.92), rgba(1, 1, 1, 1));
	filter: saturate(0.82) brightness(0.92);
}

.nk-animated-bg::before {
	content: '';
	position: absolute;
	inset: -10%;
	background:
		radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--c1) 25%, transparent), transparent 30%),
		radial-gradient(circle at 55% 72%, color-mix(in srgb, var(--c2) 25%, transparent), transparent 30%),
		radial-gradient(circle at 80% 22%, color-mix(in srgb, var(--c4) 22%, transparent), transparent 24%),
		radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--c3) 20%, transparent), transparent 20%);
	filter: blur(70px);
	opacity: 0.9;
}


/* ── Orbs ────────────────────────────────────────────────────────────────────── */

.nk-orb {
	position: absolute;
	width: 68vw;
	height: 68vw;
	min-width: 580px;
	min-height: 580px;
	border-radius: 50%;
	filter: blur(120px);
	opacity: var(--bg-orb-opacity);
	mix-blend-mode: screen;
	will-change: transform;
}

.nk-orb-1 {
	left: -14%;
	bottom: -20%;
	background: radial-gradient(circle, var(--c1) 0%, var(--c1-soft) 22%, var(--c1-faint) 40%, transparent 68%);
}

.nk-orb-2 {
	left: 24%;
	bottom: -18%;
	background: radial-gradient(circle, var(--c2) 0%, var(--c2-soft) 25%, var(--c2-faint) 42%, transparent 72%);
}

.nk-orb-3 {
	right: -12%;
	top: 2%;
	background: radial-gradient(circle, var(--c3) 0%, var(--c3-soft) 24%, var(--c3-faint) 42%, transparent 72%);
}

.nk-orb-4 {
	right: 8%;
	top: 10%;
	background: radial-gradient(circle, var(--c4) 0%, var(--c4-soft) 25%, var(--c4-faint) 44%, transparent 72%);
}

.nk-orb-5 {
	left: -12%;
	top: 18%;
	background: radial-gradient(circle, var(--c5) 0%, var(--c5-soft) 26%, var(--c5-faint) 42%, transparent 72%);
}


/* ── Grain ───────────────────────────────────────────────────────────────────── */

.nk-grain {
	position: absolute;
	inset: -50%;
	opacity: var(--bg-grain-opacity);
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'>\
<filter id='n'>\
<feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='4' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/>\
</filter>\
<rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/>\
</svg>");
	background-size: 170px 170px;
	mix-blend-mode: soft-light;
	animation: nk-grain-shift 0.18s steps(2) infinite;
}

.nk-grain::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.10) 0.6px, transparent 0.9px);
	background-size: 3px 3px;
	opacity: 0.18;
	mix-blend-mode: overlay;
}


/* ── Vignette ────────────────────────────────────────────────────────────────── */

.nk-vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		circle at center,
		rgba(0, 0, 0, 0) 18%,
		rgba(0, 0, 0, 0.14) 48%,
		rgba(0, 0, 0, 0.38) 72%,
		rgba(0, 0, 0, 0.82) 100%
	);
}


/* ── Grain animation ─────────────────────────────────────────────────────────── */

@keyframes nk-grain-shift {
	0%   { transform: translate(0, 0); }
	20%  { transform: translate(-1.2%, 0.8%); }
	40%  { transform: translate(0.8%, -1.1%); }
	60%  { transform: translate(-0.8%, -0.4%); }
	80%  { transform: translate(0.6%, 1%); }
	100% { transform: translate(0, 0); }
}


/* ── Content stacking ────────────────────────────────────────────────────────── */
/* The animated background sits at z-index: 0. All direct body children must be
   positioned above it. The :not() guard leaves .nk-animated-bg at z-index: 0. */

body > *:not(.nk-animated-bg):not(.site-header):not(.site-header__mobile-menu):not(.entry-about):not(.entry-media) {
	position: relative;
	z-index: 1;
}


/* ── Reduced motion ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.nk-grain {
		animation: none;
	}

	.nk-orb {
		will-change: auto;
	}
}