/* OneUp ShaderGradient keeps the Universe visual layer independent from theme backgrounds. */
[data-oum-hero-background-mode="shader"] {
	background: #fff !important;
	background-color: #fff !important;
	background-image: none !important;
	isolation: isolate;
}

[data-oum-hero-background-mode="shader"]::before,
[data-oum-hero-background-mode="shader"]::after,
[data-oum-hero-background-mode="shader"] .oum-hero-scroll-stage::before,
[data-oum-hero-background-mode="shader"] .oum-hero-scroll-stage::after {
	display: none !important;
}

[data-oum-hero-background-mode="shader"] .oum-hero-scroll-stage {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}

[data-oum-hero-background-mode="shader"] .oum-hero-shader {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background-color: #fff;
	background-image:
		radial-gradient(ellipse at 22% 78%, rgba(75, 243, 123, .48) 0%, rgba(75, 243, 123, .16) 24%, transparent 51%),
		radial-gradient(ellipse at 80% 24%, rgba(30, 116, 255, .38) 0%, rgba(13, 254, 250, .16) 28%, transparent 56%),
		radial-gradient(ellipse at 54% 48%, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .42) 22%, transparent 50%);
	background-size: 160% 160%, 165% 165%, 150% 150%;
	background-position: 0% 100%, 100% 0%, 50% 50%;
	background-repeat: no-repeat;
	animation: ousg-universe-fallback 16s ease-in-out infinite alternate;
}

[data-oum-hero-background-mode="shader"] .oum-hero-shader canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 1;
}

[data-oum-hero-background-mode="shader"] .oum-hero-shader-react,
[data-oum-hero-background-mode="shader"] .oum-hero-shader-react > div,
[data-oum-hero-background-mode="shader"] .oum-hero-shader-canvas {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

/* Keep the 2D renderer visible when WebGL is unavailable or fails to compile. */
[data-oum-hero-background-mode="shader"] .oum-hero-shader[data-oum-shader-status="fallback"] canvas {
	display: block;
}

[data-oum-hero-background-mode="shader"] .oum-hero-shader[data-oum-shader-status="three-pending"] .oum-hero-shader-react {
	opacity: 0;
}

[data-oum-hero-background-mode="shader"] .oum-hero-grid {
	position: relative;
	z-index: 1;
}

[data-oum-hero-background-mode="shader"] .oum-hero-copy h1,
[data-oum-hero-background-mode="shader"] .oum-hero-copy p {
	color: #111821;
}

[data-oum-hero-background-mode="shader"] .oum-hero-copy h1 span {
	color: #08b991;
}

[data-oum-hero-background-mode="shader"] .oum-hero-copy p {
	color: rgba(17, 24, 33, .78);
}

[data-oum-hero-background-mode="shader"] .oum-hero-copy .oum-button {
	background-color: #0dfefa;
	background-image: linear-gradient(135deg, #4bf37b, #0dfefa);
	color: #081311;
}

@keyframes ousg-universe-fallback {
	0% {
		background-position: 0% 100%, 100% 0%, 50% 50%;
	}

	50% {
		background-position: 28% 74%, 72% 26%, 46% 54%;
	}

	100% {
		background-position: 100% 0%, 0% 100%, 58% 42%;
	}
}