/**
 * Animierter Hintergrund: Farbverlauf + schwebende Lichtflecken (Blobs).
 * Rein dekorativ, keine Interaktion. Nutzt die Farbvariablen aus style.css.
 * Die Atem-Kreise (früher hier als "Halo" mit fixer Animation) stecken
 * jetzt in assets/css/breathing-circles.css, da sie live von
 * assets/js/breathing-engine.js gesteuert werden.
 *
 * Siehe MANUAL.md, Abschnitt "Hintergrund anpassen".
 */

/* -- Farbverlauf, der sich sehr langsam über den ganzen Bildschirm bewegt -- */
body{
  background: linear-gradient(120deg, var(--bg-1), var(--bg-2), var(--bg-3), var(--bg-4));
  background-size: 340% 340%;
  animation: driftBackground 75s ease-in-out infinite;
}

@keyframes driftBackground{
  0%   { background-position: 0% 30%; }
  25%  { background-position: 60% 70%; }
  50%  { background-position: 100% 40%; }
  75%  { background-position: 40% 90%; }
  100% { background-position: 0% 30%; }
}

/* -- Schwebende, unscharfe Lichtflecken hinter dem Text -- */
.field{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.blob{
  position: absolute;
  filter: blur(60px);
  opacity: 0.35;
  border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
  mix-blend-mode: screen;
  will-change: transform, border-radius;
}

/* Blob-Farben folgen den Paletten-Variablen (--gold/--mist/--accent aus
   assets/css/palettes.css), damit ein Paletten-Wechsel auch hier greift. */
.blob-a{
  width: 46vw; height: 46vw;
  left: -12vw; top: -10vw;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--gold) 55%, transparent), transparent 70%);
  animation: floatA 46s ease-in-out infinite;
}

.blob-b{
  width: 55vw; height: 55vw;
  right: -18vw; bottom: -20vw;
  background: radial-gradient(circle at 60% 60%, color-mix(in srgb, var(--mist) 50%, transparent), transparent 70%);
  animation: floatB 58s ease-in-out infinite;
}

.blob-c{
  width: 30vw; height: 30vw;
  right: 8vw; top: 6vw;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%);
  animation: floatC 64s ease-in-out infinite;
}

@keyframes floatA{
  0%,100% { transform: translate(0,0) scale(1); border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; }
  50%     { transform: translate(4vw, 5vw) scale(1.08); border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; }
}
@keyframes floatB{
  0%,100% { transform: translate(0,0) scale(1); border-radius: 55% 45% 35% 65% / 50% 55% 45% 50%; }
  50%     { transform: translate(-5vw, -4vw) scale(1.1); border-radius: 40% 60% 55% 45% / 60% 45% 55% 40%; }
}
@keyframes floatC{
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-3vw, 4vw) scale(0.9); }
}