/* ------------------------------------------------------------------------
   MOTION. The starting state of everything that animates in.

   Two classes, both set by a short script in the head and only when the
   visitor has NOT asked for reduced motion:

     .anim    motion is allowed at all. Drives the sprite idle cycles.
     .armed   the scroll entrances start hidden, waiting for GSAP.

   With JavaScript off, or with reduced motion on, neither is set and the page
   is simply finished and still.

   .armed also has a four second failsafe on it. If the CDN never answers and
   public/js/motion.js never boots, the page uncovers itself instead of
   sitting there half blank. motion.js cancels the failsafe once it is up, or
   drops the class itself if it fell over.
   ------------------------------------------------------------------------ */

/* A headline waits below its own mask and slides up. */
.armed [data-reveal="mask"] > span{transform:translateY(100%)}

/* A headline that arrives one word at a time cannot hold its own start state
   here, because the words do not exist until js/words.js has cut them. So the
   whole line waits at nothing, and the JavaScript hides the words behind their
   edges and turns the line back on in the same frame. Both of the four second
   failsafes uncover it: .armed coming off, and reduced motion never adding it.

   Same for the hero, which is a timeline of four of these. */
.armed [data-reveal="words"],
.armed .hero [data-hero="kicker"],
.armed .hero [data-hero="title"],
.armed .hero [data-hero="lede"],
.armed .hero [data-hero="cta"]{opacity:0}

/* A kicker or a caption is wiped on from the left. */
.armed [data-reveal="wipe"]{clip-path:inset(0 100% 0 0)}

/* Everything else rises a whole number of pixels. The opacity is stepped in
   JavaScript, not crossfaded, so it lands like a sprite appearing. */
.armed [data-reveal="rise"]{transform:translateY(24px);opacity:0}

/* --- the two frame sprite idle ------------------------------------------ */
.anim .idle img{animation:idle-a 1s steps(1,end) infinite}
.anim .idle img + img{animation-name:idle-b}

@keyframes idle-a{
  0%,49.9%  {visibility:visible}
  50%,100%  {visibility:hidden}
}
@keyframes idle-b{
  0%,49.9%  {visibility:hidden}
  50%,100%  {visibility:visible}
}

/* Give the compositor warning about the handful of things that move for the
   whole length of the page, and nothing else. */
[data-parallax]{will-change:transform}