/**
 * Scroll reveals.
 *
 * Production uses AOS (animate-on-scroll). We are not shipping AOS — it is a
 * third-party library for four transforms and an IntersectionObserver — but the
 * ANIMATION MAP is production's, extracted from the mirror: 39 elements,
 * fade-down x21, fade-up x6, fade-right x5, fade-left x4, zoom-in x3, delays
 * stepping 0-550ms in 50ms increments, linear easing. See assets/js/reveal.js.
 *
 * AOS's own transform distances are reproduced: 100px on the fades, scale(.6)
 * on the zoom.
 *
 * NOTHING HERE MAY AFFECT LAYOUT. Only opacity and transform are animated, so a
 * reveal can never change a section's measured height — the geometry work in
 * docs/homepage-geometry-diff.md stays valid whether or not these have fired.
 *
 * Elements are only hidden once JS has marked the document ready. With no JS
 * the class is never added, nothing is hidden, and the page renders complete.
 * That is deliberate: a reveal system that hides content by default takes the
 * whole page down with it if the script fails.
 */

/* The transforms shift full-width sections sideways before they reveal —
   fade-left pushes them +100px — which gives the whole PAGE a horizontal
   scrollbar on load. Measured: 100px of horizontal scroll at 1440, exactly the
   transform distance. AOS solves this with `body{overflow-x:hidden}`; we clip
   the content wrapper instead.

   `clip` rather than `hidden` on purpose: `hidden` makes the element a scroll
   container, which would break any position:sticky descendant and lets scripts
   scroll it programmatically. `clip` just clips. The `hidden` line before it is
   the fallback for anything that does not know `clip`. */
.meps-reveal-ready #content {
  overflow-x: hidden;
  overflow-x: clip;
}

.meps-reveal-ready [data-meps-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--reveal-duration, 400ms) linear var(--reveal-delay, 0ms),
    transform var(--reveal-duration, 400ms) linear var(--reveal-delay, 0ms);
}

.meps-reveal-ready [data-meps-reveal="fade-up"]    { transform: translate3d(0, 100px, 0); }
.meps-reveal-ready [data-meps-reveal="fade-down"]  { transform: translate3d(0, -100px, 0); }
.meps-reveal-ready [data-meps-reveal="fade-right"] { transform: translate3d(-100px, 0, 0); }
.meps-reveal-ready [data-meps-reveal="fade-left"]  { transform: translate3d(100px, 0, 0); }
.meps-reveal-ready [data-meps-reveal="zoom-in"]    { transform: scale(.6); }

.meps-reveal-ready [data-meps-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Once it has played, drop the compositor hint. */
.meps-reveal-ready [data-meps-reveal].is-revealed { will-change: auto; }

/* A modal that must be read cannot be waiting on a scroll reveal. */
.meps-reveal-ready #meps-age-gate [data-meps-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .meps-reveal-ready [data-meps-reveal],
  .meps-reveal-ready [data-meps-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}