/* page-load entrance — only active when JS has hooked in (html.js-on);
   without JS or with reduced-motion, content renders at final state immediately. */
.reveal {
  transition: opacity var(--dur-fade) var(--ease-out),
              transform var(--dur-fade) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}

html.js-on .reveal {
  opacity: 0;
  transform: translateY(8px);
}

html.js-on .reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* in-view reveal for content below the fold; triggered by IntersectionObserver */
.in-view {
  transition: opacity 700ms var(--ease-out),
              transform 700ms var(--ease-out);
}
html.js-on .in-view {
  opacity: 0;
  transform: translateY(12px);
}
html.js-on .in-view.is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html.js-on .reveal,
  html.js-on .in-view { opacity: 1; transform: none; transition: none; }
}