:root {
    --animate--animation-duration: 300ms;
    --animate--animation-distance: 60px;
    --animate--animation-distance-neg: -60px;
}

*[data-animate] {
  animation-duration: var(--animate--animation-duration);
  animation-delay: 20ms;
  opacity: 0;
}


*[data-animated="slide-up"] {
  animation: fadeSlideUp var(--animate--animation-duration) ease-in forwards;
}

*[data-animated="slide-down"] {
  animation: fadeSlideDown var(--animate--animation-duration) ease-in forwards;
}

*[data-animated="slide-left"] {
  animation: fadeSlideLeft var(--animate--animation-duration) ease-in forwards;
}

*[data-animated="slide-right"] {
  animation: fadeSlideRight var(--animate--animation-duration) ease-in forwards;
}

*[data-animated="grow-up"] {
  animation: growUp var(--animate--animation-duration) ease-in forwards;
}

*[data-animated="grow-down"] {
  animation: growDown var(--animate--animation-duration) ease-in forwards;
}

*[data-animated="text-implode"] {
  animation: textImplode 600ms ease-in forwards;
}


@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(var(--animate--animation-distance));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(var(--animate--animation-distance-neg));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideLeft {
  from {
    opacity: 0;
    transform: translateX(var(--animate--animation-distance));
    //filter: blur(505px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    //filter: blur(0);
  }
}

@keyframes fadeSlideRight {
  from {
    opacity: 0;
    transform: translateX(var(--animate--animation-distance-neg));
    //filter: blur(505px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    //filter: blur(0);
  }
}

@keyframes fadeSlideRight {
  from {
    opacity: 0;
    transform: translateX(var(--animate--animation-distance-neg));
    //filter: blur(505px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    //filter: blur(0);
  }
}

@keyframes growUp {
  from {
    opacity: 0;
    transform: scale(0);
    //filter: blur(505px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    //filter: blur(0);
  }
}

@keyframes growDown {
  from {
    opacity: 0;
    transform: scale(3);
    filter: blur(55px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes textImplode {
  from {
    opacity: 0;
    letter-spacing: 35px;
    filter: blur(55px);

  }
  to {
    opacity: 1;
    letter-spacing: normal;
    filter: blur(0);

  }
}





// Old animation
@keyframes slide-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes flip-top {
  0% {
    transform: rotateX(0deg);
    z-index: 2;
  }
  0%, 99% {
    opacity: 0.99;
  }
  100% {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}

@keyframes flip-bottom {
  0%, 50% {
    z-index: -1;
    transform: rotateX(90deg);
    opacity: 0;
  }
  51% {
    opacity: 0.99;
  }
  100% {
    opacity: 0.99;
    transform: rotateX(0deg);
    z-index: 5;
  }
}


@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}