.btn-animated{--duration: 5s;--easing: ease-in-out;--c-color-1: oklch(.72 .12 35 / .7);--c-color-2: oklch(.85 .15 85 / .6);--c-color-3: oklch(.9 .12 95 / .7);--c-color-4: oklch(.88 .14 90 / .75);--c-color-rose-gold: oklch(.82 .12 45 / .7);--c-shadow: oklch(.85 .15 75 / .6);--c-shadow-inset-top: oklch(.92 .12 85 / .9);--c-shadow-inset-bottom: oklch(.95 .08 80 / .8);--c-radial-inner: oklch(.82 .13 70);--c-radial-outer: oklch(.9 .12 85);--c-color: oklch(.15 0 0);-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;position:relative;cursor:pointer;border:none;display:inline-flex;border-radius:24px;padding:0;margin:0;text-align:center;font-weight:600;font-size:16px;letter-spacing:.02em;line-height:1.5;color:var(--c-color);background:radial-gradient(circle,var(--c-radial-inner),var(--c-radial-outer) 80%);box-shadow:0 0 14px var(--c-shadow);transition:transform .2s ease,box-shadow .2s ease,background .3s ease}.btn-animated:hover{transform:scale(1.05);box-shadow:0 0 20px var(--c-shadow);--c-radial-inner: oklch(.85 .13 50);--c-radial-outer: oklch(.92 .11 60);--c-shadow: oklch(.88 .14 55 / .7)}.btn-animated:active{transform:scale(.98);box-shadow:0 0 10px var(--c-shadow);transition:transform .1s ease,box-shadow .1s ease,background .1s ease}.btn-animated:before{content:"";pointer-events:none;position:absolute;z-index:3;left:0;top:0;right:0;bottom:0;border-radius:24px;box-shadow:inset 0 3px 12px var(--c-shadow-inset-top),inset 0 -3px 4px var(--c-shadow-inset-bottom)}.btn-animated .btn-animated-wrapper{-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(#fff,#000);overflow:hidden;border-radius:24px;position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:.5rem}.btn-animated .btn-animated-wrapper .btn-animated-content{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;position:relative;z-index:1;white-space:nowrap}.btn-animated .btn-animated-wrapper .circle{position:absolute;left:var(--x);top:var(--y);width:40px;height:40px;border-radius:50%;filter:blur(var(--blur, 8px));background:var(--background, transparent);animation:var(--animation, none) var(--duration) var(--easing) infinite;will-change:transform;transition:filter .3s ease}.btn-animated .btn-animated-wrapper .circle.circle-1,.btn-animated .btn-animated-wrapper .circle.circle-9{--background: var(--c-color-4);transition:background .3s ease}.btn-animated:hover .btn-animated-wrapper .circle.circle-1,.btn-animated:hover .btn-animated-wrapper .circle.circle-9{--background: oklch(.85 .13 55 / .8)}.btn-animated .btn-animated-wrapper .circle.circle-10,.btn-animated .btn-animated-wrapper .circle.circle-11{--background: var(--c-color-rose-gold);--blur: 12px}.btn-animated .btn-animated-wrapper .circle.circle-3,.btn-animated .btn-animated-wrapper .circle.circle-4{--background: var(--c-color-2);--blur: 14px;transition:background .3s ease}.btn-animated:hover .btn-animated-wrapper .circle.circle-3,.btn-animated:hover .btn-animated-wrapper .circle.circle-4{--background: oklch(.88 .13 65 / .7)}.btn-animated .btn-animated-wrapper .circle.circle-5,.btn-animated .btn-animated-wrapper .circle.circle-6{--background: var(--c-color-3);--blur: 16px;transition:background .3s ease}.btn-animated:hover .btn-animated-wrapper .circle.circle-5,.btn-animated:hover .btn-animated-wrapper .circle.circle-6{--background: oklch(.91 .11 70 / .75)}.btn-animated .btn-animated-wrapper .circle.circle-2,.btn-animated .btn-animated-wrapper .circle.circle-8{--background: var(--c-color-1);--blur: 12px}.btn-animated .btn-animated-wrapper .circle.circle-7,.btn-animated .btn-animated-wrapper .circle.circle-12{--background: var(--c-color-rose-gold);--blur: 13px}.btn-animated .btn-animated-wrapper .circle.circle-1{--x: 0%;--y: -100%;--animation: circle-1;animation-delay:0s}.btn-animated .btn-animated-wrapper .circle.circle-2{--x: 46%;--y: 20%;--animation: circle-2;animation-delay:-.6s}.btn-animated .btn-animated-wrapper .circle.circle-3{--x: -6%;--y: -30%;--animation: circle-3;animation-delay:-1.2s}.btn-animated .btn-animated-wrapper .circle.circle-4{--x: 40%;--y: -30%;--animation: circle-4;animation-delay:-1.8s}.btn-animated .btn-animated-wrapper .circle.circle-5{--x: 6%;--y: -10%;--animation: circle-5;animation-delay:-2.4s}.btn-animated .btn-animated-wrapper .circle.circle-6{--x: 28%;--y: 40%;--animation: circle-6;animation-delay:-3s}.btn-animated .btn-animated-wrapper .circle.circle-7{--x: 4%;--y: 70%;--animation: circle-7;animation-delay:-3.6s}.btn-animated .btn-animated-wrapper .circle.circle-8{--x: 14%;--y: -10%;--animation: circle-8;animation-delay:-4.2s}.btn-animated .btn-animated-wrapper .circle.circle-9{--x: 10%;--y: -30%;--animation: circle-9;animation-delay:-4.8s}.btn-animated .btn-animated-wrapper .circle.circle-10{--x: 32%;--y: 40%;--animation: circle-10;animation-delay:-5.4s}.btn-animated .btn-animated-wrapper .circle.circle-11{--x: 2%;--y: 10%;--animation: circle-11;animation-delay:-6s}.btn-animated .btn-animated-wrapper .circle.circle-12{--x: 26%;--y: 10%;--animation: circle-12;animation-delay:-6.6s}@keyframes circle-1{0%,to{left:0%;top:-100%}33%{left:0%;top:40%}66%{left:6%;top:160%}}@keyframes circle-2{0%,to{left:46%;top:20%}33%{left:40%;top:-25%}66%{left:36%;top:-120%}}@keyframes circle-3{0%,to{left:-6%;top:-30%}33%{left:10%;top:30%}66%{left:6%;top:10%}}@keyframes circle-4{0%,to{left:40%;top:-30%}33%{left:38%;top:-30%}66%{left:56%;top:-20%}}@keyframes circle-5{0%,to{left:6%;top:-10%}33%{left:42%;top:70%}66%{left:20%;top:-80%}}@keyframes circle-6{0%,to{left:28%;top:40%}33%{left:14%;top:-40%}66%{left:38%;top:-140%}}@keyframes circle-7{0%,to{left:4%;top:70%}33%{left:4%;top:70%}66%{left:10%;top:-150%}}@keyframes circle-8{0%,to{left:14%;top:-10%}33%{left:16%;top:-10%}66%{left:28%;top:-50%}}@keyframes circle-9{0%,to{left:10%;top:-30%}33%{left:10%;top:-30%}66%{left:40%;top:-20%}}@keyframes circle-10{0%,to{left:32%;top:40%}33%{left:34%;top:50%}66%{left:50%;top:70%}}@keyframes circle-11{0%,to{left:2%;top:10%}33%{left:2%;top:10%}66%{left:34%;top:50%}}@keyframes circle-12{0%,to{left:26%;top:10%}33%{left:28%;top:0%}66%{left:30%;top:-80%}}.logo-animated{--duration: 5s;--easing: ease-in-out;--c-color-1: oklch(.72 .12 35 / .7);--c-color-2: oklch(.85 .15 85 / .6);--c-color-3: oklch(.9 .12 95 / .7);--c-color-4: oklch(.88 .14 90 / .75);--c-color-rose-gold: oklch(.82 .12 45 / .7);--c-shadow: oklch(.85 .15 75 / .6);--c-shadow-inset-top: oklch(.92 .12 85 / .9);--c-shadow-inset-bottom: oklch(.95 .08 80 / .8);--c-radial-inner: oklch(.82 .13 70);--c-radial-outer: oklch(.9 .12 85);position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:radial-gradient(circle,var(--c-radial-inner),var(--c-radial-outer) 80%);box-shadow:0 0 14px var(--c-shadow)}.logo-animated:before{content:"";pointer-events:none;position:absolute;z-index:3;left:0;top:0;right:0;bottom:0;border-radius:12px;box-shadow:inset 0 3px 12px var(--c-shadow-inset-top),inset 0 -3px 4px var(--c-shadow-inset-bottom)}.logo-animated .logo-animated-wrapper{-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(#fff,#000);overflow:hidden;border-radius:12px;position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.logo-animated .logo-animated-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}.logo-animated .logo-animated-wrapper .circle{position:absolute;left:var(--x);top:var(--y);width:40px;height:40px;border-radius:50%;filter:blur(var(--blur, 8px));background:var(--background, transparent);animation:var(--animation, none) var(--duration) var(--easing) infinite;will-change:transform}.logo-animated .logo-animated-wrapper .circle.circle-1,.logo-animated .logo-animated-wrapper .circle.circle-9{--background: var(--c-color-4)}.logo-animated .logo-animated-wrapper .circle.circle-10,.logo-animated .logo-animated-wrapper .circle.circle-11{--background: var(--c-color-rose-gold);--blur: 12px}.logo-animated .logo-animated-wrapper .circle.circle-3,.logo-animated .logo-animated-wrapper .circle.circle-4{--background: var(--c-color-2);--blur: 14px}.logo-animated .logo-animated-wrapper .circle.circle-5,.logo-animated .logo-animated-wrapper .circle.circle-6{--background: var(--c-color-3);--blur: 16px}.logo-animated .logo-animated-wrapper .circle.circle-2,.logo-animated .logo-animated-wrapper .circle.circle-8{--background: var(--c-color-1);--blur: 12px}.logo-animated .logo-animated-wrapper .circle.circle-7,.logo-animated .logo-animated-wrapper .circle.circle-12{--background: var(--c-color-rose-gold);--blur: 13px}.logo-animated .logo-animated-wrapper .circle.circle-1{--x: 0%;--y: -100%;--animation: circle-1;animation-delay:0s}.logo-animated .logo-animated-wrapper .circle.circle-2{--x: 46%;--y: 20%;--animation: circle-2;animation-delay:-.6s}.logo-animated .logo-animated-wrapper .circle.circle-3{--x: -6%;--y: -30%;--animation: circle-3;animation-delay:-1.2s}.logo-animated .logo-animated-wrapper .circle.circle-4{--x: 40%;--y: -30%;--animation: circle-4;animation-delay:-1.8s}.logo-animated .logo-animated-wrapper .circle.circle-5{--x: 6%;--y: -10%;--animation: circle-5;animation-delay:-2.4s}.logo-animated .logo-animated-wrapper .circle.circle-6{--x: 28%;--y: 40%;--animation: circle-6;animation-delay:-3s}.logo-animated .logo-animated-wrapper .circle.circle-7{--x: 4%;--y: 70%;--animation: circle-7;animation-delay:-3.6s}.logo-animated .logo-animated-wrapper .circle.circle-8{--x: 14%;--y: -10%;--animation: circle-8;animation-delay:-4.2s}.logo-animated .logo-animated-wrapper .circle.circle-9{--x: 10%;--y: -30%;--animation: circle-9;animation-delay:-4.8s}.logo-animated .logo-animated-wrapper .circle.circle-10{--x: 32%;--y: 40%;--animation: circle-10;animation-delay:-5.4s}.logo-animated .logo-animated-wrapper .circle.circle-11{--x: 2%;--y: 10%;--animation: circle-11;animation-delay:-6s}.logo-animated .logo-animated-wrapper .circle.circle-12{--x: 26%;--y: 10%;--animation: circle-12;animation-delay:-6.6s}
