:root {
	--bg-angle: 180deg;

	--g1x: 18%;
	--g1y: 18%;
	--g1a: 0.06;

	--g2x: 82%;
	--g2y: 22%;
	--g2a: 0.06;

	--g3x: 56%;
	--g3y: 90%;
	--g3a: 0.05;

	--g4x: 22%;
	--g4y: 64%;
	--g4a: 0.05;

	--shine: 0.05;
}

/*
  Live background (dark gray base + subtle yellow/blue/red shimmer)
  Safe to include on any page: no pseudo-elements used.
*/
body {
	background:
		radial-gradient(900px 520px at var(--g1x) var(--g1y), rgba(255, 255, 255, var(--shine)), transparent 70%),
		radial-gradient(820px 520px at var(--g2x) var(--g2y), rgba(255, 255, 255, calc(var(--shine) * 0.85)), transparent 72%),
		radial-gradient(1100px 760px at var(--g1x) var(--g1y), rgba(245, 158, 11, var(--g1a)), transparent 72%),
		radial-gradient(980px 680px at var(--g2x) var(--g2y), rgba(37, 99, 235, var(--g2a)), transparent 72%),
		radial-gradient(920px 640px at var(--g3x) var(--g3y), rgba(220, 38, 38, var(--g3a)), transparent 74%),
		radial-gradient(760px 560px at var(--g4x) var(--g4y), rgba(245, 158, 11, calc(var(--g4a) * 0.8)), transparent 74%),
		linear-gradient(var(--bg-angle), #0a0a0a 0%, #1a1a1a 55%, #0a0a0a 100%);

	background-size: 220% 220%;
	background-attachment: fixed;
	animation: live-bg-shift 18s ease-in-out infinite alternate;
}

/* Remove legacy per-page background overlays for consistency */
body::before,
body::after {
	content: none !important;
}

@keyframes live-bg-shift {
	0% {
		background-position:
			18% 22%,
			82% 18%,
			0% 10%,
			100% 0%,
			45% 100%,
			12% 72%,
			0 0;
	}
	50% {
		background-position:
			22% 26%,
			78% 22%,
			55% 55%,
			38% 18%,
			60% 78%,
			28% 64%,
			0 0;
	}
	100% {
		background-position:
			26% 18%,
			74% 26%,
			100% 85%,
			20% 42%,
			70% 20%,
			10% 58%,
			0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body {
		animation: none;
	}
}