.btn, a.btn { position: relative !important; overflow: hidden !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, background .35s, color .3s, border-color .3s !important; }
.btn:active { transform: scale(.96) !important; transition: transform .1s !important; }
.btn .btn-flip, a.btn .btn-flip { display: inline-flex !important; flex-direction: column !important; height: 1.2em !important; overflow: hidden !important; line-height: 1.2em !important; vertical-align: middle !important; }
.btn .btn-flip > span, a.btn .btn-flip > span { display: block !important; height: 1.2em !important; line-height: 1.2em !important; transition: transform .45s cubic-bezier(.22,1,.36,1) !important; }
.btn:hover .btn-flip > span, a.btn:hover .btn-flip > span { transform: translateY(-100%) !important; }
.btn .btn-arrow, a.btn .btn-arrow { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; transition: transform .35s cubic-bezier(.55,0,.1,1), opacity .15s ease .3s !important; }
.btn:hover .btn-arrow, a.btn:hover .btn-arrow { transform: translateX(80px) !important; opacity: 0 !important; }
.btn--primary:hover, .btn--outline:hover, .btn--white:hover, .btn--white-outline:hover { transform: translateY(-3px) !important; }
.btn--primary:hover { box-shadow: 0 20px 40px -10px rgba(109,40,217,.4) !important; }
.btn--outline:hover { box-shadow: 0 20px 40px -10px rgba(37, 99, 235,.3) !important; }
.btn--white:hover { box-shadow: 0 20px 40px -10px rgba(255,255,255,.3) !important; }
@media (prefers-reduced-motion: reduce) {
    .btn, .btn *, .btn .btn-arrow, .btn .btn-flip > span { transition: none !important; animation: none !important; transform: none !important; }
}