/* ==========================================================================
   Hero scroll reveal — fade the supporting copy in below the headline
   Isolated for the same reason as the slideshow itself: this is a "how does
   it move" concern, not a layout one. On load, only the h1 tagline shows
   over the photos; the eyebrow label, subhead, buttons, and price line stay
   invisible-but-in-place (same box, same position) until the visitor
   scrolls, then fade/slide up into view. Because the space is reserved from
   the start, the headline never jumps when the rest fades in. See README.md
   in this folder for the knobs.
   ========================================================================== */

.hero-reveal {
  --reveal-duration: .6s;
  --reveal-distance: 14px;

  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease;
}

.hero-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion: appear/disappear instantly, no fade or slide */
@media (prefers-reduced-motion: reduce) {
  .hero-reveal {
    transition: none;
  }
}