/* ===========================================================================
 * Scroll reveal — blocks rise into place, headings light up word by word.
 *
 * The timing is lifted from the reference: 0.8s on opacity and transform,
 * cubic-bezier(.22,.61,.36,1) — an ease-out that moves fast then settles, so
 * the page feels caught rather than dragged. Headings use the same curve at
 * 0.35s per word.
 *
 * No smooth-scroll library is involved. The scrolling itself is the browser's;
 * only the arrival is animated.
 * ======================================================================== */

html { scroll-behavior: smooth; }

.sr-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   .8s cubic-bezier(.22, .61, .36, 1),
    transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

.sr-reveal.sr-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Headings arrive dim and are lit a word at a time as the line crosses the
   reading band, so the eye is led left to right instead of the whole block
   flashing on. */
.sr-word {
  color: color-mix(in srgb, currentColor 18%, transparent);
  transition: color .35s cubic-bezier(.22, .61, .36, 1);
}
.sr-word.sr-lit { color: inherit; }

/* Nothing here is load-bearing: with motion turned down every element is in
   its final state from the first paint. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sr-reveal, .sr-reveal.sr-in { opacity: 1; transform: none; transition: none; }
  .sr-word, .sr-word.sr-lit { color: inherit; transition: none; }
}