/**
 * Solumondo Particle FX v2.0 — Canvas + CSS Ambient Layer.
 * Canvas wird via JS injiziert — kein PHP-Markup nötig.
 * KEIN min-height override — Sections behalten ihre natürliche Höhe.
 */

/* ==========================================================================
   1. Canvas-Grundregeln (JS setzt position:relative auf das Parent)
   ========================================================================== */

.solumondo-fx-canvas {
	position: absolute;
	top:    0;
	left:   0;
	right:  0;
	bottom: 0;
	z-index: 0;
	display: block;
	width:  100%;
	height: 100%;
	pointer-events: none;
	user-select: none;
	will-change: transform; /* GPU-Hint */
	/* Pixel-perfect auf Retina durch JS width/height */
}

/* Alle Geschwister-Elemente einer Section mit Canvas bleiben über ihm */
.solumondo-hero           > *:not(.solumondo-fx-canvas),
.solumondo-pw-hero        > *:not(.solumondo-fx-canvas),
.solumondo-page-hero--dark > *:not(.solumondo-fx-canvas),
.solumondo-page-hero--accent > *:not(.solumondo-fx-canvas),
.solumondo-section--dark  > *:not(.solumondo-fx-canvas),
.solumondo-footer         > *:not(.solumondo-fx-canvas),
.solumondo-bento__item--hero > *:not(.solumondo-fx-canvas),
.solumondo-path-card--b2b   > *:not(.solumondo-fx-canvas) {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   2. Positionierungskontext — nur für die Sections, die Canvase bekommen.
      JS setzt position:relative — diese Regel stellt sicher, dass es auch
      ohne JS (z.B. bei schnellen Browsern) greift.
   ========================================================================== */

body.solumondo-app .solumondo-hero,
body.solumondo-app .solumondo-pw-hero,
body.solumondo-app .solumondo-page-hero--dark,
body.solumondo-app .solumondo-page-hero--accent,
body.solumondo-app .solumondo-section--dark,
body.solumondo-app .solumondo-bento__item--hero,
body.solumondo-app .solumondo-path-card--b2b,
body.solumondo-app .solumondo-section--network {
	position: relative;
	/* isolation verhindert z-index Leakage */
	isolation: isolate;
}

/* ==========================================================================
   3. CSS Ambient-Glows — laufen OHNE Canvas (rein CSS, keine JS-Deps)
      Ergänzen den Canvas mit einem weichen, statischen Glow-Layer.
   ========================================================================== */

@keyframes sol-orb-float {
	0%   { transform: translate(  0%,   0%) scale(1.00); }
	30%  { transform: translate(  4%,  -6%) scale(1.07); }
	65%  { transform: translate( -5%,   3%) scale(0.95); }
	100% { transform: translate(  2%,  -3%) scale(1.03); }
}

/* Hero Startseite — primärer orangener Halo rechts oben */
body.solumondo-app .solumondo-hero::before {
	content: "";
	position: absolute;
	inset: auto;
	right:  -10rem;
	top:    -8rem;
	width:  min(58rem, 90vw);
	height: min(58rem, 90vw);
	border-radius: 50%;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--solumondo-orange) 20%, transparent) 0%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

/* Hero Startseite — sekundärer Navy-Halo links unten */
body.solumondo-app .solumondo-hero::after {
	content: "";
	position: absolute;
	inset: auto;
	left:   -12rem;
	bottom: -10rem;
	width:  min(48rem, 72vw);
	height: min(48rem, 72vw);
	border-radius: 50%;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--solumondo-navy) 28%, transparent) 0%,
		transparent 62%
	);
	pointer-events: none;
	z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
	body.solumondo-app .solumondo-hero::before {
		animation: sol-orb-float 22s ease-in-out infinite alternate;
	}
	body.solumondo-app .solumondo-hero::after {
		animation: sol-orb-float 28s ease-in-out infinite alternate-reverse;
	}
}

/* Produktwelten Hero */
body.solumondo-app .solumondo-pw-hero::before {
	content: "";
	position: absolute;
	inset: auto;
	top:   -12rem;
	right: -14rem;
	width:  min(64rem, 95vw);
	height: min(64rem, 95vw);
	border-radius: 50%;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--solumondo-orange) 16%, transparent) 0%,
		transparent 60%
	);
	pointer-events: none;
	z-index: 0;
}

body.solumondo-app .solumondo-pw-hero::after {
	content: "";
	position: absolute;
	inset: auto;
	bottom: -10rem;
	left:   -10rem;
	width:  min(50rem, 76vw);
	height: min(50rem, 76vw);
	border-radius: 50%;
	background: radial-gradient(
		circle,
		color-mix(in srgb, white 7%, transparent) 0%,
		transparent 58%
	);
	pointer-events: none;
	z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
	body.solumondo-app .solumondo-pw-hero::before {
		animation: sol-orb-float 26s ease-in-out infinite alternate;
	}
	body.solumondo-app .solumondo-pw-hero::after {
		animation: sol-orb-float 32s ease-in-out infinite alternate-reverse;
	}
}

/* Partner-Hero (dark) — orangener Halo */
body.solumondo-app .solumondo-page-hero--dark::before {
	content: "";
	position: absolute;
	inset: auto;
	right: -8rem;
	top:   -6rem;
	width:  min(52rem, 85vw);
	height: min(52rem, 85vw);
	border-radius: 50%;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--solumondo-orange) 22%, transparent) 0%,
		transparent 62%
	);
	pointer-events: none;
	z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
	body.solumondo-app .solumondo-page-hero--dark::before {
		animation: sol-orb-float 18s ease-in-out infinite alternate;
	}
}

/* Bento Hero-Karte */
body.solumondo-app .solumondo-bento__item--hero.solumondo-card--dark::after {
	content: "";
	position: absolute;
	inset: auto;
	right:  -3rem;
	bottom: -3rem;
	width:  min(20rem, 58%);
	height: min(20rem, 58%);
	border-radius: 50%;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--solumondo-orange) 26%, transparent) 0%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
	body.solumondo-app .solumondo-bento__item--hero.solumondo-card--dark::after {
		animation: sol-orb-float 15s ease-in-out infinite alternate;
	}
}

/* ==========================================================================
   4. Dark-Section — subtiles Dot-Grid + Ambient
   ========================================================================== */

body.solumondo-app .solumondo-section--dark {
	overflow: hidden;
	background-image:
		radial-gradient(
			ellipse 55% 45% at 75% 25%,
			color-mix(in srgb, var(--solumondo-orange) 10%, transparent),
			transparent 48%
		),
		radial-gradient(
			ellipse 40% 35% at 15% 72%,
			color-mix(in srgb, var(--solumondo-orange) 6%, transparent),
			transparent 44%
		),
		radial-gradient(circle, color-mix(in srgb, white 15%, transparent) 1px, transparent 1px);
	background-size: auto, auto, 30px 30px;
}

/* ==========================================================================
   5. Full-width override — keine Section beschränkt sich auf max-width
   ========================================================================== */

body.solumondo-app .solumondo-section,
body.solumondo-app .solumondo-section--dark,
body.solumondo-app .solumondo-section--warm,
body.solumondo-app .solumondo-section--paths,
body.solumondo-app .solumondo-section--reasons,
body.solumondo-app .solumondo-section--network {
	box-sizing: border-box;
	width: 100%;
}

/* ==========================================================================
   6. Kontrast-Toggle: bottom-offset erhöht (App-Strip darunter)
   ========================================================================== */

/* (Bereits in solumondo-contrast-system.css — keine Duplizierung) */

/* ==========================================================================
   7. Reduced Motion — alles statisch
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.solumondo-fx-canvas { display: none; }

	body.solumondo-app .solumondo-hero::before,
	body.solumondo-app .solumondo-hero::after,
	body.solumondo-app .solumondo-pw-hero::before,
	body.solumondo-app .solumondo-pw-hero::after,
	body.solumondo-app .solumondo-page-hero--dark::before,
	body.solumondo-app .solumondo-bento__item--hero.solumondo-card--dark::after {
		animation: none !important;
	}
}