/* patch-glow.css
   Ruhiger, dezenter "Glow / Blur / Farbverlauf-Spiel" auf dem Body.
   Lädt sich idealerweise NACH patch.css (oder alternativ direkt nach deinem Basis-CSS).

   Hinweis:
   - Sehr bewusst dezent gehalten (keine harten Farben, keine hektische Bewegung).
   - Respektiert prefers-reduced-motion.
*/

:root{
  --glow-a: rgba(52,152,219,.12);
  --glow-b: rgba(155,89,182,.10);
  --glow-c: rgba(46,204,113,.07);
  --glow-d: rgba(241,196,15,.06);

  --glow-blur: 26px;
  --glow-opacity: .85;

  /* Bewegungsgeschwindigkeit (höher = ruhiger) */
  --glow-drift-s: 34s;
  --glow-drift-s-2: 48s;
}

/* Dark Mode: weniger grell, mehr Tiefe */
html[data-theme="dark"]{
  --glow-a: rgba(122,162,255,.14);
  --glow-b: rgba(203,166,247,.10);
  --glow-c: rgba(152,251,152,.06);
  --glow-d: rgba(255,215,0,.05);
  --glow-opacity: .70;
  --glow-blur: 32px;
}

/* Grundvoraussetzung */
body{
  position: relative;
  overflow-x: hidden;
}

/* Layer 1: weiche Lichtflächen */
body::before{
  content:"";
  position: fixed;
  inset: -35%;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(60% 45% at 18% 18%, var(--glow-a), transparent 62%),
    radial-gradient(55% 40% at 82% 22%, var(--glow-b), transparent 64%),
    radial-gradient(70% 55% at 42% 86%, var(--glow-c), transparent 64%),
    radial-gradient(45% 35% at 78% 78%, var(--glow-d), transparent 68%);

  filter: blur(var(--glow-blur));
  opacity: var(--glow-opacity);
  transform: translate3d(0,0,0) scale(1.02);
  animation: glow-drift var(--glow-drift-s) cubic-bezier(.2,.8,.2,1) infinite alternate;
  will-change: transform, opacity, filter;
}

/* Layer 2: ganz leichte "Aurora"-Welle */
body::after{
  content:"";
  position: fixed;
  inset: -40%;
  z-index: -3;
  pointer-events: none;

  background:
    conic-gradient(from 200deg at 50% 50%,
      rgba(255,255,255,0) 0deg,
      rgba(255,255,255,.035) 55deg,
      rgba(255,255,255,0) 110deg,
      rgba(255,255,255,.025) 180deg,
      rgba(255,255,255,0) 260deg,
      rgba(255,255,255,.03) 330deg,
      rgba(255,255,255,0) 360deg);

  mix-blend-mode: soft-light;
  filter: blur(calc(var(--glow-blur) * 0.9));
  opacity: .55;
  transform: translate3d(0,0,0) scale(1.08);
  animation: glow-aurora var(--glow-drift-s-2) cubic-bezier(.2,.8,.2,1) infinite alternate;
  will-change: transform, opacity;
}

/* Leichte Vignette für Tiefe (liegt hinter Content, aber über dem Glow) */
.main::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(70% 60% at 50% 15%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(85% 70% at 50% 100%, rgba(0,0,0,.06), transparent 55%);
  opacity: .6;
}
html[data-theme="dark"] .main::before{
  background:
    radial-gradient(70% 60% at 50% 15%, rgba(255,255,255,.03), transparent 55%),
    radial-gradient(85% 70% at 50% 100%, rgba(0,0,0,.20), transparent 55%);
  opacity: .75;
}

@keyframes glow-drift{
  from{ transform: translate3d(-1.2%, -0.9%, 0) scale(1.02); }
  to  { transform: translate3d( 1.2%,  1.1%, 0) scale(1.05); }
}

@keyframes glow-aurora{
  from{ transform: translate3d(1.0%, -0.6%, 0) rotate(-2deg) scale(1.08); opacity: .45; }
  to  { transform: translate3d(-1.0%, 0.9%, 0) rotate(2deg) scale(1.10); opacity: .62; }
}

/* Motion Safety */
@media (prefers-reduced-motion: reduce){
  body::before, body::after, .main::before{
    animation: none !important;
    transform: none !important;
  }
}