/* Ambient-Hintergrund für kudesi.de
   1. Stehende Ornamente als ruhige Kulisse hinter der ganzen Seite (kaum wahrnehmbar).
   2. Ruhige Animation im Kopfbereich (Hero bzw. Seitenkopf), gezeichnet von js/ambient.js.
      Sie gehört zum Kopfbereich und scrollt mit dem Inhalt mit.
   Die NeonPulse-Regel "keine Dauer-Animation auf statischen Flächen" bleibt damit gewahrt:
   Bewegung gibt es ausschließlich im Kopf, alles darunter steht still.
   Thema per <body data-ambient="stars">; ohne Attribut gilt das KI-Netz. */

/* Die Ornamente hängen an der SEITE (nicht am Bildschirm): sie scrollen mit dem Inhalt aus dem
   Bild, statt fest stehen zu bleiben, während der Text darüber gleitet. Das Muster wiederholt sich
   nach unten (ein Kachel-Abstand ≈ eine Bildschirmhöhe), damit auch lange Seiten etwas davon haben.
   body bekommt dafür position:relative (ohne z-index → kein eigener Stapelkontext, die Ebene liegt
   mit z-index:-1 weiter hinter allem Inhalt). */
body { position: relative; }
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../images/ambient-network.svg") center top / max(100%, 1100px) auto repeat-y;
  opacity: 0.06;
}
body[data-ambient="stars"]::before {
  background-image: url("../images/ambient-stars.svg");
  opacity: 0.12;
}

.r-hero,
.r-page-head {
  position: relative;
  isolation: isolate;
}
.r-hero > .container,
.r-page-head > .container {
  position: relative;
  z-index: 1;
}

.ambient-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Schwerpunkt rechts oben, wo kein Text steht; nach unten und zur Textspalte hin ausblenden. */
  -webkit-mask-image: radial-gradient(ellipse 72% 85% at 84% 32%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 72% 85% at 84% 32%, #000 0%, transparent 72%);
  opacity: 0;
  transition: opacity 1.6s var(--ease-out, ease-out);
}
.ambient-canvas.is-ready { opacity: 1; }

@media (max-width: 700px) {
  .ambient-canvas {
    -webkit-mask-image: radial-gradient(ellipse 120% 60% at 70% 22%, #000 0%, transparent 75%);
            mask-image: radial-gradient(ellipse 120% 60% at 70% 22%, #000 0%, transparent 75%);
  }
  body::before { background-position: 72% top; }
}