/* Cipher hub — 3D hero upgrade.
   Loaded after the page's inline <style>, so these win at equal specificity. */

/* The stock loop is replaced by a live scene. Kept in the DOM (not deleted)
   so reverting is one rule, not a redeploy. */
.hero video{ display:none; }

#hero3d{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
  /* fade the sphere into the page instead of ending on a hard circular edge */
  -webkit-mask-image:radial-gradient(ellipse 78% 82% at 62% 46%, #000 42%, transparent 82%);
  mask-image:radial-gradient(ellipse 78% 82% at 62% 46%, #000 42%, transparent 82%);
}

/* Protect the headline without flattening the scene: a left-weighted scrim
   plus the existing bottom fade into the page background. */
.hero .veil{
  z-index:1;
  background:
    linear-gradient(100deg, rgba(6,7,10,.94) 0%, rgba(6,7,10,.82) 38%, rgba(6,7,10,.42) 62%, rgba(6,7,10,.16) 100%),
    linear-gradient(180deg, rgba(6,7,10,.55) 0%, rgba(6,7,10,0) 26%, rgba(6,7,10,.35) 74%, var(--bg) 100%);
}

/* The two big radial glows (mint + blue) were the "AI slop" signature: an
   ambient wash of brand colour behind everything. One restrained source of
   light reads as lighting; two read as a template. */
body::before{
  background:
    radial-gradient(820px 460px at 50% -14%, rgba(43,212,168,.05), transparent 68%),
    radial-gradient(600px 320px at 88% 6%, rgba(91,140,255,.03), transparent 62%);
}

/* Hero gets a little more room now that there is a scene to look at. */
.hero .wrap{ padding-top:104px; padding-bottom:92px; }

@media (min-width:900px){
  .hero .wrap{ min-height:520px; display:flex; flex-direction:column; justify-content:center; }
}

@media (max-width:640px){
  #hero3d{ opacity:.85; }
  .hero .veil{
    background:
      linear-gradient(180deg, rgba(6,7,10,.86) 0%, rgba(6,7,10,.90) 55%, var(--bg) 100%);
  }
}