@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap");

@media (prefers-reduced-motion: no-preference) {
  .motion-ready .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 600ms ease, transform 600ms ease;
    transition-delay: var(--reveal-delay, 0ms);
  }

  .motion-ready .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .hero-content > * {
    animation: hero-enter 650ms both;
  }

  .hero-content > :nth-child(2) { animation-delay: 70ms; }
  .hero-content > :nth-child(3) { animation-delay: 140ms; }
  .hero-content > :nth-child(4) { animation-delay: 210ms; }
  .hero-content > :nth-child(5) { animation-delay: 280ms; }

  @keyframes hero-enter {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
}