/* ============================================================================
   07-UTILITIES -> #ANIMATION
   ========================================================================= */

/**
 * Fade up
 */

.animation-fade-up {
    animation-direction: normal;
    animation-duration: 300ms;
    animation-fill-mode: forwards;
    animation-name: fade-up;
    animation-timing-function: var(--duration-md);
}

@keyframes fade-up {
    0% { opacity: 0; transform: translateY(150%); }
    100% { opacity: 1; transform: translateY(0); }
}


/**
 * Fade in
 */

.animation-fade-in {
    animation-direction: normal;
    animation-duration: 300ms;
    animation-fill-mode: forwards;
    animation-name: fade-in;
    animation-timing-function: var(--duration-md);
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


/**
 * Fade down
 */

.animation-fade-down {
    animation-direction: normal;
    animation-duration: 300ms;
    animation-fill-mode: forwards;
    animation-name: fade-down;
    animation-timing-function: var(--duration-md);
}

@keyframes fade-down {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(150%); }
}


/**
 * Fade out
 */

.animation-fade-out {
    animation-direction: normal;
    animation-duration: 300ms;
    animation-fill-mode: forwards;
    animation-name: fade-out;
    animation-timing-function: var(--duration-md);
}

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}