/*
 * Dalebrook Ambient Background — soft drifting brand-color glows + grain,
 * sitting behind all page content. Pure CSS, no JS, cheap to render
 * (transform/opacity only for motion; blur is applied to a handful of
 * elements once per page).
 */

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

.db-ambient__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	mix-blend-mode: screen;
	will-change: transform;
}

.db-ambient__blob--a {
	width: 520px;
	height: 520px;
	top: -160px;
	left: -120px;
	background: var(--wp--preset--color--blue-green, #25c5c9);
	opacity: 0.28;
	animation: db-ambient-float-a 24s ease-in-out infinite;
}

.db-ambient__blob--b {
	width: 620px;
	height: 620px;
	bottom: -220px;
	right: -160px;
	background: var(--wp--preset--color--patrick-blue, #1b3385);
	opacity: 0.35;
	animation: db-ambient-float-b 30s ease-in-out infinite;
}

.db-ambient__blob--c {
	width: 380px;
	height: 380px;
	top: 45%;
	left: 55%;
	background: var(--wp--preset--color--primary, #2292b1);
	opacity: 0.18;
	animation: db-ambient-float-c 34s ease-in-out infinite;
}

.db-ambient__grain {
	position: absolute;
	inset: -10%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
	opacity: 0.035;
	mix-blend-mode: overlay;
}

@keyframes db-ambient-float-a {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(70px, 50px) scale(1.08); }
}

@keyframes db-ambient-float-b {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-60px, -40px) scale(1.05); }
}

@keyframes db-ambient-float-c {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-40px, 30px) scale(1.12); }
}

@media (max-width: 782px) {
	.db-ambient__blob--a,
	.db-ambient__blob--b {
		width: 360px;
		height: 360px;
	}
	.db-ambient__blob--c {
		display: none;
	}
}

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