/*
 * The site's background layer: three drifting orbs behind a faint grid.
 *
 * One file, because this used to live in two — index.css and download.css — and the two had
 * already drifted apart: the download copy was missing the third orb entirely, so a page that
 * rendered the markup for it showed two. Every page that includes bg_decoration.php links
 * this, the panel included.
 *
 * The layer is pointer-events:none and z-index:-1, so it never intercepts a click, and it
 * reads no custom properties — the colours are fixed washes that work against both the dark
 * and the light palette (see the .light overrides below).
 */

.bg-wrap {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: -1;
}

.bg-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
	background-size: 50px 50px;
	mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black, transparent);
}

.orb {
	position: absolute;
	border-radius: 50%;
	opacity: 0.4;
	will-change: transform;
}

.orb-1 {
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
	top: -200px;
	left: -150px;
	animation: drift1 20s ease-in-out infinite;
}

.orb-2 {
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(139, 92, 246, 0.35) 0%, transparent 70%);
	bottom: -150px;
	right: -100px;
	animation: drift2 25s ease-in-out infinite;
}

.orb-3 {
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: drift3 30s ease-in-out infinite;
}

.light .bg-grid {
	background-image: linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .03) 1px, transparent 1px);
}

.light .orb {
	opacity: 0.25;
}

@keyframes drift1 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}

	50% {
		transform: translate(40px, 30px) scale(1.05);
	}
}

@keyframes drift2 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}

	50% {
		transform: translate(-40px, -30px) scale(1.08);
	}
}

@keyframes drift3 {

	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
	}

	50% {
		transform: translate(-45%, -55%) scale(1.03);
	}
}