:root{--hx-ease:cubic-bezier(.22,1,.36,1)}
.hx-atmos{position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:-1;overflow:hidden;pointer-events:none}
.hx-atmos::before{content:"";position:absolute;inset:-20vh -20vw;background:radial-gradient(46vw 38vw at 72.9% 20%,rgba(0,111,247,.13),transparent 70%),radial-gradient(38vw 32vw at 17.1% 15.7%,rgba(124,92,255,.075),transparent 72%),radial-gradient(50vw 40vw at 28.6% 75.7%,rgba(56,189,248,.085),transparent 72%),radial-gradient(42vw 34vw at 82.9% 85.7%,rgba(0,74,187,.07),transparent 72%);will-change:translate}
.hx-atmos::after{content:"";position:absolute;inset:0;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .07 0 0 0 0 .17 0 0 0 2.2 -.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/180px 180px}
.hx-atmos-spot{display:none}
.hx-spot-on .hx-atmos-spot{display:block;position:absolute;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;translate:var(--sx,72vw) var(--sy,36vh);background:radial-gradient(circle,rgba(0,74,187,.22) 1.2px,transparent 1.7px) var(--bx,0px) var(--by,0px)/22px 22px;-webkit-mask:radial-gradient(closest-side,#000,rgba(0,0,0,.5) 50%,transparent);mask:radial-gradient(closest-side,#000,rgba(0,0,0,.5) 50%,transparent);transition:opacity .5s var(--hx-ease);will-change:translate}
.hx-spot-on.hx-spot-out .hx-atmos-spot{opacity:0}
@media (max-width:640px){
  .hx-atmos::before{background:radial-gradient(90vw 64vw at 76% 18%,rgba(0,111,247,.12),transparent 70%),radial-gradient(80vw 56vw at 14% 46%,rgba(124,92,255,.06),transparent 72%),radial-gradient(96vw 64vw at 36% 80%,rgba(56,189,248,.08),transparent 72%)}
  .hx-atmos::after{opacity:.05}
}
@media print{.hx-atmos{display:none}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .hx-atmos::before{animation:hxAtmos linear both;animation-timeline:scroll(root)}
  }
}
@keyframes hxAtmos{0%{translate:0 0}30%{translate:-18vw 5vh}60%{translate:4vw -4vh}100%{translate:-10vw 6vh}}
@keyframes hxHead{from{background-color:rgba(234,239,248,0);border-bottom-color:rgba(10,29,72,0)}}