/* ==========================================================================
   Staggered blur-in reveal.

   A container marked [data-reveal] holds elements marked .rv; reveal.js adds
   .in to the container and each .rv transitions in, 120ms apart, ordered by
   its own --i.

   The hidden state is scoped to html.js-anim, which a tiny inline script in
   the head sets before first paint. Without JavaScript the class is never
   added, so the content is plain visible text rather than stuck at opacity 0.
   Only opacity, filter and transform animate, so every element occupies its
   final space from the first paint and nothing reflows.
   ========================================================================== */

.js-anim [data-reveal] .rv {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(24px);
  transition:
    opacity   0.8s cubic-bezier(.2, .65, .3, 1),
    filter    0.8s cubic-bezier(.2, .65, .3, 1),
    transform 0.8s cubic-bezier(.2, .65, .3, 1);
  transition-delay: calc(var(--i, 0) * 120ms);
}

/* Headline clauses lift proportionally to their own type size, which is what
   gives the effect its weight on large display text. Blocks and images use the
   fixed 24px above instead: 35% of a 700px screenshot would be a leap. */
.js-anim [data-reveal] .rv.rv-text { transform: translateY(35%); }

/* Last, so it beats .rv-text on equal specificity. */
.js-anim [data-reveal].in .rv {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Screen-reader copy of a headline that has been split into animated clauses,
   so assistive technology and crawlers get one clean sentence. */
.hl-plain {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal] .rv,
  .js-anim [data-reveal] .rv.rv-text,
  .js-anim [data-reveal].in .rv {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}