/* =====================================================================
   bg-fx.css: subtle animated orange glow behind the page (Noble VSL)
   Pairs with bg-fx.js. Every rule is scoped to html.bgfx-on, which bg-fx.js adds only
   when the effect is enabled (config.js: bgFx: true). Without it the page renders exactly
   as styles.css alone. Turn off: set bgFx: false in config.js, or delete the bg-fx.js
   <script> tag (this file then does nothing).
   ===================================================================== */

/* the layer: fixed, behind everything (negative z-index in the root stacking context),
   never catches clicks */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;opacity:0;transition:opacity 1.2s ease}
html.bgfx-on .bgfx{opacity:1}
@media (prefers-reduced-motion:reduce){.bgfx{transition:none}}
.bgfx__orb{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;will-change:transform;
  /* soft falloff = the "blur" (a gradient is far cheaper than filter:blur on phones) */
  background:radial-gradient(circle closest-side,rgba(255,106,0,1) 0%,rgba(255,106,0,.55) 30%,rgba(255,106,0,.18) 62%,rgba(255,106,0,0) 100%)}
.bgfx__orb--a{width:900px;height:900px;margin:-450px 0 0 -450px;opacity:.14} /* follows the mouse */
.bgfx__orb--b{width:720px;height:720px;margin:-360px 0 0 -360px;opacity:.09; /* always wanders */
  background:radial-gradient(circle closest-side,rgba(255,138,61,1) 0%,rgba(255,138,61,.5) 30%,rgba(255,138,61,.15) 62%,rgba(255,138,61,0) 100%)}
@media (max-width:859px){
  .bgfx__orb--a{width:560px;height:560px;margin:-280px 0 0 -280px}
  .bgfx__orb--b{width:460px;height:460px;margin:-230px 0 0 -230px}
}

/* let the glow show through the page-level backgrounds (cards and the form stay solid,
   so the glow never sits behind form fields or card copy) */
html.bgfx-on body,
html.bgfx-on .top,
html.bgfx-on .book,
html.bgfx-on .how{background-color:transparent}
html.bgfx-on .proof{background-color:rgba(17,17,19,.75)}   /* band stays visible, glow dimmed */
html.bgfx-on footer{background-color:rgba(11,11,12,.7)}    /* keeps the gray disclaimer >= 5.7:1 even under both orbs */