/* One button motion for the whole dashboard: calm at rest; on hover or touch the button lifts and its
   icon makes the move that belongs to its job. */

:where(.btn, .cap-btn, .till-jbtn, .till-journal-more, .acct-pill-btn) {
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), filter .25s, box-shadow .25s;
}

:where(.btn, .cap-btn, .till-jbtn, .till-journal-more, .acct-pill-btn):hover:not(:disabled) {
    transform: translateY(-3px);
    filter: brightness(1.06);
}

:where(.btn, .cap-btn, .till-jbtn, .till-journal-more, .acct-pill-btn):active:not(:disabled) {
    transform: scale(.96);
}

:where(.btn, .cap-btn, .till-jbtn, .till-journal-more, .acct-pill-btn) > i.ti {
    display: inline-block;
}

:where(.btn, .cap-btn, .till-jbtn, .till-journal-more, .acct-pill-btn):hover:not(:disabled) > :is(.ti-circle-plus, .ti-plus) {
    animation: bm-turn .5s cubic-bezier(.22, 1, .36, 1);
}

:where(.btn, .cap-btn, .till-jbtn, .till-journal-more, .acct-pill-btn):hover:not(:disabled) > .ti-printer {
    animation: bm-paper .7s ease-in-out;
}

:where(.btn, .cap-btn, .till-jbtn, .till-journal-more, .acct-pill-btn):hover:not(:disabled) > .ti-file-spreadsheet {
    animation: bm-wig .7s ease-in-out;
}

:where(.btn, .cap-btn, .till-jbtn, .till-journal-more, .acct-pill-btn):hover:not(:disabled) > :is(.ti-check, .ti-circle-check) {
    animation: bm-pop .5s cubic-bezier(.22, 1, .36, 1);
}

:where(.btn, .cap-btn, .till-jbtn, .till-journal-more, .acct-pill-btn):hover:not(:disabled) > :is(.ti-trash, .ti-x) {
    animation: bm-shake .5s;
}

:where(.btn, .cap-btn, .till-jbtn, .till-journal-more, .acct-pill-btn):hover:not(:disabled) > :is(.ti-coin, .ti-cash, .ti-cash-banknote, .ti-currency-afghani) {
    animation: bm-flip .8s cubic-bezier(.22, 1, .36, 1);
}

:where(.btn, .cap-btn, .till-jbtn, .till-journal-more, .acct-pill-btn):hover:not(:disabled) > :is(.ti-chevrons-down, .ti-chevron-down) {
    animation: bm-down .7s ease-in-out infinite;
}

@keyframes bm-turn { to { transform: rotate(180deg) scale(1.15); } }
@keyframes bm-paper { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes bm-wig { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 70% { transform: rotate(14deg); } }
@keyframes bm-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes bm-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px) rotate(-8deg); } 75% { transform: translateX(3px) rotate(8deg); } }
@keyframes bm-flip { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes bm-down { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
    :where(.btn, .cap-btn, .till-jbtn, .till-journal-more, .acct-pill-btn):hover > i.ti { animation: none !important; }
}