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