/* ==========================================================================
   Fixed background layers behind the page: the WebGL plexus canvas, the
   accent beam, the blueprint grid, the film grain, and the .stage that lifts
   real content above them.
   ========================================================================== */

/* ---------- atmosphere layers ---------- */
#plexus{ position:fixed; inset:0; z-index:0; display:block; }
.beam{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(56vw 42vh at 72% 8%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 68%); }
.gridlay{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.7;
  background-image:linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 20%, #000 45%, transparent 100%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 20%, #000 45%, transparent 100%); }
.grain{ position:fixed; inset:-50%; z-index:2; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 6s steps(6) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-6%,4%)} 40%{transform:translate(4%,-6%)} 60%{transform:translate(-3%,3%)} 80%{transform:translate(5%,2%)} 100%{transform:translate(0,0)} }
.stage{ position:relative; z-index:3; }