/* ============================================================
   Blueprint-Hintergrund (v7.67, Δ-50, ersetzt PCB).
   Statische SVG-Komposition (siehe blobs.js), mit CSS-Animationen
   für die Bezier-Kurven (line-pulse), die Glow-Dots (atmend) und
   die Hexagon-Gruppen (langsam schwebend).
   ============================================================ */

#blob-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  isolation: isolate;
  will-change: opacity;
}

/* App-Screen (eingeloggt): Δ-50 — Hintergrund komplett aus, weißer Background.
   Animation würde beim Arbeiten stören. */
body.authed #blob-layer {
  display: none;
}
/* Login-Screen: hellblauer Background + lebendige Komposition. */
body:not(.authed) #blob-layer {
  opacity: 0.85;
}
body:not(.authed) {
  background: #d8e8f7;   /* hellblau, deutlich aber nicht zu kräftig */
}

/* App-Shell + Login-Shell: transparent, damit der Layer durchscheint */
.app-shell { background: transparent; }
.login-shell { background: transparent; }
.app-main { background: transparent; }

/* Content muss über dem Layer liegen */
.app-shell, .login-shell { position: relative; z-index: 1; }

/* ─── Pulse auf Bezier-Kurven ─────────────────────────────────────── */
@keyframes bg-line-pulse {
  0%   { stroke-dashoffset: 1000; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: 0;    opacity: 0; }
}
#blob-layer .bg-curve {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: bg-line-pulse 6s ease-in-out infinite;
}

/* ─── Glow-Dots: atmen ────────────────────────────────────────────── */
@keyframes bg-glow {
  0%, 100% { r: 3; opacity: 0.7; }
  50%       { r: 7; opacity: 1; }
}
#blob-layer .bg-glow {
  animation: bg-glow 3s ease-in-out infinite;
}

/* ─── Hexagon-Gruppen: langsam schweben ───────────────────────────── */
@keyframes bg-hex-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
#blob-layer .bg-hex-group {
  animation: bg-hex-float 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
#blob-layer .hex-float-1 { animation-delay: 0s;   }
#blob-layer .hex-float-2 { animation-delay: 1.5s; }
#blob-layer .hex-float-3 { animation-delay: 3s;   }
#blob-layer .hex-float-4 { animation-delay: 4.5s; }

/* ─── Reduced-Motion: alle Animationen aus ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #blob-layer .bg-curve,
  #blob-layer .bg-glow,
  #blob-layer .bg-hex-group {
    animation: none;
  }
  /* Kurven trotzdem sichtbar zeigen (ohne Pulse-Sweep) */
  #blob-layer .bg-curve {
    stroke-dashoffset: 0;
    opacity: 0.7;
  }
}