/* Brand wash: white field, red and yellow drifting orbs, red particles. */

.ambient-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: #ffffff;
}

body > header,
body > main,
body > footer {
	position: relative;
	z-index: 1;
}

.ambient-bg__canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	opacity: 0.55;
}

.ambient-bg__orbs {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.ambient-bg__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
}

.ambient-bg__orb--a {
	top: -260px;
	left: -180px;
	width: 680px;
	height: 680px;
	background: radial-gradient(circle, #e30613, transparent 70%);
	opacity: 0.22;
	animation: ambient-drift-1 22s ease-in-out infinite;
}

.ambient-bg__orb--b {
	top: 30%;
	right: -240px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, #f5c400, transparent 70%);
	opacity: 0.38;
	animation: ambient-drift-2 26s ease-in-out infinite;
}

.ambient-bg__orb--c {
	bottom: -220px;
	left: 34%;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, #b8405c, transparent 70%);
	opacity: 0.2;
	animation: ambient-drift-3 30s ease-in-out infinite;
}

.ambient-bg__grain {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes ambient-drift-1 {
	0%,
	100% { transform: translate(0, 0); }
	50% { transform: translate(80px, 60px); }
}

@keyframes ambient-drift-2 {
	0%,
	100% { transform: translate(0, 0); }
	50% { transform: translate(-90px, 40px); }
}

@keyframes ambient-drift-3 {
	0%,
	100% { transform: translate(0, 0); }
	50% { transform: translate(60px, -70px); }
}

@media (max-width: 880px) {
	.ambient-bg__canvas,
	.ambient-bg__orbs {
		display: none;
	}
}

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

	.ambient-bg__canvas {
		display: none;
	}
}