/* Animate */

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

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

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

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

.--delay100 {
  animation-delay: 100ms !important;
}

.--delay200 {
  animation-delay: 200ms !important;
}

.--delay300 {
  animation-delay: 300ms !important;
}

.--delay400 {
  animation-delay: 400ms !important;
}

.--delay500 {
  animation-delay: 500ms !important;
}

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

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

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

.--delay900 {
  animation-delay: 900ms !important;
}

.--delay1000 {
  animation-delay: 1000ms !important;
}

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

  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);
  }
}

@keyframes line-gym-progress {
  0% {
    width: 0;
  } 

  100% {
    width: 42vw;
  }
}

@keyframes line-health-progress {
  0% {
    height: 0;
  } 

  100% {
    height: 110vw;
  }
}

@keyframes spin-rotation {
  0% {
    transform: rotate(360deg);
  } 

  100% {
    transform: rotate(0deg);
  }
}