/* ════════════════════════════════════════════════════════════════════════════
   PC-Supporter · Hintergrund „Aurora & Raster" (Variante C)
   ---------------------------------------------------------------------------
   Ersetzt den JavaScript-Canvas-Hintergrund durch reines CSS.
   Vorteile: kein JavaScript, keine Canvas-Berechnung pro Bild, geringerer
   Akkuverbrauch, läuft auf jedem Gerät identisch.

   Einbindung in preview_index.html – eine Zeile im <head>, möglichst als
   LETZTES Stylesheet (nach dem <style>-Block), damit es Vorrang hat:

       <link rel="stylesheet" href="/bg-aurora.css">

   Entfernen = diese eine Zeile löschen (der Canvas-Hintergrund ist dann
   wieder aktiv, das JavaScript dafür bleibt unangetastet).
   ════════════════════════════════════════════════════════════════════════════ */

/* Canvas-Hintergrund abschalten (JS läuft weiter, zeichnet aber unsichtbar –
   wer ihn ganz stoppen will, entfernt Block 1 im <script> der Seite). */
#bgCanvas {
  display: none !important;
}

/* Grundton – füllt auch Überscroll-Bereiche (iOS „Rubber-Band"). */
html {
  background: #0B1220;
}

/* ── Ebene 1: Aurora ──────────────────────────────────────────────────────
   Drei weiche Farbfelder in den Markenfarben über einem Navy-Verlauf.
   position: fixed statt background-attachment: fixed – das ist deutlich
   performanter und funktioniert auch auf iOS Safari zuverlässig.          */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58% 52% at 82% 12%, rgba(220, 38, 38, 0.28), transparent 60%),
    radial-gradient(54% 50% at 12% 84%, rgba(139, 92, 246, 0.26), transparent 62%),
    radial-gradient(48% 46% at 55% 48%, rgba(6, 182, 212, 0.17), transparent 66%),
    linear-gradient(165deg, #0D1524 0%, #131C31 55%, #0B1220 100%);
}

/* ── Ebene 2: Technisches Raster + Vignette ───────────────────────────────
   Feines Gitternetz, zur Mitte hin sichtbar, zu den Rändern ausgeblendet.
   Wandert sehr langsam – gibt dem Hintergrund Leben ohne Ablenkung.       */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    radial-gradient(130% 95% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.22) 100%);
  background-size: 58px 58px, 58px 58px, 100% 100%;
  -webkit-mask-image: radial-gradient(88% 78% at 50% 42%, #000 30%, rgba(0, 0, 0, 0.35) 85%);
          mask-image: radial-gradient(88% 78% at 50% 42%, #000 30%, rgba(0, 0, 0, 0.35) 85%);
  animation: pcsGridDrift 26s linear infinite;
  will-change: background-position;
}

@keyframes pcsGridDrift {
  to { background-position: 58px 58px, 58px 58px, 0 0; }
}

/* Nutzer mit reduzierter Bewegung: Raster steht still. */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

/* Auf schmalen Displays etwas engeres Raster und kräftigere Aurora,
   damit die Struktur auch auf kleinen Flächen erkennbar bleibt. */
@media (max-width: 700px) {
  body::before {
    background:
      radial-gradient(70% 45% at 85% 10%, rgba(220, 38, 38, 0.30), transparent 62%),
      radial-gradient(70% 45% at 10% 88%, rgba(139, 92, 246, 0.28), transparent 64%),
      radial-gradient(60% 40% at 50% 50%, rgba(6, 182, 212, 0.16), transparent 68%),
      linear-gradient(170deg, #0D1524 0%, #131C31 55%, #0B1220 100%);
  }
  body::after { background-size: 44px 44px, 44px 44px, 100% 100%; }
  @keyframes pcsGridDrift {
    to { background-position: 44px 44px, 44px 44px, 0 0; }
  }
}

/* Druckansicht: Hintergrund weglassen (spart Tinte, bessere Lesbarkeit). */
@media print {
  body::before, body::after { display: none; }
  html { background: #fff; }
}
