body{background-color:#000;overflow:hidden;display:flex;align-items:center;height:100vh}.scene{position:relative;width:100%;height:100%;--scene-angle: 18deg;perspective:2000px;transform-style:preserve-3d}.orbit{position:absolute;width:min(100vw,100vh);height:min(100vw,100vh);left:50%;top:50%;margin-left:calc(min(100vw,100vh)/-2);margin-top:calc(min(100vw,100vh)/-2)}.orbit--1{opacity:.9;transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg);animation:orbit-1 20s 0s linear infinite}@keyframes orbit-1{0%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}50%{transform:scale(0.35) translate3d(100%, 0px, 0px) rotateX(870deg) rotateY(870deg)}100%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}}.orbit--2{opacity:.8;transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg);animation:orbit-2 20s 0.14s linear infinite}@keyframes orbit-2{0%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}50%{transform:scale(0.35) translate3d(100%, 0px, 0px) rotateX(870deg) rotateY(870deg)}100%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}}.orbit--3{opacity:.7;transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg);animation:orbit-3 20s 0.28s linear infinite}@keyframes orbit-3{0%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}50%{transform:scale(0.35) translate3d(100%, 0px, 0px) rotateX(870deg) rotateY(870deg)}100%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}}.orbit--4{opacity:.6;transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg);animation:orbit-4 20s 0.42s linear infinite}@keyframes orbit-4{0%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}50%{transform:scale(0.35) translate3d(100%, 0px, 0px) rotateX(870deg) rotateY(870deg)}100%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}}.orbit--5{opacity:.5;transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg);animation:orbit-5 20s 0.56s linear infinite}@keyframes orbit-5{0%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}50%{transform:scale(0.35) translate3d(100%, 0px, 0px) rotateX(870deg) rotateY(870deg)}100%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}}.orbit--6{opacity:.4;transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg);animation:orbit-6 20s 0.7s linear infinite}@keyframes orbit-6{0%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}50%{transform:scale(0.35) translate3d(100%, 0px, 0px) rotateX(870deg) rotateY(870deg)}100%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}}.orbit--7{opacity:.3;transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg);animation:orbit-7 20s 0.84s linear infinite}@keyframes orbit-7{0%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}50%{transform:scale(0.35) translate3d(100%, 0px, 0px) rotateX(870deg) rotateY(870deg)}100%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}}.orbit--8{opacity:.2;transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg);animation:orbit-8 20s 0.98s linear infinite}@keyframes orbit-8{0%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}50%{transform:scale(0.35) translate3d(100%, 0px, 0px) rotateX(870deg) rotateY(870deg)}100%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}}.orbit--9{opacity:.1;transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg);animation:orbit-9 20s 1.12s linear infinite}@keyframes orbit-9{0%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}50%{transform:scale(0.35) translate3d(100%, 0px, 0px) rotateX(870deg) rotateY(870deg)}100%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}}.orbit--10{opacity:0;transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg);animation:orbit-10 20s 1.26s linear infinite}@keyframes orbit-10{0%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}50%{transform:scale(0.35) translate3d(100%, 0px, 0px) rotateX(870deg) rotateY(870deg)}100%{transform:scale(0.35) translate3d(-100%, 0px, 0px) rotateX(0deg) rotateY(10deg)}}.ring{width:100%;height:100%;background:conic-gradient(from 0deg, rgba(130, 90, 255, 0.22), rgb(255, 234, 0), rgba(130, 90, 255, 0.25), rgba(163, 0, 141, 0.85), rgba(130, 90, 255, 0.22));mask:radial-gradient(circle, transparent 0 49%, #000 49.5% 50%, transparent 50.5%);animation:ring-highlight 3s linear infinite}.ring-middle-glow{width:100%;height:100%;background:radial-gradient(circle at center, transparent 42%, rgba(255, 0, 98, 0.95) 50%, transparent 54%);opacity:.25;transform:scale(1.02) translateZ(2px)}.ring,.ring-middle-glow{position:absolute;border-radius:50%}@keyframes ring-highlight{to{transform:rotateZ(360deg)}}