@keyframes flip-r{50%{opacity:0;transform:translate(100%)}51%{opacity:0;transform:translate(-100%)}}@keyframes flip-l{50%{opacity:0;transform:translate(-100%)}51%{opacity:0;transform:translate(100%)}}@keyframes flip-d{50%{opacity:0;transform:translateY(100%)}51%{opacity:0;transform:translateY(-100%)}}@keyframes flip-u{50%{opacity:0;transform:translateY(-100%)}51%{opacity:0;transform:translateY(100%)}}.btn{align-items:center;background-color:var(--vinaccia-dark);border:2px solid var(--off-white);border-radius:32px;cursor:pointer;display:flex;gap:6px;justify-content:center;max-width:320px;padding:calc(var(--spacer-xs)*1.5) var(--spacer-md);position:relative;transition:background-color .15s ease-out;width:100%}.btn.disabled{background-color:var(--vinaccia-dark-20);border:2px solid var(--off-white-20);pointer-events:none}.btn.disabled p{opacity:.25}.btn p{color:var(--white);line-height:2cap;overflow:hidden;position:relative;text-align:center}.btn p span{display:block;position:relative;transition:transform .15s ease-out}.btn p span:nth-child(2){align-items:center;bottom:0;color:var(--vinaccia-dark);display:flex;height:100%;justify-content:center;left:0;position:absolute;transform:translateY(calc(2cap + 2px));width:100%}@media (min-width:800px){.btn svg path{transition:stroke .15s ease-out}.btn:hover{background-color:var(--off-white);border-color:var(--vinaccia-dark);border-width:2px;position:relative}.btn:hover p span:first-child{transform:translateY(calc(-2cap - 2px))}.btn:hover p span:nth-child(2){transform:translateY(0)}.btn:hover svg path{stroke:var(--vinaccia-dark)}}.btn.invert{background-color:var(--white)}.btn.invert p{color:var(--vinaccia-dark)}