/* ===========================================================
   Beweglicher Hintergrund — übernommen aus dem Traivend-Web-Deck (traivend-crypto/kit/deck.css):
   driftende Glow-Flächen + feines Korn + aufsteigende Partikel (bg.js).
   Gleiche Datei in Money View und Trading Journal.
   =========================================================== */
#bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--c-bg);pointer-events:none;}
#app{position:relative;z-index:1;}
#login{background:transparent;}

.glow{position:absolute;border-radius:50%;will-change:transform;pointer-events:none;}
.glow-1{width:70vw;height:70vw;left:-15vw;top:-25vw;
  background:radial-gradient(circle closest-side, color-mix(in srgb, var(--c-accent) 11%, transparent) 0%, color-mix(in srgb, var(--c-accent) 5%, transparent) 38%, color-mix(in srgb, var(--c-accent) 1.3%, transparent) 68%, color-mix(in srgb, var(--c-accent) 0%, transparent) 100%);
  animation:drift-a 46s ease-in-out infinite alternate;animation-delay:-12s;}
.glow-2{width:60vw;height:60vw;right:-20vw;bottom:-25vw;
  background:radial-gradient(circle closest-side, color-mix(in srgb, var(--c-accent-2) 8.5%, transparent) 0%, color-mix(in srgb, var(--c-accent-2) 3.8%, transparent) 38%, color-mix(in srgb, var(--c-accent-2) 1%, transparent) 68%, color-mix(in srgb, var(--c-accent-2) 0%, transparent) 100%);
  animation:drift-b 58s ease-in-out infinite alternate;animation-delay:-27s;}
.glow-3{width:45vw;height:45vw;left:35vw;bottom:-20vw;
  background:radial-gradient(circle closest-side, color-mix(in srgb, var(--c-accent-3) 5.5%, transparent) 0%, color-mix(in srgb, var(--c-accent-3) 2.5%, transparent) 38%, color-mix(in srgb, var(--c-accent-3) 0.7%, transparent) 68%, color-mix(in srgb, var(--c-accent-3) 0%, transparent) 100%);
  animation:drift-c 71s ease-in-out infinite alternate;animation-delay:-40s;}

@keyframes drift-a{0%{transform:translate(0,0) scale(1);}100%{transform:translate(6%,8%) scale(1.12);}}
@keyframes drift-b{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-7%,-6%) scale(1.12);}}
@keyframes drift-c{0%{transform:translate(0,0) scale(1);}100%{transform:translate(5%,-8%) scale(1.12);}}

.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px;}

#particles{position:absolute;inset:0;display:block;width:100%;height:100%;}

/* Handy: Glow-Flächen auf Hochkant-Bildschirme anpassen */
@media (max-width:720px){
  .glow-1{width:120vw;height:120vw;left:-40vw;top:-50vw;}
  .glow-2{width:110vw;height:110vw;right:-45vw;bottom:-40vw;}
  .glow-3{width:80vw;height:80vw;left:20vw;bottom:-30vw;}
}
/* Nutzer wünscht weniger Bewegung: alles steht still */
@media (prefers-reduced-motion:reduce){
  .glow{animation:none;}
}