/* GENERAL ANIMATION SETTINGS */

.animate-top-left, .reverse-animate-top-left,
.animate-top-right, .reverse-animate-top-right,
.animate-bottom-left, .reverse-animate-bottom-left,
.animate-bottom-right, .reverse-animate-bottom-right{
    animation-fill-mode: forwards;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}

/* HOVER ANIMATION */

@keyframes hover{
    0%{
        transform: translateY(0);
        /* some code */
    }
    50%{
        transform: translateY(-5px);
        /* some other code */
    }
    100%{
        transform: translateY(0);
        /* some additional code */
    }
}

@keyframes hoverSide{
    0%{
        transform: translateX(0);
        /* some code */
    }
    50%{
        transform: translateX(-5px);
        /* some other code */
    }
    100%{
        transform: translateX(0);
        /* some additional code */
    }
}

/* ANIMATE TOP LEFT */
.animate-top-left{
    animation-name: top-left;
}

.reverse-animate-top-left{
    animation-name: reverse-top-left;
}

@keyframes top-left{
    0%{
        background-image: var(--tl-1);
    }
    25%{
        background-image: var(--tl-2);
    }
    50%{
        background-image: var(--tl-3);
    }
    75%{
        background-image: var(--tl-4);
    }
    100%{
        background-image: var(--tl-5);
    }
}

@keyframes reverse-top-left{
    0%{
        background-image: var(--tl-5);
    }
    25%{
        background-image: var(--tl-4);
    }
    50%{
        background-image: var(--tl-3);
    }
    75%{
        background-image: var(--tl-2);
    }
    100%{
        background-image: var(--tl-1);
    }
}

/* ANIMATE TOP RIGHT */
.animate-top-right{
    animation-name: top-right;
}

.reverse-animate-top-right{
    animation-name: reverse-top-right;
}

@keyframes top-right{
    0%{
        background-image: var(--tr-1);
    }
    25%{
        background-image: var(--tr-2);
    }
    50%{
        background-image: var(--tr-3);
    }
    75%{
        background-image: var(--tr-4);
    }
    100%{
        background-image: var(--tr-5);
    }
}

@keyframes reverse-top-right{
    0%{
        background-image: var(--tr-5);
    }
    25%{
        background-image: var(--tr-4);
    }
    50%{
        background-image: var(--tr-3);
    }
    75%{
        background-image: var(--tr-2);
    }
    100%{
        background-image: var(--tr-1);
    }
}

/* ANIMATE BOTTOM LEFT */
.animate-bottom-left{
    animation-name: bottom-left;
}

.reverse-animate-bottom-left{
    animation-name: reverse-bottom-left;
}

@keyframes bottom-left{
    0%{
        background-image: var(--bl-1);
    }
    25%{
        background-image: var(--bl-2);
    }
    50%{
        background-image: var(--bl-3);
    }
    75%{
        background-image: var(--bl-4);
    }
    100%{
        background-image: var(--bl-5);
    }
}

@keyframes reverse-bottom-left{
    0%{
        background-image: var(--bl-5);
    }
    25%{
        background-image: var(--bl-4);
    }
    50%{
        background-image: var(--bl-3);
    }
    75%{
        background-image: var(--bl-2);
    }
    100%{
        background-image: var(--bl-1);
    }
}

/* ANIMATE TOP RIGHT */
.animate-bottom-right{
    animation-name: bottom-right;
}

.reverse-animate-bottom-right{
    animation-name: reverse-bottom-right;
}

@keyframes bottom-right{
    0%{
        background-image: var(--br-1);
    }
    25%{
        background-image: var(--br-2);
    }
    50%{
        background-image: var(--br-3);
    }
    75%{
        background-image: var(--br-4);
    }
    100%{
        background-image: var(--br-5);
    }
}

@keyframes reverse-bottom-right{
    0%{
        background-image: var(--br-5);
    }
    25%{
        background-image: var(--br-4);
    }
    50%{
        background-image: var(--br-3);
    }
    75%{
        background-image: var(--br-2);
    }
    100%{
        background-image: var(--br-1);
    }
}