@keyframes appear {
    0% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}

@keyframes hide {
    0% {
        opacity: 100%;
    }
    100% {
        opacity: 0%;
    }
}

@keyframes hide-delayed {
    0% {
        opacity: 100%;
    }
    75% {
        opacity: 100%;
    }
    100% {
        opacity: 0%;
    }
}

@keyframes appear-delayed {
    0% {
        opacity: 0%;
    }
    75% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}

/* ----------------------------------------------------------------------------- */

@keyframes appear-downward {
    0% {
        opacity: 0%;
        transform: translateY(-10rem);
    }
    100% {
        opacity: 100%;
        transform: translateY(0rem);
    }
}

@keyframes appear-upward {
    0% {
        opacity: 0%;
        transform: translateY(10rem);
    }
    100% {
        opacity: 100%;
        transform: translateY(0rem);
    }
}

@keyframes hide-upward {
    0% {
        opacity: 100%;
        transform: translateY(0rem);
    }
    100% {
        opacity: 0%;
        transform: translateY(-10rem);
    }
}

@keyframes hide-downward {
    0% {
        opacity: 100%;
        transform: translateY(0rem);
    }
    100% {
        opacity: 0%;
        transform: translateY(10rem);
    }
}

/* ----------------------------------------------------------------------------- */

@keyframes widen {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

/* ----------------------------------------------------------------------------- */