/* Subtle first-load entrance for the homepage hero. */
.hero h1,
.hero-sub,
.hero-actions,
.hero-visual {
  animation-name: hero-entrance;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.hero h1 {
  animation-duration: 560ms;
}

.hero-sub {
  animation-duration: 560ms;
  animation-delay: 100ms;
}

.hero-actions {
  animation-duration: 560ms;
  animation-delay: 200ms;
}

.hero-visual {
  animation-duration: 900ms;
}

@keyframes hero-entrance {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

@media (prefers-reduced-motion: reduce) {
  .hero h1,
  .hero-sub,
  .hero-actions,
  .hero-visual {
    animation: none;
    opacity: 1;
    transform: none;
  }
}