/* ==========================================================================
   Scroll reveal effects
   - Headings (h1-h3) reveal word-by-word as they scroll into view
   - Cards, paragraphs and images fade + slide up as they scroll into view
   Both are driven by javascript/site.js toggling an "in-view" class via
   IntersectionObserver. Wrapped in prefers-reduced-motion so anyone who has
   asked their OS for reduced motion just sees the content normally, with
   no animation at all.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* Word-by-word heading reveal */
  .word-reveal .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.7em);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }

  .word-reveal.in-view .word {
    opacity: 1;
    transform: translateY(0);
  }

  /* Block-level fade + slide-up reveal for cards, images, paragraphs */
  .reveal-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }

  .reveal-up.in-view {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Anyone whose OS asks for reduced motion still gets the class toggling from
   JS, but no rule above applies opacity:0 in the first place, so content is
   simply visible with no animation. */