/*
  Shared fade-in choreography. Pair with /static/fade.js. Two modes:
    .fade-on-load   — fades in immediately after first paint
                      (use on above-the-fold hero / chrome).
    .fade-on-view   — invisible until it scrolls into view; an
                      IntersectionObserver in fade.js triggers reveal.
  Respects prefers-reduced-motion: animations skip entirely.
*/
.fade-on-load {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 900ms ease-out, transform 900ms ease-out;
}
.fade-on-load.is-visible {
  opacity: 1;
  transform: none;
}
.fade-on-view {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
  will-change: opacity, transform;
}
.fade-on-view.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fade-on-load, .fade-on-view {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}