.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 720ms ease,
    transform 720ms cubic-bezier(.2, .8, .2, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-soft {
  transform: translate3d(0, 16px, 0);
}

.reveal-scale {
  transform: translate3d(0, 22px, 0) scale(.97);
}

.reveal-scale.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

.reveal-left {
  transform: translate3d(-26px, 0, 0);
}

.reveal-right {
  transform: translate3d(26px, 0, 0);
}

.reveal-delay-1 { transition-delay: 90ms; }
.reveal-delay-2 { transition-delay: 170ms; }
.reveal-delay-3 { transition-delay: 250ms; }
.reveal-delay-4 { transition-delay: 330ms; }

.hero-title.reveal.is-visible,
.hero-text.reveal.is-visible {
  transition-duration: 850ms;
}

.hero-main img {
  animation: heroImageSettle 1150ms cubic-bezier(.2, .8, .2, 1) both;
  transform-origin: center;
}

.btn,
.hero-card,
.card,
.step,
.mini-card,
.contact-box {
  backface-visibility: hidden;
}

.btn:hover {
  transform: translateY(-2px);
}

@keyframes heroImageSettle {
  0% {
    filter: saturate(.92) contrast(.97);
    transform: scale(1.045);
  }

  100% {
    filter: saturate(1) contrast(1);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible,
  .reveal-scale,
  .reveal-scale.is-visible,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-main img {
    animation: none;
  }
}