/* qbold – global animated background layer.
   Self-contained and safe to load on any page: it only adds two fixed
   pseudo-elements at z-index -1 with pointer-events:none, painting a soft,
   slowly drifting gradient behind all content. No layout, no JS, no filters.
   Easy to revert: delete this file and its two <link> references. */

:root {
  /* warm off-white base with a faint violet cast, coherent with --violet (#6d4aff) */
  --qb-bg-base: #f7f5fb;
}

/* Base + violet/lavender layer and the rosé accent layer both live on fixed,
   oversized pseudo-elements so the slow drift never exposes a hard edge. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

/* Layer 1 — opaque warm base + soft violet/lavender pools. */
body::before {
  background:
    radial-gradient(42vmax 42vmax at 22% 18%, rgba(109, 74, 255, 0.14), transparent 60%),
    radial-gradient(38vmax 38vmax at 82% 30%, rgba(139, 108, 255, 0.10), transparent 62%),
    var(--qb-bg-base);
  animation: qb-bg-drift-a 60s ease-in-out infinite alternate;
}

/* Layer 2 — transparent rosé/pink accents drifting on a longer, offset cycle. */
body::after {
  background:
    radial-gradient(40vmax 40vmax at 78% 82%, rgba(244, 114, 182, 0.10), transparent 60%),
    radial-gradient(34vmax 34vmax at 15% 88%, rgba(255, 143, 193, 0.08), transparent 62%);
  animation: qb-bg-drift-b 75s ease-in-out infinite alternate;
}

@keyframes qb-bg-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
}

@keyframes qb-bg-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.04); }
  to   { transform: translate3d(-2%, 2.5%, 0) scale(1); }
}

/* Respect reduced-motion: keep the static gradient, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
    transform: none;
  }
}

/* Print: drop the animated background entirely so pages print on their normal
   plain background. Only the background layers are affected. */
@media print {
  body::before,
  body::after {
    display: none !important;
  }
}