/* ============================================================
   Family & Lifestyle Medicine — Scroll-reveal base state
   Part 09 of 11. The cascade depends on load order:
   these files must stay linked in numeric sequence (see any page <head>).
   ============================================================ */

/* ---------- Scroll reveal ----------
   The hidden state is gated on html.js, which an inline script at the top of
   every <head> sets. Without that gate this rule is a single point of failure
   in production: it hides most of the page and trusts main.js to hand the
   content back. Anything that stops main.js running — a 404 on the file, a
   host serving .js as text/plain under nosniff, a CDN "optimiser" that defers
   or rewrites scripts, a throw on an older browser — and the page arrives
   blank. None of that happens on a local file server, which is why it only
   ever shows up once deployed. Gated, the worst case is a page with no
   entrance animations instead of a page with no content.

   :where() holds the gate at zero specificity, so .is-visible below and the
   reduced-motion and print overrides in 11-polish.css still win on source
   order alone, exactly as they did when this was a bare .reveal rule. */
.js :where(.reveal) {
  opacity: 0;
  transform: translateY(var(--reveal-travel, 46px));
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* A section header travels further than the content under it, so arriving at a
   new section reads as the section announcing itself rather than as one more
   card fading in. */
.section-head.reveal { --reveal-travel: 64px; }