/* onyx-riss.css — Risse und Magma auf den Bedien-Flächen der Optik Onyx (Nr. 982, Entwurf docs/konzept/designsystem/knopf-onyx-6.html).
   js/mf-onyx.js setzt in jede Bedien-Fläche EINE Ebene .onyx-riss mit drei Lagen: (1) .onyx-magma — Lava-Kacheln, die langsam driften und unregelmäßig pulsieren;
   (2) canvas.onyx-deck — tiefschwarzer Onyx mit durchsichtig ausgeschnittenen Rissen (einmal gezeichnet), das Magma ist nur durch die Risse zu sehen;
   (3) canvas.onyx-schein — Glühen der Rissränder, Deckkraft pulst mit dem Magma.
   Leistung: es bewegen sich nur transform und opacity (GPU), nie background-position oder Pixel; pro Fläche kein JS-Takt. Magma und Schein sind je Riss nur so groß wie der Riss samt Hof (nicht flächendeckend). prefers-reduced-motion: alles steht, Risse glimmen ruhig.
   Farben: nur Tokens (--onyx-*). Die Ebene liegt hinter dem Inhalt (z-index -1 im eigenen Stapel der Fläche) und fängt nie einen Tipp. */

html[data-optik="onyx"] [data-onyx~="riss"] { isolation: isolate; }
:where(html[data-optik="onyx"] [data-onyx~="lage"]) { position: relative; }   /* Spezifität 0: jede echte position-Regel der Fläche gewinnt */

/* Die Ebene füllt die Fläche. Bei scrollenden Flächen (Blatt, Fenster mit overflow) hängt sie als sticky-Rahmen ohne Höhe am oberen Rand und bleibt beim Scrollen stehen. */
.onyx-riss { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: inherit; contain: strict; }
.onyx-riss--haftet { position: sticky; inset: auto; top: 0; left: 0; width: 100%; height: 0; overflow: visible; contain: none; flex: 0 0 0; margin: 0; padding: 0; }
.onyx-riss--haftet > .onyx-riss-innen { position: absolute; left: 0; top: 0; overflow: hidden; border-radius: inherit; }
.onyx-riss-innen { position: absolute; inset: 0; overflow: hidden; contain: strict; }
.onyx-riss canvas { position: absolute; left: 0; top: 0; }
/* Die Ebene endet am Innenrand der Fläche, die Randzone malt die Fläche selbst: Deckel und Risse laufen darum sanft aus statt hart zu enden (Nr. 1199) */
.onyx-riss-innen { --riss-aus: var(--sp-3); -webkit-mask-image: linear-gradient(90deg, transparent, black var(--riss-aus), black calc(100% - var(--riss-aus)), transparent), linear-gradient(180deg, transparent, black var(--riss-aus), black calc(100% - var(--riss-aus)), transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, black var(--riss-aus), black calc(100% - var(--riss-aus)), transparent), linear-gradient(180deg, transparent, black var(--riss-aus), black calc(100% - var(--riss-aus)), transparent); mask-composite: intersect; }
.onyx-deck { width: 100%; height: 100%; }

/* Magma: zwei Kacheln, um genau eine Kachelbreite größer als die Fläche, gleiten per transform um genau eine Kachelperiode (nahtlose Schleife) */
.onyx-magma { position: absolute; overflow: hidden; isolation: isolate; background: var(--onyx-magma-grund); }   /* Größe und Lage setzt mf-onyx.js je Riss (nur dort bewegt sich etwas) */
.onyx-magma::before, .onyx-magma::after { content: ''; position: absolute; will-change: transform; background-image: var(--onyx-bild-magma); }
.onyx-magma::before { left: -440px; top: -440px; right: 0; bottom: 0; background-size: 440px 440px; animation: onyx-drift-a var(--ta, 130s) linear infinite; }
.onyx-magma::after { left: 0; top: 0; right: -300px; bottom: -300px; background-size: 300px 300px; mix-blend-mode: screen; opacity: .85; filter: brightness(1.15) saturate(1.1);
    animation: onyx-drift-b var(--tb, 90s) linear infinite, onyx-puls var(--p, 9s) ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1), calc(var(--d, 0s) * -1); }
@keyframes onyx-drift-a { from { transform: translate(0, 0); } to { transform: translate(440px, 440px); } }
@keyframes onyx-drift-b { from { transform: translate(0, 0); } to { transform: translate(-300px, -300px); } }
/* Puls: unregelmäßig — zwei Anstiege verschiedener Höhe, ein kurzes Nachglimmen */
@keyframes onyx-puls { 0% { opacity: .55; } 17% { opacity: .95; } 31% { opacity: .66; } 46% { opacity: .78; } 62% { opacity: 1; } 74% { opacity: .6; } 86% { opacity: .72; } 100% { opacity: .55; } }
.onyx-schein { mix-blend-mode: screen; animation: onyx-schein-puls var(--p, 9s) ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes onyx-schein-puls { 0% { opacity: .5; } 17% { opacity: .95; } 31% { opacity: .62; } 46% { opacity: .75; } 62% { opacity: 1; } 74% { opacity: .55; } 86% { opacity: .68; } 100% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
    .onyx-magma::before, .onyx-magma::after, .onyx-schein { animation: none; will-change: auto; }
    .onyx-magma::after { opacity: .75; }
    .onyx-schein { opacity: .72; }
}
/* Die erste Zeichnung blendet weich ein (die Fläche ist bis dahin schon Onyx); spätere Neuzeichnungen (Größe, Inhalt) ohne Blinken */
.onyx-riss--neu { animation: onyx-erscheint .7s ease-out; }
@keyframes onyx-erscheint { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .onyx-riss--neu { animation: none; } }
/* Fenster im Hintergrund (Tab nicht sichtbar) oder am Rand des Bildschirms: nichts zu tun, der Browser pausiert unsichtbare Animationen von selbst. */