:root{--color-follow-1:hsl(140,70%,55%);--color-follow-2:hsl(140,70%,45%);--color-follow-3:hsl(140,50%,30%);--color-follow-4:hsl(140,80%,75%);--color-unfollow-1:hsl(0,80%,60%);--color-unfollow-2:hsl(0,80%,50%);--color-unfollow-3:hsl(0,60%,35%);--color-unfollow-4:hsl(0,90%,75%)}.gooey-effect-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:50;filter:url(#gooey-button-filter)}.particle{width:15px;height:15px;pointer-events:none;transform-origin:center center;opacity:0;animation:move var(--time) ease-out forwards}.particle,.point{position:absolute;top:50%;left:50%;border-radius:50%;background:var(--color-bg,white)}.point{width:8px;height:8px;transform:translate(-50%,-50%);animation:scale-up-down var(--time) ease-out forwards}.gooey-effect-container.following .particle,.gooey-effect-container.following .point{background-color:var(--follow-color)}.gooey-effect-container.unfollowing .particle,.gooey-effect-container.unfollowing .point{background-color:var(--unfollow-color)}@keyframes move{0%{transform:translate(-50%,-50%) translate(var(--start-x),var(--start-y)) scale(0)}20%,80%{transform:translate(-50%,-50%) translate(var(--end-x),var(--end-y)) scale(1) rotate(var(--rotate));opacity:1}to{transform:translate(-50%,-50%) translate(var(--end-x),var(--end-y)) scale(0);opacity:0}}@keyframes scale-up-down{0%,to{transform:translate(-50%,-50%) scale(0)}20%,80%{transform:translate(-50%,-50%) scale(1)}}