/* 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. */

/* Höhe 100lvh statt inset:0 — auf iOS ändert sich der Viewport beim Ein-/Ausblenden der
   Adressleiste; mit der festen "großen" Viewport-Höhe wird das Ornament dabei nicht neu skaliert. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  background: url("../images/ambient-network.svg") center / cover no-repeat;
  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% center; }
}
