/*
 * Scroll reveals for the alternative landing page.
 *
 * The rule this file lives by: **the page must be fully readable with this
 * stylesheet's hidden state never lifted**. Nothing here hides content on its
 * own - the hidden state is applied by static/js/product-alt/reveal.js and
 * only after it has confirmed IntersectionObserver support, so no-JS, an old
 * browser, a failed request and a crawler all get the plain document. That is
 * why the selectors below hang off `.js-reveal` (set on <html> by the module)
 * rather than off `[data-reveal]` directly.
 *
 * What the motion is allowed to be: a fixed local transition, triggered once
 * on entry. It is never scrubbed by scroll position - no parallax, no
 * pinning, no transform tied to scrollY - because that is what turns a landing
 * page into something that fights the reader's own scrolling on a trackpad.
 *
 * Under prefers-reduced-motion the hidden state is simply never hidden.
 *
 * Note where the transitions sit: on the *revealed* state, never on the hidden
 * one. The hidden state arrives at runtime, when reveal.js adds `.js-reveal`
 * to <html>, and a transition declared on it would animate every block from
 * its natural opacity down to zero - the reader sees the page, then watches it
 * fade out. Hiding has to be instantaneous; only the arrival is animated.
 */

.js-reveal [data-reveal]{opacity:0;transform:translateY(var(--rise))}
.js-reveal [data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity var(--reveal),transform var(--reveal);
}

/* Staggered children: one attribute on the container, the delay comes from
 * --i, which reveal.js sets per child. Capped at six so a long list cannot
 * run a visibly late item. */
.js-reveal [data-reveal-stagger] > *{opacity:0;transform:translateY(var(--rise))}
.js-reveal [data-reveal-stagger].is-in > *{
  opacity:1;transform:none;
  transition:opacity var(--reveal),transform var(--reveal);
  transition-delay:calc(var(--i,0) * 95ms);
}

/* The numbered function rows draw their own top rule as they arrive, so the
 * grid assembles line by line instead of appearing whole. */
.js-reveal .fn{position:relative}
.js-reveal .fn::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
}
.js-reveal .fn.is-in::after{
  transform:scaleX(1);
  transition:transform .95s cubic-bezier(.22,.61,.36,1) .12s;
}

@media (prefers-reduced-motion:reduce){
  .js-reveal [data-reveal],
  .js-reveal [data-reveal-stagger] > *,
  .js-reveal [data-reveal].is-in,
  .js-reveal [data-reveal-stagger].is-in > *{opacity:1;transform:none;transition:none}
  .js-reveal .fn::after{display:none}
}