/*
INDEX:
arrow-to-left
arrow-to-right
fade-in
fade-out
slide-in
slide-out
*/

/* CLASSES for ANIMATIONS */

.animate-fade-in {
    animation: fade-in .275s cubic-bezier(0, 1, 1, 1) forwards;
}

.animate-fade-out {
    animation: fade-out .275s cubic-bezier(0, 1, 1, 1) forwards;
}

.logo-slide-in {
    animation: logo-slide-in .5s cubic-bezier(0, 1, 1, 1) forwards;
}

.logo-slide-out {
    animation: logo-slide-out .5s cubic-bezier(0, 1, 1, 1) forwards;
}

/* WIP INDICATOR */

@keyframes blink {
    0% {
        opacity: .125;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .125;
    }
}

/* LOGO */

@keyframes logo-slide-in {
    0% {
        translate: -400px 0;
    }

    100% {
        translate: 0 0;
    }
}

@keyframes logo-slide-out {
    0% {
        translate: 0 0;
    }

    100% {
        translate: -400px 0;
    }
}

/* ARROWS */

@keyframes arrow-to-left {
    0% {
        scale: 1 1;
    }

    100% {
        scale: -1 1;
    }
}

@keyframes arrow-to-right {
    0% {
        scale: -1 1;
        padding: 0 2px 3px 0;
    }

    100% {
        scale: 1 1;
        padding: 0 0 3px 8px;
    }
}

/* FADES */

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

/* SLIDES */

@keyframes slide-in {
    0% {
        right: -70px;
    }

    100% {
        right: .75rem;
    }
}

@keyframes slide-out {
    0% {
        right: .75rem;
    }

    100% {
        right: -70px;
    }
}