.container-vao{flex-shrink:0;justify-content:center;align-items:center;width:100%;height:220px;display:flex;position:relative}.orb{transform-origin:0 0;cursor:pointer;z-index:5;filter:drop-shadow(0 0 4px #fff)drop-shadow(0 0 12px #fff)drop-shadow(0 0 12px #9147ff4d)drop-shadow(0 0 5px #ff00004d);width:64px;height:64px;transition:all .5s cubic-bezier(.175,.885,.32,1.275);display:flex;position:absolute;top:50%;left:50%;transform:scale(1.2)translate(-50%,-50%)}.orb .ball{animation:4.2s ease-in-out infinite circle2}.orb:hover{transform:scale(1.4)translate(-50%,-50%)}.orb:active{transform:scale(1.15)translate(-50%,-50%)}.orb .icons .svg{opacity:.5}.orb:hover .icons .svg{opacity:1;filter:drop-shadow(0 0 4px #fff)}@keyframes circle2{0%{transform:scale(1.5)}15%{transform:scale(1.53)}30%{transform:scale(1.48)}45%{transform:scale(1.44)}60%{transform:scale(1.47)}85%{transform:scale(1.53)}to{transform:scale(1.5)}}.icons{color:#fff;z-index:9;flex-direction:column;transition:all .3s ease-in-out;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.icons .svg{flex-shrink:0;width:24px;height:24px;transition:all .3s ease-in-out}.ball{filter:url(#gooey);background-color:#ff0002;border-radius:50px;flex-shrink:0;width:64px;height:64px;display:flex}.container-lines{clip-path:polygon(50% 25%,65% 30%,75% 42%,75% 58%,65% 70%,50% 75%,35% 70%,26% 58%,25% 42%,35% 30%);pointer-events:none;background-image:radial-gradient(#ffffffbf 15%,#3b82f6 50%);width:100px;height:100px;animation:15s infinite animation-ball;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes animation-ball{2%{clip-path:polygon(50% 25%,50% 0,75% 42%,75% 58%,65% 70%,50% 75%,35% 70%,26% 58%,25% 42%,50% 0)}4%{clip-path:polygon(50% 25%,70% 0,75% 42%,85% 66%,65% 100%,50% 75%,35% 100%,15% 65%,25% 42%,30% 0)}6%{clip-path:polygon(50% 25%,50% 15%,75% 42%,75% 58%,65% 70%,50% 75%,35% 70%,26% 58%,25% 42%,50% 15%)}7%,59%{clip-path:polygon(50% 25%,100% 12%,75% 42%,85% 66%,65% 70%,50% 75%,35% 70%,15% 65%,25% 42%,0 12%)}9%,57%{clip-path:polygon(50% 25%,50% 0,75% 42%,75% 58%,65% 70%,50% 75%,35% 70%,26% 58%,25% 42%,50% 0)}12%,55%,61%{clip-path:polygon(50% 25%,65% 30%,75% 42%,75% 58%,65% 70%,50% 75%,35% 70%,26% 58%,25% 42%,35% 30%)}}.container-rings{aspect-ratio:1;perspective:11rem;border-radius:50%;position:absolute;inset:0}.container-rings:before,.container-rings:after{content:"";-webkit-mask-composite:xor;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;background:linear-gradient(#fff,#00f,#f0f,violet,#ffffe0) border-box;border:6px solid #0000;border-radius:50%;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-origin:padding-box,border-box;mask-origin:padding-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.container-rings:before{animation:10s linear infinite ring180}.container-rings:after{animation:10s linear infinite ring90}@keyframes ring180{0%{transform:rotateY(180deg)rotateX(180deg)rotate(180deg)}50%{transform:rotateY(360deg)rotateX(360deg)rotate(360deg)scale(1.1)}to{transform:rotateY(540deg)rotateX(540deg)rotate(540deg)}}@keyframes ring90{0%{transform:rotateY(90deg)rotateX(90deg)rotate(90deg)}50%{transform:rotateY(270deg)rotateX(270deg)rotate(270deg)scale(1.1)}to{transform:rotateY(450deg)rotateX(450deg)rotate(450deg)}}
