[data-marketing-depth-bg] {
	--marketing-glow-x: 50%;
	--marketing-glow-y: 28%;
	pointer-events: none;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100svh;
	z-index: 0;
	overflow: clip;
	contain: paint;
	clip-path: inset(0);
	background-color: oklch(0.985 0.006 160);
}

html.dark [data-marketing-depth-bg] {
	background-color: oklch(0.16 0.018 160);
}

[data-marketing-depth-glow] {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 70% 50% at var(--marketing-glow-x) var(--marketing-glow-y),
		oklch(0.72 0.12 155 / 0.14),
		transparent 70%
	);
}

html.dark [data-marketing-depth-glow] {
	background: radial-gradient(
		ellipse 70% 50% at var(--marketing-glow-x) var(--marketing-glow-y),
		oklch(0.62 0.12 155 / 0.16),
		transparent 70%
	);
}

[data-marketing-orb] {
	position: absolute;
	border-radius: 9999px;
	filter: blur(56px);
	transform: translateZ(0);
}

[data-marketing-orb="a"] {
	width: min(46rem, 88vw);
	height: min(46rem, 88vw);
	top: -18%;
	left: -16%;
	background: radial-gradient(
		circle at 40% 40%,
		oklch(0.78 0.14 155 / 0.42) 0%,
		oklch(0.82 0.08 160 / 0.12) 42%,
		transparent 70%
	);
}

[data-marketing-orb="b"] {
	width: min(38rem, 80vw);
	height: min(38rem, 80vw);
	top: -4%;
	right: -18%;
	background: radial-gradient(
		circle at 55% 45%,
		oklch(0.88 0.07 100 / 0.28) 0%,
		oklch(0.9 0.04 95 / 0.08) 46%,
		transparent 70%
	);
}

[data-marketing-orb="c"] {
	width: min(34rem, 72vw);
	height: min(34rem, 72vw);
	bottom: -12%;
	left: 28%;
	background: radial-gradient(
		circle at 50% 50%,
		oklch(0.7 0.11 165 / 0.26) 0%,
		oklch(0.8 0.06 160 / 0.08) 48%,
		transparent 70%
	);
}

html.dark [data-marketing-orb="a"] {
	background: radial-gradient(
		circle at 40% 40%,
		oklch(0.52 0.12 155 / 0.38) 0%,
		oklch(0.32 0.06 160 / 0.12) 46%,
		transparent 70%
	);
}

html.dark [data-marketing-orb="b"] {
	background: radial-gradient(
		circle at 55% 45%,
		oklch(0.55 0.08 95 / 0.22) 0%,
		oklch(0.28 0.04 90 / 0.08) 46%,
		transparent 70%
	);
}

html.dark [data-marketing-orb="c"] {
	background: radial-gradient(
		circle at 50% 50%,
		oklch(0.42 0.1 165 / 0.28) 0%,
		oklch(0.26 0.05 160 / 0.1) 48%,
		transparent 70%
	);
}

[data-marketing-depth-bg][data-motion="on"] [data-marketing-orb="a"] {
	animation: marketing-orb-a 22s ease-in-out infinite alternate;
}

[data-marketing-depth-bg][data-motion="on"] [data-marketing-orb="b"] {
	animation: marketing-orb-b 26s ease-in-out infinite alternate;
}

[data-marketing-depth-bg][data-motion="on"] [data-marketing-orb="c"] {
	animation: marketing-orb-c 30s ease-in-out infinite alternate;
}

@keyframes marketing-orb-a {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		transform: translate3d(6%, 8%, 0) scale(1.08);
	}
}

@keyframes marketing-orb-b {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		transform: translate3d(-8%, 10%, 0) scale(1.06);
	}
}

@keyframes marketing-orb-c {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		transform: translate3d(5%, -7%, 0) scale(1.1);
	}
}

[data-marketing-depth-grid-near],
[data-marketing-depth-grid-far] {
	position: absolute;
	inset: 0;
}

[data-marketing-depth-grid-near] {
	background-image:
		linear-gradient(to right, oklch(0.45 0.04 155 / 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, oklch(0.45 0.04 155 / 0.055) 1px, transparent 1px);
	background-size: 24px 24px;
}

html.dark [data-marketing-depth-grid-near] {
	background-image:
		linear-gradient(to right, oklch(0.78 0.04 155 / 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, oklch(0.78 0.04 155 / 0.07) 1px, transparent 1px);
}

[data-marketing-depth-grid-far] {
	opacity: 0.4;
	background-image:
		linear-gradient(to right, oklch(0.5 0.03 100 / 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, oklch(0.5 0.03 100 / 0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	background-position: 12px 12px;
}

html.dark [data-marketing-depth-grid-far] {
	background-image:
		linear-gradient(to right, oklch(0.78 0.04 100 / 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, oklch(0.78 0.04 100 / 0.055) 1px, transparent 1px);
}

[data-marketing-depth-bg][data-motion="on"] [data-marketing-depth-grid-near] {
	animation: marketing-grid-drift-near 48s linear infinite;
}

[data-marketing-depth-bg][data-motion="on"] [data-marketing-depth-grid-far] {
	animation: marketing-grid-drift-far 64s linear infinite reverse;
}

@keyframes marketing-grid-drift-near {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 24px 24px;
	}
}

@keyframes marketing-grid-drift-far {
	from {
		background-position: 12px 12px;
	}
	to {
		background-position: 36px 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-marketing-orb],
	[data-marketing-depth-grid-near],
	[data-marketing-depth-grid-far] {
		animation: none;
	}
}