@keyframes fade-slide-in {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Progressive enhancement: only hide when JS is available */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
}

/* Animation for hero or elements revealed by JS */
.hero-animate, html.js [data-reveal].is-visible {
  animation-name: fade-slide-in;
  animation-duration: var(--duration, 900ms);
  animation-timing-function: var(--easing, cubic-bezier(0.25, 1, 0.5, 1));
  animation-fill-mode: forwards;
}

/* Optional stagger via inline style or data attribute */
html.js [data-reveal].is-visible {
  animation-delay: var(--reveal-delay, 0ms);
}

/* Accessibility / UX */
@media (prefers-reduced-motion: reduce) {
  .hero-animate,
  html.js [data-reveal].is-visible {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}