/* ============================
   Base
============================ */

.fade-in {
    animation: fade-in .6s ease both;
}

.slide-up {
    animation: slide-up .5s ease both;
}

.slide-left {
    animation: slide-left .5s ease both;
}

.scale-in {
    animation: scale-in .35s ease both;
}

/* ============================
   Hover
============================ */

.hover-lift {
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.hover-scale {
    transition: transform var(--transition);
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* ============================
   Keyframes
============================ */

@keyframes fade-in {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

@keyframes slide-up {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes slide-left {

    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}

@keyframes scale-in {

    from {
        opacity: 0;
        transform: scale(.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}