@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Elements waiting for scroll animation.
   Scoped to .js so that, without JavaScript, content stays fully visible
   instead of being permanently hidden at opacity: 0. */
.js [data-animate] {
  opacity: 0;
}

[data-animate].animate-fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Hero animations play immediately */
.hero [data-animate-hero] {
  opacity: 0;
  animation: fadeInUp 0.7s ease-out forwards;
}