.fade-in { animation: fade-in 0.32s var(--motion-standard); }
@keyframes fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.slide-in-right { animation: slide-in-right 0.36s var(--motion-emphasized); }
@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.slide-out-left { animation: slide-out-left 0.32s var(--motion-emphasized) forwards; }
@keyframes slide-out-left {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-40px); }
}

.scale-in { animation: scale-in 0.28s var(--motion-spring); }
@keyframes scale-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

.fab-pop {
    animation: fab-pop 0.5s var(--motion-spring);
}
@keyframes fab-pop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}