/* Animated background: floating circles + faint lines
   - rein CSS, kein JS
   - passt sich Light/Dark via deinen CSS-Variablen an
   - respektiert prefers-reduced-motion
*/

:root{
  /* Intensität und Bewegung feinjustieren */
  --bg-anim-opacity: .55;   /* 0.0 – 1.0 */
  --bg-anim-blur: 32px;     /* weiche Kanten */
  --bg-anim-speed: 60s;     /* Kreise */
  --bg-anim-speed2: 90s;    /* Linien */

  /* Falls die Badge-Farben noch nicht gesetzt sind, hier Fallbacks */
  --accent-conf: var(--accent);
  --accent-journal: #22c55e;
  --accent-preprint: #ef4444;
}
@media (prefers-color-scheme: dark){
  :root{
    --accent-journal: #34d399;
    --accent-preprint: #f87171;
    --bg-anim-opacity: .45; /* im Dark Mode etwas dezenter */
  }
}

/* Die Content-Layer klar über den animierten Pseudo-Layern halten */
header, .wrap { position: relative; z-index: 1; }

/* ====== Kreise (weiche Farbflecken) ======
   Mehrere radial-gradient-Layer werden sanft gedriftet.
   Farben sind an deine Accent-/Badge-Töne angelehnt. */
body::before{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  /* sechs pseudo-zufällige Bubbles */
  background:
    radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--accent) 22%, transparent) 0 130px, transparent 140px),
    radial-gradient(circle at 80% 35%, color-mix(in srgb, var(--accent-journal) 18%, transparent) 0 120px, transparent 130px),
    radial-gradient(circle at 30% 80%, color-mix(in srgb, var(--accent-preprint) 16%, transparent) 0 140px, transparent 150px),
    radial-gradient(circle at 60% 70%, color-mix(in srgb, var(--accent) 14%, transparent) 0 110px, transparent 120px),
    radial-gradient(circle at 90% 85%, color-mix(in srgb, var(--accent-preprint) 12%, transparent) 0 100px, transparent 110px),
    radial-gradient(circle at 15% 60%, color-mix(in srgb, var(--accent-journal) 12%, transparent) 0 120px, transparent 130px);
  filter: blur(var(--bg-anim-blur));
  opacity: var(--bg-anim-opacity);
  transform: translateZ(0);
  animation: float-circles var(--bg-anim-speed) linear infinite;
  /* sorgt dafür, dass es HINTER deinen Boxen liegt */
  z-index: 0;
}

@keyframes float-circles{
  0%   { background-position:  0    0,   0    0,   0    0,   0    0,   0    0,   0    0; }
  50%  { background-position:  20px -30px, -40px 20px, 30px 40px, -25px -10px, 40px 30px, -20px 10px; }
  100% { background-position:  0    0,   0    0,   0    0,   0    0,   0    0,   0    0; }
}

/* ====== Linien (feine, halbtransparente Diagonalen) ======
   Drei lineare Layer mit unterschiedlichem Raster/Drift.
   Sehr dezent, blendet weich mit dem Hintergrund. */
body::after{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    linear-gradient( 25deg, transparent 49.8%, color-mix(in srgb, var(--fg) 6%, transparent) 50%, transparent 50.2%),
    linear-gradient(115deg, transparent 49.7%, color-mix(in srgb, var(--fg) 6%, transparent) 50%, transparent 50.3%),
    linear-gradient(160deg, transparent 49.8%, color-mix(in srgb, var(--fg) 5%, transparent) 50%, transparent 50.2%);
  background-size: 160px 160px, 220px 220px, 260px 260px;
  mix-blend-mode: soft-light;
  opacity: .35;
  animation: drift-lines var(--bg-anim-speed2) linear infinite;
  z-index: 0;
}
@keyframes drift-lines{
  from { background-position:   0    0,    0     0,   0     0; }
  to   { background-position: 160px 120px, -220px 140px, 200px -180px; }
}

/* Bewegungen abschalten, falls gewünscht */
@media (prefers-reduced-motion: reduce){
  body::before, body::after { animation: none !important; }
}
@media print{
  body::before, body::after { display: none !important; }
}