.fx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.fx i{position:absolute;display:block;filter:blur(72px);will-change:transform}
.fx i:nth-child(1){left:-25%;top:-35%;width:95%;height:75%;background:linear-gradient(118deg,transparent 18%,rgba(47,111,235,.42) 46%,rgba(124,92,255,.26) 62%,transparent 82%);transform:rotate(-9deg);animation:fx1 20s ease-in-out infinite alternate}
.fx i:nth-child(2){right:-30%;bottom:-30%;width:90%;height:70%;background:linear-gradient(62deg,transparent 15%,rgba(36,190,255,.2) 48%,rgba(80,110,255,.2) 64%,transparent 85%);transform:rotate(7deg);animation:fx2 26s ease-in-out infinite alternate}
.fx i:nth-child(3){left:20%;top:30%;width:60%;height:40%;background:radial-gradient(closest-side,rgba(98,64,232,.14),transparent);filter:blur(90px);animation:fx3 32s ease-in-out infinite alternate}
.fx::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.3px) 0 0/30px 30px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000,transparent 75%);mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000,transparent 75%)}
.fx::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes fx1{to{transform:translate(9%,8%) rotate(-3deg)}}
@keyframes fx2{to{transform:translate(-8%,-9%) rotate(12deg)}}
@keyframes fx3{to{transform:translate(14%,-12%)}}
@media (prefers-reduced-motion:reduce){.fx i{animation:none}}

.fx i{opacity:.3}.fx::before{opacity:.5}