.animated-button{--brand-50:var(--color-brand-50);--brand-100:var(--color-brand-100);--brand-300:var(--color-brand-300);--brand-400:var(--color-brand-400);--brand-500:var(--color-brand-500);--brand-600:var(--color-brand-600);--brand-700:var(--color-brand-700);--brand-800:var(--color-brand-800);cursor:pointer;border:4px solid transparent;border-radius:100px;align-items:center;gap:4px;padding:8px 30px;font-size:16px;font-weight:600;text-decoration:none;transition:all .6s cubic-bezier(.23,1,.32,1);display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 2px #fff}.animated-button svg{z-index:9;width:24px;transition:all .8s cubic-bezier(.23,1,.32,1);position:absolute}.animated-button .arr-1{right:16px}.animated-button .arr-2{left:-25%}.animated-button .circle{opacity:0;border-radius:50%;width:20px;height:20px;transition:all .8s cubic-bezier(.23,1,.32,1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.animated-button .text{z-index:1;white-space:nowrap;transition:all .8s cubic-bezier(.23,1,.32,1);position:relative;transform:translate(-12px)}.animated-button:hover{border-radius:50px;box-shadow:0 0 0 12px transparent}.animated-button:hover .arr-1{right:-25%}.animated-button:hover .arr-2{left:16px}.animated-button:hover .text{transform:translate(12px)}.animated-button:active{scale:.95}.animated-button.is-primary{background-color:var(--brand-600);color:#fff}.animated-button.is-primary svg{fill:#fff}.animated-button.is-primary .circle{background-color:var(--brand-500)}.animated-button.is-primary:active{box-shadow:0 0 0 4px var(--brand-300)}.animated-button.is-primary:hover{color:#fff}.animated-button.is-primary:hover svg{fill:#fff}.animated-button.is-secondary{color:var(--brand-800);background-color:#fff}.animated-button.is-secondary svg{fill:var(--brand-800)}.animated-button.is-secondary .circle{background-color:var(--brand-100)}.animated-button.is-secondary:active{box-shadow:0 0 0 4px var(--brand-300)}.animated-button.is-secondary:hover{color:#212121}.animated-button.is-secondary:hover svg{fill:var(--brand-800)}.animated-button:hover .circle{opacity:1;width:120%;height:220px}.link-button:hover .arr{animation-name:transform;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes transform{0%{transform:translate(0)}50%{transform:translate(4px)}to{transform:translate(0)}}.animated-button[dir=rtl] .arr-1{left:16px;right:auto;transform:scaleX(-1)}.animated-button[dir=rtl] .arr-2{left:auto;right:-25%;transform:scaleX(-1)}.animated-button[dir=rtl]:hover .arr-1{left:-25%;right:auto}.animated-button[dir=rtl]:hover .arr-2{left:auto;right:16px}.animated-button[dir=rtl] .text{transform:translate(12px)}.animated-button[dir=rtl]:hover .text{transform:translate(-12px)}.link-button[dir=rtl] .arr{transform:scaleX(-1)translateY(2px)}@keyframes wiggle-x{0%{transform:translate(0)}50%{transform:translate(4px)}to{transform:translate(0)}}@keyframes wiggle-x-rtl{0%{transform:translate(0)scaleX(-1)translateY(2px)}50%{transform:translate(-4px)scaleX(-1)translateY(2px)}to{transform:translate(0)scaleX(-1)translateY(2px)}}.link-button:hover[dir=ltr] .arr{animation:1s linear infinite wiggle-x}.link-button:hover[dir=rtl] .arr{animation:1s linear infinite wiggle-x-rtl}
