/* ============================================================
   Stonkonator animated global background
   ------------------------------------------------------------
   This file is intentionally separate from app.css so normal UI
   patches do not accidentally remove the moving neon backdrop.
   It uses transform-only animations where possible to keep the
   effect smooth and reduce layout/repaint cost.
   ============================================================ */

:root {
  --bg-warp-purple: rgba(191, 0, 255, 0.34);
  --bg-warp-magenta: rgba(255, 0, 210, 0.20);
  --bg-warp-green: rgba(0, 255, 136, 0.13);
  --bg-warp-cyan: rgba(0, 229, 255, 0.10);
}

body {
  isolation: isolate;
  background:
    radial-gradient(circle at 10% 12%, rgba(191, 0, 255, 0.12), transparent 30%),
    radial-gradient(circle at 90% 82%, rgba(0, 255, 136, 0.075), transparent 26%),
    linear-gradient(135deg, #05000a 0%, #0f0020 40%, #1a0035 70%, #2b0257 100%);
  background-attachment: fixed;
}

/* Moving color field behind every page. */
body::after {
  content: '';
  position: fixed;
  inset: -34vmax;
  z-index: 0;
  pointer-events: none;
  opacity: 0.74;
  background:
    radial-gradient(circle at 17% 25%, var(--bg-warp-purple), transparent 28%),
    radial-gradient(circle at 78% 18%, var(--bg-warp-green), transparent 24%),
    radial-gradient(circle at 62% 78%, var(--bg-warp-magenta), transparent 30%),
    radial-gradient(circle at 88% 64%, rgba(105, 0, 255, 0.24), transparent 26%),
    radial-gradient(circle at 33% 76%, var(--bg-warp-cyan), transparent 22%);
  filter: blur(42px) saturate(1.35);
  transform-origin: 50% 50%;
  will-change: transform;
  animation: stonk-global-bg-warp 28s ease-in-out infinite alternate;
}

/* Keep the existing grid visible, but make it gently drift. */
body::before {
  animation: stonk-global-grid-drift 24s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* The existing orb elements are already on every page from base.html. */
.orb {
  will-change: transform, opacity;
}

.orb-1 {
  animation: stonk-orb-one 26s ease-in-out infinite alternate;
}

.orb-2 {
  animation: stonk-orb-two 31s ease-in-out infinite alternate;
}

.orb-3 {
  animation: stonk-orb-three 22s ease-in-out infinite alternate;
}

@keyframes stonk-global-bg-warp {
  0% {
    transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1.04, 0.96) skew(-4deg, 2deg);
  }
  20% {
    transform: translate3d(2%, -3%, 0) rotate(18deg) scale(0.98, 1.08) skew(3deg, -2deg);
  }
  40% {
    transform: translate3d(4%, 2%, 0) rotate(42deg) scale(1.08, 1.01) skew(-2deg, -4deg);
  }
  60% {
    transform: translate3d(-3%, 3%, 0) rotate(68deg) scale(1.02, 1.12) skew(5deg, 3deg);
  }
  80% {
    transform: translate3d(1%, -2%, 0) rotate(96deg) scale(1.12, 0.98) skew(-3deg, 4deg);
  }
  100% {
    transform: translate3d(-1%, 2%, 0) rotate(126deg) scale(1.03, 1.07) skew(4deg, -3deg);
  }
}

@keyframes stonk-global-grid-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.72;
  }
  50% {
    transform: translate3d(16px, -12px, 0) scale(1.018);
    opacity: 0.52;
  }
  100% {
    transform: translate3d(-22px, 18px, 0) scale(1.035);
    opacity: 0.78;
  }
}

@keyframes stonk-orb-one {
  0% { transform: translate3d(0, 0, 0) scale(1, 1); opacity: 0.72; }
  100% { transform: translate3d(-8vw, 7vh, 0) scale(1.22, 0.86); opacity: 0.94; }
}

@keyframes stonk-orb-two {
  0% { transform: translate3d(0, 0, 0) scale(1, 1); opacity: 0.68; }
  100% { transform: translate3d(10vw, -6vh, 0) scale(0.82, 1.24); opacity: 0.9; }
}

@keyframes stonk-orb-three {
  0% { transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1.04, 0.92); opacity: 0.72; }
  100% { transform: translate3d(-44%, -56%, 0) rotate(36deg) scale(0.84, 1.22); opacity: 1; }
}

/* Dashboard tables/charts stay readable over the moving background. */
.card,
.metric,
.table-wrap,
.tabs,
.nav,
.footer {
  backdrop-filter: blur(12px);
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .orb-1,
  .orb-2,
  .orb-3 {
    animation: none !important;
  }
}