/* 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);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

/* 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 {
  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 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);
  }
}
/* 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);
  }
}