.orb-container{--orb-size:300px;--orb-color:hsl(var(--primary));--sparkle-color:hsl(var(--primary)/0.7);--animation-speed-factor:1;width:var(--orb-size);height:var(--orb-size);position:relative;transform-style:preserve-3d;perspective:1000px}.orb{position:relative;transform-style:preserve-3d;animation:rotate-orb calc(25s / var(--animation-speed-factor)) linear infinite;box-shadow:0 0 40px -10px var(--orb-color),inset 0 0 30px -10px var(--orb-color);background:radial-gradient(circle,transparent 30%,var(--orb-color) 100%)}.orb,.orb:after,.orb:before{width:100%;height:100%;border-radius:50%}.orb:after,.orb:before{content:"";position:absolute}.orb:before{top:0;left:0;background:radial-gradient(circle,hsla(var(--primary),.4) 0,transparent 60%);animation:pulse-core calc(4s / var(--animation-speed-factor)) ease-in-out infinite alternate}.orb:after{top:0;left:0;transform:scale(1.1);background:radial-gradient(circle,transparent 70%,hsla(var(--primary),.1) 100%);z-index:-1}.orb-inner-1,.orb-inner-2{position:absolute;width:100%;height:100%;border-radius:50%;animation:inherit;animation-timing-function:linear;transform-style:preserve-3d}.orb-inner-1:before,.orb-inner-2:before{content:"";position:absolute;top:10%;left:10%;width:80%;height:80%;border-radius:50%;border-color:hsla(0,0%,100%,.7) hsla(0,0%,100%,.7) transparent transparent;border-style:solid;border-width:2px;animation:rotate-inner calc(5s / var(--animation-speed-factor)) linear infinite;transform:rotateX(70deg) rotateY(20deg);filter:blur(1px)}.orb-inner-2:before{top:15%;left:15%;width:70%;height:70%;border-top-color:hsla(var(--primary),.6);border-right-color:hsla(var(--primary),.6);animation:rotate-inner calc(8s / var(--animation-speed-factor)) linear infinite reverse;transform:rotateX(-60deg) rotateY(-40deg)}.orb-sparks{width:130%;height:130%;top:-15%;left:-15%;transform-style:preserve-3d;animation:rotate-sparks calc(15s / var(--animation-speed-factor)) linear infinite;mask-image:radial-gradient(circle,#fff 50%,transparent 75%)}.orb-sparks,.orb-sparks:before{position:absolute;border-radius:50%}.orb-sparks:before{content:"";width:100%;height:100%;background-image:radial-gradient(1px 1px at 20% 20%,var(--sparkle-color),transparent),radial-gradient(1px 1px at 80% 30%,var(--sparkle-color),transparent),radial-gradient(1px 1px at 50% 90%,var(--sparkle-color),transparent),radial-gradient(1.5px 1.5px at 30% 70%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,var(--sparkle-color),transparent),radial-gradient(1px 1px at 10% 50%,#fff,transparent),radial-gradient(1.5px 1.5px at 90% 80%,var(--sparkle_color),transparent);transform:rotateX(80deg);animation:sparkle-flicker calc(3s / var(--animation-speed-factor)) infinite}.orb-container.listening .orb{animation-duration:calc(10s / var(--animation-speed-factor));box-shadow:0 0 60px 0 var(--orb-color),inset 0 0 40px -5px var(--orb-color)}.orb-container.listening .orb:before{animation-name:pulse-core,pulse-listening;animation-duration:calc(2s / var(--animation-speed-factor)),calc(1.5s / var(--animation-speed-factor))}.orb-container.listening .orb-sparks{animation-duration:calc(8s / var(--animation-speed-factor))}.orb-container.listening .orb-sparks:before{animation-name:sparkle-flicker,sparkle-intensify;animation-duration:calc(1s / var(--animation-speed-factor)),calc(1s / var(--animation-speed-factor))}@keyframes rotate-orb{0%{transform:rotateY(0deg) rotateX(10deg)}to{transform:rotateY(1turn) rotateX(10deg)}}@keyframes rotate-inner{0%{transform:rotateX(70deg) rotateY(0deg) rotate(0deg)}to{transform:rotateX(70deg) rotateY(1turn) rotate(1turn)}}@keyframes rotate-sparks{0%{transform:rotateY(0deg)}to{transform:rotateY(-1turn)}}@keyframes pulse-core{0%{transform:scale(.95);opacity:.8}to{transform:scale(1.05);opacity:1}}@keyframes pulse-listening{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes sparkle-flicker{0%,to{opacity:.7}50%{opacity:1}}@keyframes sparkle-intensify{0%,to{transform:rotateX(80deg) scale(1)}50%{transform:rotateX(80deg) scale(1.1);filter:brightness(1.5)}}