/* ============================================================
     Palette sampled directly from body-bg.jpg
     base navy #0c1231 · deepest corner #090e29 · glow core #1c4a84
     ============================================================ */
     :root{
      --navy-void:  #070b21;
      --navy-deep:  #090e29;
      --navy-base:  #0c1231;
      --navy-mid:   #0e1436;
      --navy-lift:  #0e1a40;
      --blue-glow:  #16365f;
      --blue-core:  #1c4a84;
      --violet:     107, 60, 224;
      --cyan:        96, 206, 240;
    }
   
    *{ margin:0; padding:0; box-sizing:border-box; }
   
    html, body{
      background: var(--navy-base);
      z-index: 1;
      position: relative;
    }
   
    .stage{
        position: fixed;
        width: 100vw;
        height: 100vh;
        height: 100%;
        overflow: hidden;
        isolation: isolate;
        background: var(--navy-base);
        top: 0;
        left: 0;
        z-index: -1;
    }
   
    /* ---- 1. the field: body-bg.jpg rebuilt as layered gradients ---- */
    .field{
      position:absolute;
      inset:0;
      background:
        /* corner falloff, bottom-left then top-left */
        radial-gradient(90% 70% at 3% 100%,  rgba(6,9,26,.88) 0%, rgba(6,9,26,0) 62%),
        radial-gradient(85% 62% at 0% 2%,    rgba(7,11,33,.80) 0%, rgba(7,11,33,0) 60%),
        /* hot centre of the right-hand glow */
        radial-gradient(46% 34% at 93% 66%,  rgba(34,104,175,.34) 0%, rgba(20,56,102,0) 72%),
        /* the glow's wide halo */
        radial-gradient(115% 88% at 97% 67%, rgba(28,84,148,.62) 0%, rgba(21,58,104,.34) 32%,
                                             rgba(14,28,66,.13) 56%, rgba(12,18,49,0) 78%),
        /* the underlying navy wash */
        linear-gradient(158deg, var(--navy-deep) 0%, #0d1333 40%,
                                var(--navy-mid) 60%, var(--navy-base) 100%);
    }
   
    /* ---- 2. the diagonal sweep that cuts down from top-centre ---- */
    .sweep{
      position:absolute;
      left:-32%; top:-42%;
      width:164%; height:184%;
      transform: rotate(-26deg);
      filter: blur(72px);
      background: linear-gradient(90deg,
        rgba(19,34,79,0)   0%,
        rgba(23,42,96,.42) 38%,
        rgba(27,50,112,.58) 50%,
        rgba(23,42,96,.40) 62%,
        rgba(19,34,79,0)  100%);
    }
   
    /* ---- 3. the orb ---------------------------------------------
       The falloff is a gaussian, exp(-5r²), written out as twelve
       stops. That is what a blur would have produced, except it is
       resolved once at paint time instead of every frame, so the
       only per-frame work left is a composited transform. The grain
       layer above dithers away any banding in the ramp.
       ------------------------------------------------------------- */
    .orb{
      position:absolute;
      left:0; top:0;
      width:60vmax; height:60vmax;      /* JS overrides with a pixel value */
      opacity:.26;                      /* inside the 0.15–0.30 band */
      mix-blend-mode: screen;
      will-change: transform;
      pointer-events:none;
    }
    .lobe{
      position:absolute;
      inset:0;
      will-change: opacity;
    }
    .lobe--violet{
      background: radial-gradient(ellipse 48% 48% at 46% 44%,
        rgba(var(--violet),.950)   0%,
        rgba(var(--violet),.917) 8.3%,
        rgba(var(--violet),.826)16.7%,
        rgba(var(--violet),.693)  25%,
        rgba(var(--violet),.542)33.3%,
        rgba(var(--violet),.395)41.7%,
        rgba(var(--violet),.268)  50%,
        rgba(var(--violet),.168)58.3%,
        rgba(var(--violet),.097)66.7%,
        rgba(var(--violet),.051)  75%,
        rgba(var(--violet),.023)83.3%,
        rgba(var(--violet),.008)91.7%,
        rgba(var(--violet),0)    100%);
    }
    .lobe--cyan{
      background: radial-gradient(ellipse 41% 41% at 58% 60%,
        rgba(var(--cyan),.800)   0%,
        rgba(var(--cyan),.773) 8.3%,
        rgba(var(--cyan),.696)16.7%,
        rgba(var(--cyan),.584)  25%,
        rgba(var(--cyan),.457)33.3%,
        rgba(var(--cyan),.333)41.7%,
        rgba(var(--cyan),.225)  50%,
        rgba(var(--cyan),.142)58.3%,
        rgba(var(--cyan),.082)66.7%,
        rgba(var(--cyan),.043)  75%,
        rgba(var(--cyan),.020)83.3%,
        rgba(var(--cyan),.007)91.7%,
        rgba(var(--cyan),0)    100%);
    }
   
    /* ---- 4. film grain, tiled once by the SVG pattern ---- */
    .grain{
      position:absolute;
      inset:0;
      width:100%; height:100%;
      opacity:.05;
      mix-blend-mode: overlay;
      pointer-events:none;
    }
   
    /* ---- 5. final vignette to seat everything back into the dark ---- */
    .vignette{
      position:absolute;
      inset:0;
      pointer-events:none;
      background: radial-gradient(130% 110% at 50% 45%,
        rgba(7,11,33,0) 42%, rgba(7,11,33,.42) 82%, rgba(7,11,33,.72) 100%);
    }
   
    /* ---- content sits on top; empty by design ---- */
    .content{
      position:relative;
      z-index:2;
      width:100%; height:100%;
    }
   
    @media (prefers-reduced-motion: reduce){
      .orb{ transition:none; }
    }