/* ============================================================ */
/* POSITION THE GLOBAL BACKGROUND HOST BEHIND THE SITE WRAPPER   */
/* The host stays fixed and decorative, with no pointer capture. */
/* ============================================================ */
#kue-site-background {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.8s ease;
}

body.kue-background-ready #kue-site-background {
	opacity: 1;
}

/* ============================================================ */
/* KEEP THE SITE CONTENT AND COOKIE BANNER ABOVE THE BACKGROUND  */
/* The decorative scene must never sit above interactive content. */
/* ============================================================ */
body.kue-background-active #wrapper.site.wp-site-blocks {
	position: relative;
	z-index: 1;
}

body.kue-background-active #cmplz-cookiebanner-container {
	position: relative;
	z-index: 2;
}

/* ============================================================ */
/* DEFINE THE CORE LAYERS OF THE BACKGROUND RENDERING SHELL      */
/* Canvas, noise, and vignette layers share the same scene bounds. */
/* ============================================================ */
.kue-background-scene {
	position: absolute;
	inset: 0;
	display: block;
	isolation: isolate;
	overflow: hidden;
}

.kue-background-scene__inner,
.kue-background-canvas,
.kue-background-noise,
.kue-background-vignette {
	position: absolute;
	inset: 0;
	display: block;
}

.kue-background-scene__inner {
	background:
		radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.025), transparent 26%),
		linear-gradient(180deg, #0a0a0a 0%, #050505 50%, #020202 100%);
}

.kue-background-canvas {
	width: 100%;
	height: 100%;
}

.kue-background-noise,
.kue-background-vignette {
	pointer-events: none;
}

.kue-background-noise {
	opacity: 0.045;
	mix-blend-mode: soft-light;
	background-image: radial-gradient(rgba(255, 255, 255, 0.32) 0.7px, transparent 0.9px);
	background-size: 10px 10px;
	animation: kue-bg-grain 16s linear infinite;
}

.kue-background-vignette {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.32)),
		radial-gradient(circle at center, transparent 46%, rgba(0, 0, 0, 0.4) 100%);
}

/* ============================================================ */
/* ADJUST PREVIEW CARDS SO ADMIN THUMBNAILS STAY LIGHTER         */
/* Preview-specific treatments should not affect the live scene. */
/* ============================================================ */
.kue-background-scene--preview .kue-background-canvas {
	display: none;
}

.kue-background-scene--preview .kue-background-scene__inner {
	transform: scale(1.04);
}

.kue-background-scene--preview .kue-background-vignette {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24)),
		radial-gradient(circle at center, transparent 38%, rgba(0, 0, 0, 0.34) 100%);
}

.kue-background--preset-none {
	background: linear-gradient(180deg, #090909 0%, #070707 100%);
}

.kue-background--preset-mono-starfield {
	background:
		radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.04), transparent 20%),
		radial-gradient(circle at 18% 72%, rgba(255, 255, 255, 0.02), transparent 18%),
		linear-gradient(180deg, #0c0c0c 0%, #050505 52%, #020202 100%);
}

.kue-background--preset-particle-mesh {
	background:
		radial-gradient(circle at 25% 28%, rgba(255, 255, 255, 0.045), transparent 20%),
		linear-gradient(150deg, #0a0a0a 0%, #101010 44%, #030303 100%);
}

.kue-background--preset-prism-drift {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 14%, transparent 14% 46%, rgba(255, 255, 255, 0.02) 46% 58%, transparent 58% 100%),
		linear-gradient(160deg, #090909 0%, #0f0f0f 40%, #030303 100%);
}

.kue-background--preset-signal-rain {
	background:
		linear-gradient(135deg, transparent 0 18%, rgba(255, 255, 255, 0.06) 18% 18.4%, transparent 18.4% 22%, rgba(255, 255, 255, 0.035) 22% 22.25%, transparent 22.25% 100%),
		linear-gradient(160deg, #090909 0%, #050505 48%, #020202 100%);
}

.kue-background--preset-halo-dust {
	background:
		radial-gradient(circle at 20% 28%, rgba(255, 255, 255, 0.06), transparent 16%),
		radial-gradient(circle at 80% 22%, rgba(255, 255, 255, 0.035), transparent 14%),
		linear-gradient(180deg, #0c0c0c 0%, #060606 54%, #020202 100%);
}

.kue-background--preset-quiet-orbit {
	background:
		radial-gradient(circle at center, rgba(255, 255, 255, 0.03), transparent 26%),
		linear-gradient(180deg, #090909 0%, #050505 52%, #020202 100%);
}

.kue-background--preset-shard-veil {
	background:
		linear-gradient(125deg, rgba(255, 255, 255, 0.055) 0 8%, transparent 8% 38%, rgba(255, 255, 255, 0.025) 38% 48%, transparent 48% 100%),
		linear-gradient(165deg, #0b0b0b 0%, #111111 44%, #030303 100%);
}

.kue-background--preset-data-constellation {
	background:
		radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.04), transparent 16%),
		linear-gradient(155deg, #090909 0%, #101010 44%, #030303 100%);
}

.kue-background--preset-soft-singularity {
	background:
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.055), transparent 18%),
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.025), transparent 34%),
		linear-gradient(180deg, #090909 0%, #050505 52%, #010101 100%);
}

.kue-background--preset-cinematic-dust {
	background:
		radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.055), transparent 16%),
		radial-gradient(circle at 82% 24%, rgba(255, 255, 255, 0.03), transparent 14%),
		radial-gradient(circle at 58% 70%, rgba(255, 255, 255, 0.025), transparent 18%),
		linear-gradient(180deg, #0c0c0c 0%, #060606 50%, #020202 100%);
}

/* ============================================================ */
/* ANIMATE ONLY THE DECORATIVE GRAIN OVERLAY                     */
/* The canvas renderer handles motion; CSS only moves the grain. */
/* ============================================================ */
@keyframes kue-bg-grain {
	0% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(10px, -12px, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

/* ============================================================ */
/* REDUCE OR DISABLE PURELY DECORATIVE MOTION WHEN REQUESTED     */
/* Respect accessibility preferences without removing the theme. */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
	#kue-site-background {
		transition: none;
	}

	.kue-background-noise {
		animation: none;
	}
}

/* ============================================================ */
/* CONTROL MOBILE VISIBILITY BASED ON THE ADMIN TOGGLE           */
/* Mobile rendering stays optional and falls back safely.        */
/* ============================================================ */
@media (max-width: 1024px) {
	body:not(.kue-background-mobile-enabled) #kue-site-background {
		display: none !important;
	}

	body.kue-background-active:not(.kue-background-mobile-enabled) #wrapper.site.wp-site-blocks,
	body.kue-background-active:not(.kue-background-mobile-enabled) #cmplz-cookiebanner-container {
		position: static;
		z-index: auto;
	}
}