/* HERO ANIMATION */

.hero-image,
.hero-text,
.hero-icons,
.scroll-down {
  animation-duration: 0.9s;
  animation-fill-mode: both;
  animation-timing-function: ease;
}

.hero-image {
  animation-name: heroImageIn;
}

.hero-text {
  animation-name: heroTextIn;
}

.hero-icons {
  animation-name: heroIconsIn;
  animation-delay: 0.3s;
}

.scroll-down {
  animation-name: arrowBounce;
  animation-delay: 0.8s;
}

@keyframes heroImageIn {
  from {
    opacity: 0;
    transform: translateX(-40px) scale(0.78);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(0.78);
  }
}

@keyframes heroTextIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes heroIconsIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes arrowBounce {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }

  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(8px);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.reveal-left,
.reveal-right,
.reveal-up {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-left {
  transform: translateX(-60px);
}

.reveal-right {
  transform: translateX(60px);
}

.reveal-up {
  transform: translateY(60px);
}

.reveal-left.show,
.reveal-right.show,
.reveal-up.show {
  opacity: 1;
  transform: translate(0);
}