/* =============================================================
   stars-bg.css — Oracle 3-Layer-Stars Canvas Container
   Owner-Wunsch 2026-05-13. Notbremse: window.STARS_BG_ENABLED = false.
   ============================================================= */

/* 2026-05-13 (v3): Komplett umgestellt von OracleMotion (Desktop-Canvas) auf
   OracleBrainitMotion (Three.js, 3-Layer-Galaxy mit goldDust+horizonDust+stars).
   Das ist das System das Oracle AUCH auf Mobile rendert.
   Container-Style 1:1 aus oracle-brainit.css: mix-blend-mode + saturate/brightness/contrast. */
#tm-stars-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;                    /* drüber body::before Ambient-Gradient */
  pointer-events: none;
  background: transparent;
  opacity: 0.98;
  mix-blend-mode: screen;
  filter: saturate(1.22) brightness(1.08) contrast(1.05);
  display: none;                 /* default aus — Body-Class entscheidet */
}

/* Body-Class entscheidet ob Canvas sichtbar ist (per JS gesetzt wenn Flag true). */
body.stars-bg-on #tm-stars-canvas {
  display: block;
}

/* Wenn Stars-BG an: alte BG-Layer ausblenden. PLUS body::before Ambient-Gradient
   ausblenden — der mischt sich sonst per screen-blend in die Sterne und macht
   den scharfen Effekt matschig. App-Container behält dunkles Background. */
body.stars-bg-on #tm-galaxy,
body.stars-bg-on #tm-comets,
body.stars-bg-on #tm-footballs {
  display: none !important;
}
body.stars-bg-on::before,
html.stars-bg-on body::before {
  display: none !important;
  background: none !important;
}

/* Reduced-Motion: Canvas nicht zeigen, alte BG-Layer zurück. JS verhindert
   eh den Init, aber zusätzlich CSS-Schutz für Edge-Cases. */
@media (prefers-reduced-motion: reduce) {
  body.stars-bg-on #tm-stars-canvas { display: none; }
  body.stars-bg-on #tm-galaxy,
  body.stars-bg-on #tm-comets { display: block !important; }
}