/* PD ambient background: two very faint brand-colour glows that drift slowly behind the page.
   Transform/opacity only, so it stays on the compositor. Sections that paint the base colour
   are made transparent by ambient.js so the layer shows through. */
body.pd-ambient::before,
body.pd-ambient::after {
	content: "";
	position: fixed;
	z-index: -1;
	pointer-events: none;
	width: 90vmax;
	height: 90vmax;
	border-radius: 50%;
	will-change: transform;
}

body.pd-ambient::before {
	top: -45vmax;
	left: -30vmax;
	background: radial-gradient(closest-side, rgba(91, 155, 255, 0.10), rgba(91, 155, 255, 0) 100%);
	animation: pd-ambient-a 70s ease-in-out infinite alternate;
}

body.pd-ambient::after {
	bottom: -50vmax;
	right: -35vmax;
	background: radial-gradient(closest-side, rgba(46, 196, 214, 0.075), rgba(46, 196, 214, 0) 100%);
	animation: pd-ambient-b 90s ease-in-out infinite alternate;
}

@keyframes pd-ambient-a {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(14vw, 10vh, 0) scale(1.08); }
	100% { transform: translate3d(6vw, 22vh, 0) scale(0.96); }
}

@keyframes pd-ambient-b {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(-12vw, -14vh, 0) scale(1.1); }
	100% { transform: translate3d(-20vw, -4vh, 0) scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
	body.pd-ambient::before,
	body.pd-ambient::after {
		animation: none;
	}
}