/* ============================================================ Nicci Brand-Hintergrund — animierte Sage/Peach/Sage-Soft Blobs ------------------------------------------------------------ Marken-Signatur. Standard-Hintergrund für jede Nicci-Seite. Aktivierung: Body bekommt zusätzlich zur Modul-Scope-Klasse die Klasse `nc-has-blobs`. Beispiel im Template: > Inhalt darüber muss `position: relative; z-index: 1` haben — typisch am Stage-Wrapper des Moduls (`.lp-stage`, `.wb-stage`, `.dash-stage`). Doku & Anti-Patterns: docs/design-system.md § 4. ============================================================ */ body.nc-has-blobs { position: relative; overflow-x: clip; } @property --b1x { syntax: ""; inherits: false; initial-value: 15%; } @property --b1y { syntax: ""; inherits: false; initial-value: 20%; } @property --b2x { syntax: ""; inherits: false; initial-value: 85%; } @property --b2y { syntax: ""; inherits: false; initial-value: 80%; } @property --b3x { syntax: ""; inherits: false; initial-value: 50%; } @property --b3y { syntax: ""; inherits: false; initial-value: 50%; } body.nc-has-blobs::before { content: ""; position: fixed; inset: -10%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgb(188 213 132 / 0.35), transparent 70%) var(--b1x) var(--b1y) / 55vmin 55vmin no-repeat, radial-gradient(closest-side, rgb(255 188 125 / 0.30), transparent 70%) var(--b2x) var(--b2y) / 60vmin 60vmin no-repeat, radial-gradient(closest-side, rgb(216 233 178 / 0.28), transparent 70%) var(--b3x) var(--b3y) / 45vmin 45vmin no-repeat; filter: blur(10px); opacity: 0.9; animation: nc-blob1 18s ease-in-out infinite alternate, nc-blob2 24s ease-in-out infinite alternate, nc-blob3 21s ease-in-out infinite alternate; } @keyframes nc-blob1 { 0% { --b1x: 15%; --b1y: 20%; } 100% { --b1x: 42%; --b1y: 68%; } } @keyframes nc-blob2 { 0% { --b2x: 85%; --b2y: 80%; } 100% { --b2x: 52%; --b2y: 12%; } } @keyframes nc-blob3 { 0% { --b3x: 50%; --b3y: 50%; } 100% { --b3x: 80%; --b3y: 28%; } } @media print { body.nc-has-blobs::before { display: none; } } @media (prefers-reduced-motion: reduce) { body.nc-has-blobs::before { animation: none; } }