/* Site background motion.
   Every animation below runs on transform only, so the compositor can move the
   layers without repainting them on each scroll frame. */
html{background:#f3f6fb}
body{position:relative;isolation:isolate;min-height:100vh;overflow-x:hidden;background:transparent!important}
body:before,body:after{content:"";position:fixed;z-index:-2;pointer-events:none;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
body:before{inset:-18%;background:radial-gradient(circle at 8% 24%,#7358ed20 0,transparent 22%),radial-gradient(circle at 92% 18%,#2d91ed22 0,transparent 24%),radial-gradient(circle at 82% 82%,#7358ed17 0,transparent 25%),radial-gradient(circle at 16% 88%,#2d91ed17 0,transparent 22%),linear-gradient(120deg,#f7f8fc 0,#eef3fb 48%,#f7f8fc 100%);background-size:120% 120%;background-position:50% 50%;animation:siteBackdropDrift 22s ease-in-out infinite alternate}
body:after{z-index:-1;inset:-60px;background-image:radial-gradient(circle,#6a73a21a 1px,transparent 1.4px),linear-gradient(115deg,transparent 0 41%,#ffffff5c 48%,transparent 55% 100%);background-size:32px 32px,260% 100%;background-position:0 0,50% 0;opacity:.7;animation:siteDotsDrift 36s linear infinite}
.container:before,.container:after{content:"";position:fixed;z-index:-1;width:190px;height:520px;border:1px solid #5f72cf1a;border-radius:50%;pointer-events:none;will-change:transform;backface-visibility:hidden}
.container:before{left:-120px;top:18%;box-shadow:0 0 0 38px #5d68d208,0 0 0 76px #5d68d205;animation:siteSideFloatLeft 13s ease-in-out infinite}
.container:after{right:-115px;bottom:5%;box-shadow:0 0 0 42px #258add08,0 0 0 84px #258add05;animation:siteSideFloatRight 15s ease-in-out infinite}
@keyframes siteBackdropDrift{0%{transform:translate3d(-2%,-1%,0) scale(1)}100%{transform:translate3d(2%,1.5%,0) scale(1.04)}}
@keyframes siteDotsDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(32px,32px,0)}}
@keyframes siteSideFloatLeft{0%,100%{transform:translate3d(0,-20px,0) rotate(-8deg)}50%{transform:translate3d(0,90px,0) rotate(8deg)}}
@keyframes siteSideFloatRight{0%,100%{transform:translate3d(0,30px,0) rotate(7deg)}50%{transform:translate3d(0,-75px,0) rotate(-7deg)}}
/* Phones and small tablets keep the look but pay nothing for it while scrolling. */
@media(max-width:900px){
  body:before,body:after,.container:before,.container:after{animation:none!important;will-change:auto}
  body:after{inset:0;background-size:25px 25px,280% 100%;opacity:.45}
  .container:before,.container:after{width:110px;height:330px;opacity:.6}
}
@media(prefers-reduced-motion:reduce){
  body:before,body:after,.container:before,.container:after{animation:none!important;will-change:auto}
}