/**
 * SCL Background Scenes — Core CSS (M22.0)
 *
 * Base-Layer ist IMMER aktiv, wenn ein Scene-Container im DOM liegt.
 * JS-Modi fügen zusätzliche Layer hinzu; das Base bleibt als Fallback und
 * als Tiefen-/Gradient-Ebene aktiv.
 *
 * CSS-Custom-Properties (gesetzt inline auf .scl-scene durch SCL_Scene_Renderer):
 *   --scene-opacity            0..1
 *   --scene-intensity          0..3
 *   --scene-motion-speed       0.25..2
 *   --scene-density            0..1
 *   --scene-blur               0..60px
 *   --scene-glow               0..1
 *   --scene-contrast           0.5..2
 *   --scene-blend-mode         CSS mix-blend-mode value
 *   --scene-color-primary      #hex
 *   --scene-color-secondary    #hex
 *   --scene-color-accent       #hex
 *   --scene-color-depth        #hex
 *   --scene-mobile-reduce      0..1 (used to shrink opacity/intensity on small screens)
 */

.scl-scene {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
	opacity: var(--scene-opacity, 0.35);
	mix-blend-mode: var(--scene-blend-mode, screen);
	/* M24.4: Vorher `contain: strict` (= size + layout + paint + style).
	   Das size-Containment ist auf einem fixed-fullscreen Element bereits
	   redundant (Größe ist viewportbestimmt) und kann in manchen Browsern
	   die Compositing-Kette für nachgelagerte 3D-Transforms (z. B. Tilt
	   auf Karten) auf eine andere Layer-Promotion-Heuristik schicken.
	   `contain: layout paint` behält die Performance-Isolation, ohne den
	   3D-Render-Kontext bei Geschwister-Karten zu beeinflussen. */
	contain: layout paint;
	will-change: opacity;
}

/* M22.1: Body-Transparenz-Fix — viele Modul-Templates setzen `body { background: var(--bg) }`
   (z. B. modules/profiles/templates/creators.php). Ein opaker Body würde die Scene
   KOMPLETT verdecken. Lösung: sobald ein `.scl-scene`-Container im Dokument vorhanden ist,
   wird der Body transparent und die bg-Farbe wandert auf `html`. Damit liegt die Scene
   zwischen der html-Hintergrundfläche und den Content-Wrappern. Das CSS :has()-Feature
   wird seit 2023 in allen modernen Browsern unterstützt; alte Browser fallen
   automatisch auf den alten Body-Hintergrund zurück — Scene dort unsichtbar,
   keine Regression. */
html:not(.wp-admin):has(.scl-scene) {
	background: var(--bg, #0e0e11);
}
/* M22.7: im WP-Admin greift die Body-Transparenz NICHT — dort steht die
   Scene nur als Preview-Element im Editor, nicht als fullscreen-
   Hintergrund. Ohne :not(.wp-admin) würde die WP-Admin-UI transparent
   werden, sobald der Preview-Container rendert. */
body:not(.wp-admin):has(.scl-scene) {
	background: transparent !important;
}

/* Content muss sauber ÜBER der Scene liegen. Shell-Wrapper erhält position:relative +
   z-index:1, damit die Scene NIE Interaktion stiehlt und nie Text-Rendering beeinträchtigt.

   M24.7b: Specificity der Sibling-Regel via :where() auf 0 gesenkt. Davor
   überschrieb die Regel (Specificity 0,1,0) Geschwister-Komponenten mit
   eigener Position/z-index — z. B. die Module-Bar (.scl-mbar { position:sticky;
   z-index:98 }), die seit M24.7 als Sibling von .scl-scene innerhalb <main>
   sitzt. Folge: Module-Bar verlor Sticky-Verhalten und verlor faktisch ihre
   Klick-Schicht. Mit :where() ist die Regel jetzt ein echter „Default", der
   nur greift, wenn ein Element gar keine eigene Position/z-index trägt. */
:where(.scl-scene) ~ * {
	position: relative;
	z-index: 1;
}

.scl-scene__base {
	position: absolute;
	inset: -10%;
	background:
		radial-gradient(
			ellipse 80% 60% at 15% 20%,
			color-mix(in oklab, var(--scene-color-primary, #1e40af) 55%, transparent),
			transparent 60%
		),
		radial-gradient(
			ellipse 70% 50% at 85% 80%,
			color-mix(in oklab, var(--scene-color-secondary, #7c3aed) 55%, transparent),
			transparent 60%
		),
		radial-gradient(
			circle at 50% 50%,
			color-mix(in oklab, var(--scene-color-accent, #06b6d4) 20%, transparent),
			transparent 70%
		),
		var(--scene-color-depth, #0f172a);
	filter: blur(var(--scene-blur, 8px)) contrast(var(--scene-contrast, 1));
	animation: scl-scene-drift calc(30s / max(var(--scene-motion-speed, 1), 0.25)) ease-in-out infinite alternate;
}

.scl-scene__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

@keyframes scl-scene-drift {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(-2%, 1%, 0) scale(1.04); }
	100% { transform: translate3d(1%, -1%, 0) scale(1.02); }
}

/* Mobile reduction: schwächt die Scene auf schmalen Screens ab. */
@media (max-width: 720px) {
	.scl-scene {
		opacity: calc(var(--scene-opacity, 0.35) * var(--scene-mobile-reduce, 0.5));
	}
	.scl-scene__base {
		filter: blur(calc(var(--scene-blur, 8px) * 0.5)) contrast(var(--scene-contrast, 1));
	}
}

/* Respekt vor reduced-motion: Animation anhalten; Base-Gradient bleibt statisch sichtbar. */
@media (prefers-reduced-motion: reduce) {
	.scl-scene__base {
		animation: none;
	}
	.scl-scene__canvas {
		display: none;
	}
}

/* Print / Export: niemals Scenes auf Papier / in PDFs. */
@media print {
	.scl-scene {
		display: none !important;
	}
}