/* ============================================================================
   QuestLog Animated Background — styles for the injected layers.
   The whole stack is fixed and sits BEHIND your app (z-index:-1).
   Make sure your app's own background is transparent so this shows through.
   ============================================================================ */
.qlbg-root {
  position: fixed;
  inset: 0;
  z-index: -1;            /* behind all app content */
  overflow: hidden;
  pointer-events: none;   /* never intercepts clicks */
  background: #0b1022;     /* fallback while the tile loads */
}

.qlbg-root > * { position: absolute; }

.qlbg-tiles {
  inset: -40px;           /* oversized so parallax never reveals an edge */
  image-rendering: pixelated;
  background-repeat: repeat;
  will-change: transform;
}

.qlbg-fog {
  inset: -20%;
  opacity: 0.5;
  background:
    radial-gradient(40% 30% at 20% 30%, rgba(120,140,200,0.10), transparent 70%),
    radial-gradient(45% 35% at 80% 70%, rgba(120,140,200,0.08), transparent 70%);
  animation: qlbg-fog 26s ease-in-out infinite alternate;
}
@keyframes qlbg-fog {
  0%   { transform: translate(-2%, -1%) scale(1.05); }
  100% { transform: translate(3%, 2%) scale(1.12); }
}

.qlbg-particles { inset: 0; }

.qlbg-glow {
  inset: 0;
  mix-blend-mode: screen;
}

.qlbg-vignette { inset: 0; }

.qlbg-scan {
  inset: 0;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 4px);
}

/* ----------------------------------------------------------------------------
   Scoped dimming (body.qlbg-dim) — used on the dashboard so the busy tile
   pattern recedes behind the gold-on-navy UI instead of competing with it.
   Desaturates + darkens the tiles, then lays a navy wash + center vignette so
   the middle (where content lives) is calmest. Light marketing pages opt out.
   ---------------------------------------------------------------------------- */
body.qlbg-dim .qlbg-tiles {
  filter: saturate(0.45) brightness(0.42);
}
body.qlbg-dim .qlbg-root::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 38%, transparent 38%, rgba(8, 12, 28, 0.6) 100%),
    linear-gradient(180deg, rgba(10, 15, 34, 0.5), rgba(10, 15, 34, 0.66));
}

/* Respect reduced-motion: freeze fog (JS also reads this via media query if you add it) */
@media (prefers-reduced-motion: reduce) {
  .qlbg-fog { animation: none; }
}