/* ============================================================================
   Animierter Hintergrund in zwei Ebenen
   ----------------------------------------------------------------------------
   Ebene 1 (#kugeln): langsam aufsteigende Kugeln in Orange und Rot, gebaut aus
                      HTML-Elementen.
   Ebene 2 (#blut):   rote Blutkörperchen, auf eine Leinwand gezeichnet — die
                      Form entsteht im Skript, hier steht nur die Einbettung.

   Gehört zu assets/js/hintergrund.js und wird von community.html sowie den
   Bewerber-/Mitglieder-Seiten gemeinsam genutzt.
   ============================================================================ */

.kugeln, .blut {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.kugeln { z-index: -2; }
.blut   { z-index: -1; display: block; width: 100%; height: 100%; }

.kugeln span {
  position: absolute;
  top: 100vh;
  border-radius: 50%;
  /* weiche Kante über einen Verlauf statt über blur() – deutlich sparsamer */
  background: radial-gradient(circle at 50% 50%,
    var(--kern) 0%,
    var(--mitte) 42%,
    var(--rand) 68%,
    rgba(0, 0, 0, 0) 78%);
  opacity: 0;
  will-change: transform;
  animation-name: steigen;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes steigen {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  9%   { opacity: var(--deckkraft); }
  90%  { opacity: var(--deckkraft); }
  100% { transform: translate3d(0, calc(-100vh - 420px), 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kugeln span {
    animation: none;
    top: auto;
    bottom: var(--ruhelage);
    opacity: var(--deckkraft);
  }
}