/* =========================================
   ANIMATIONS
   All @keyframes definitions
   ========================================= */

/* Simple rotation animation */
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* Typing effect animation for text */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 85%;
    }
}
@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: var(--flavorColor);
    }
}
/* Slide in from left */
@keyframes renderLeft {
    from {
        opacity: 0;
        transform: translateX(-200%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes renderRight {
    from {
        opacity: 0;
        transform: translateX(200%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes renderUp {
    from {
        opacity: 0;
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes renderDown {
    from {
        opacity: 0;
        transform: translateY(-200%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes unrenderRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(200%);
    }
}
@keyframes unrenderLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-200%);
    }
}
@keyframes unrenderDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-200%);
    }
}
@keyframes unrenderUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(200%);
    }
}
@keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes renderLeftLine {
    from {
        opacity: 0;
        width: 0;
    }
    to {
        opacity: 1;
        width: 100%;
    }
}
@keyframes unrenderLeftLine {
    from {
        opacity: 1;
        width: 100%;
    }
    to {
        opacity: 0;
        width: 0;
    }
}
@keyframes levitation {
    100% {
        transform: translateY(30%);
    }
    50% {
        transform: translateY(-30%);
    }
    0% {
        transform: translateY(30%);
    }
}
@keyframes levitationstack {
    100% {
        transform: translateY(5%);
    }
    50% {
        transform: translateY(-5%);
    }
    0% {
        transform: translateY(5%);
    }
}
@keyframes unreveal {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes progressAnimation {
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }