/* Vein-Hub — layered ambient background.
   Three fixed, decorative, non-interactive layers stacked back-to-front by
   DOM order (each is a plain sibling `position: absolute` layer inside one
   `position: fixed` wrapper, so later = on top — no z-index juggling needed):

     1. .bg-layer__base  — furthest layer. A static gradient wash (no grid,
        no motion) that gives the black/greyscale palette some depth and a
        faint red bloom at the top, in keeping with the HUD/field-manual
        tone. Pure CSS gradient, painted once.
     2. .bg-layer__grid  — the structural grid. Static CSS background
        (no runtime cost).
     3. .bg-layer__glow  — the only layer that moves: a cursor-follow glow,
        animated via `transform` only (GSAP quickTo in main.js) so the
        browser can composite it on the GPU without any layout/paint work.
        Skipped entirely on touch devices and under prefers-reduced-motion
        (see @media rule + main.js gating).

   Keeping the moving piece isolated to its own layer means the base wash
   and the grid never repaint on mousemove — only the glow's compositor
   layer does.

   `.bg-layers` MUST stay at a NEGATIVE z-index, not 0. Page content
   (`<main>`, `.page-hero`, etc.) is plain `position: static` — per CSS
   paint order, an unpositioned in-flow box paints *before* a positioned
   sibling whose z-index resolves to 0, i.e. a `position: fixed; z-index: 0`
   wrapper would paint ON TOP of that static content, not behind it. This
   was invisible with the old single-layer transparent grid (thin lines,
   low opacity), but became an actual bug once `.bg-layer__base` added a
   real filled gradient: it blanked out the top of every page. `z-index: -1`
   forces this whole stacking context into the "behind everything static"
   paint step regardless of whether any given content element happens to be
   positioned. Don't change this back to 0. */

.bg-layers {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bg-layer__base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(216, 30, 44, 0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 45%);
}

.bg-layer__grid {
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.45;
}

.bg-layer__glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--red-glow) 0%, rgba(216, 30, 44, 0.08) 45%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-1000px, -1000px, 0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .bg-layer__glow { display: none; }
}