/* =========================================================
   HOLO FRAMEWORK — Background
   Statischer Verlauf + atmender Kern + Licht-Ping

   Die beiden Verläufe (#bg-base, #bg-breath) sind Canvas-Elemente und
   werden von js/core/BackgroundGlow.js mit Dithering gezeichnet – als
   CSS-Verlauf zeigen so dunkle Töne sichtbare Ringe (Banding).
   ========================================================= */

/* =========================================================
   BASIS-VERLAUF (sehr dunkel, mit einem Hauch Teal)
   ========================================================= */

#bg-base {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
}

/* =========================================================
   ATMENDER KERN (Licht hinter dem Orbit)
   Atmet alle 12 Sekunden sanft heller / dunkler.
   ========================================================= */

#bg-breath {
  position: fixed;
  left: 50%;
  top: 45%;
  width: 90vmin;
  height: 90vmin;
  margin-left: -45vmin;
  margin-top: -45vmin;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;

  display: block;

  animation: bgBreath 12s ease-in-out infinite;
  will-change: opacity, transform;
}

@keyframes bgBreath {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

/* =========================================================
   LICHT-PING (alle 8 Sekunden ein Impuls vom Zentrum)
   ========================================================= */

#bg-ping {
  position: fixed;
  left: 50%;
  top: 45%;
  width: 0;
  height: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;

  box-shadow:
    0 0 60px 20px rgba(92, 160, 171, 0.14),
    0 0 120px 40px rgba(63, 138, 150, 0.06);

  animation: bgPing 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  will-change: transform, opacity;
}

@keyframes bgPing {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  6% {
    transform: scale(0.15);
    opacity: 0.9;
  }
  45% {
    transform: scale(1.2);
    opacity: 0.2;
  }
  70%, 100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* =========================================================
   STERNENHIMMEL (Canvas, gezeichnet von js/core/StarField.js)
   Über Verlauf, Kern und Ping – unter Scanlines und Inhalt.
   ========================================================= */

#bg-stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {
  #bg-breath {
    width: 100vmin;
    height: 100vmin;
    margin-left: -50vmin;
    margin-top: -50vmin;
  }

  #bg-ping {
    box-shadow:
      0 0 40px 12px rgba(92, 160, 171, 0.12),
      0 0 80px 24px rgba(63, 138, 150, 0.05);
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  #bg-breath,
  #bg-ping {
    animation: none !important;
    opacity: 0.5;
  }
}