/* Animate */

.animate-reset-position {
  position: sticky;
  z-index: 1;
}

.animate-initial-state {
  opacity: 0;
}

.animate-fade-in {
  animation: fade-in 700ms ease-in-out forwards;
  opacity: 0;
}

.--delay600 {
  animation-delay: 600ms;
}

.--delay700 {
  animation-delay: 700ms;
}

.--delay800 {
  animation-delay: 800ms;
}

@keyframes slide-bottom-in {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: inherit;
    z-index: 1;
    animation: fade-in 700ms ease-in-out forwards;
  }
}

@keyframes slide-top-in {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes slide-left-in {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes slide-right-in {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes background-fill {
  0% {
    background-position: right;
  }

  100% {
    background-position: left;
  }
}

@keyframes trail-list {
  0% {
    opacity: 0;
    transform: translateX(-100vw);
  } 

  100% {
    opacity: 1;
    transform: translateX(0vw);
  }
}