.button{text-transform:uppercase;color:var(--base-400);align-items:center;gap:.75rem;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.button:before{content:"";background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-soft));z-index:0;transition:transform .45s cubic-bezier(.4,0,.2,1);position:absolute;inset:0;transform:translateY(110%)}.button:hover:before{transform:translateY(0)}.button .button-label,.button .button-icon{z-index:1;position:relative}.button .button-label{opacity:1;visibility:visible;color:var(--base-400);-webkit-font-smoothing:antialiased;letter-spacing:-.025rem;align-items:center;min-width:0;font-family:PP Pangram Sans,sans-serif;font-size:1rem;font-weight:900;display:inline-flex;overflow:visible}.button .button-label:after{content:"";background:var(--base-400);transform-origin:100% 100%;will-change:transform;width:100%;height:.1rem;transition:transform .25s ease-out;position:absolute;bottom:-.35rem;left:0;transform:scaleX(0)}.button--dark:hover .button-label{color:#fff}.button--dark:hover .button-label:after{background:#fff}.button .button-icon{transform-style:preserve-3d;perspective:1000px;will-change:transform;flex-shrink:0;justify-content:center;align-items:center;transition:transform .6s ease-out;display:flex}.button .button-icon-inner{background-color:var(--base-400);width:1.5rem;height:1.5rem;color:var(--base-100);border-radius:10rem;justify-content:center;align-items:center;display:flex}.button--dark:hover .button-icon-inner{color:var(--brand-blue-dark);background-color:#fff}.button:hover .button-icon{animation:.8s ease-out forwards flipTwice}.button:not(:hover) .button-icon{animation:.8s ease-out forwards flipBack}@keyframes flipTwice{0%{transform:rotateY(0)}to{transform:rotateY(720deg)}}@keyframes flipBack{0%{transform:rotateY(720deg)}to{transform:rotateY(0)}}.button--light,.button--light .button-label{color:var(--base-100)}.button--light .button-label:after{background:var(--base-100)}.button--light .button-icon-inner{background-color:var(--base-100);color:var(--base-400)}@media (max-width:1000px){.button .button-label:after{display:none}.button:hover .button-icon,.button:not(:hover) .button-icon{animation:none}}