/* Ambient parallax background — a fixed, decorative layer behind every page.
   Sits at z-index:-1, so it paints ABOVE the body's base canvas/gradient (components.css) and BEHIND all
   content (.view is transparent; the topbar is translucent), giving the app depth without hurting
   readability. Palette-matched to tokens.css: gold-forward, with MTG blue/violet/green glows.
   Pointer-events:none + aria-hidden — purely cosmetic. Parallax is added by js/background.js (transform
   on scroll); with JS off it degrades to a beautiful static field. */

.bg-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

/* Soft colored light blooms. Low opacity so text over transparent areas stays legible. */
.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  will-change: transform;
}
.bg-glow--gold {
  /* the brand accent (tokens --gold #f0c674), upper-left and the most present */
  top: 3%;
  left: -8%;
  width: 740px;
  height: 740px;
  background: radial-gradient(circle, rgba(240, 198, 116, 0.13) 0%, rgba(240, 198, 116, 0) 60%);
}
.bg-glow--blue {
  /* tokens --blue #7cc0ff, mid-right */
  top: 38%;
  right: -14%;
  width: 880px;
  height: 880px;
  background: radial-gradient(circle, rgba(124, 192, 255, 0.10) 0%, rgba(124, 192, 255, 0) 60%);
}
.bg-glow--violet {
  /* MTG black pip --b #a294c4, lower-left */
  top: 72%;
  left: -8%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(162, 148, 196, 0.12) 0%, rgba(162, 148, 196, 0) 60%);
}
.bg-glow--green {
  /* tokens --green #86d98f, faint base glow up top-centre */
  top: -14%;
  left: 50%;
  width: 1040px;
  height: 1040px;
  margin-left: -520px;
  background: radial-gradient(circle, rgba(134, 217, 143, 0.07) 0%, rgba(134, 217, 143, 0) 62%);
}

/* Faint engineering grid — cool slate, masked to a soft oval so it has no hard edges. */
.bg-grid {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 120%;
  height: 160%;
  background-image:
    linear-gradient(rgba(124, 140, 168, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 140, 168, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 24%, #000 28%, transparent 78%);
  mask-image: radial-gradient(120% 80% at 50% 24%, #000 28%, transparent 78%);
  will-change: transform;
}

/* Finer dot field, the fastest-moving plane (foreground depth). */
.bg-dots {
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 180%;
  background-image: radial-gradient(rgba(167, 173, 184, 0.16) 1.2px, transparent 1.2px);
  background-size: 46px 46px;
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(100% 60% at 50% 50%, #000 18%, transparent 72%);
  mask-image: radial-gradient(100% 60% at 50% 50%, #000 18%, transparent 72%);
  will-change: transform;
}

/* Edge vignette to settle the corners into the dark canvas. */
.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 100% at 50% 42%, transparent 52%, rgba(0, 0, 0, 0.5) 100%);
}