/* Scroll movement, shared by every page (motion.js does the work).
   Nothing in here hides anything on its own: .mv is only ever added by the
   script, so a visitor without JavaScript, a crawler, or a reduced-motion
   visitor sees every word exactly as it is in the HTML. */

/* !important because a page's own rule (an FAQ item's border transition, for
   example) would otherwise win and the element would jump in unanimated. It
   only lasts while the element is arriving: motion.js removes the class as
   soon as it has landed, handing the element back to the page's own styles. */
.mv{
  opacity:0 !important;
  transform:translateY(28px) !important;
  filter:blur(6px) !important;
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1),
    filter .8s cubic-bezier(.2,.7,.2,1) !important;
  transition-delay:var(--mv-delay,0s) !important;
}
.mv.mv-in{opacity:1 !important;transform:none !important;filter:none !important;}

/* The thin orange line along the top that fills as you scroll. Above the
   header (120), below the mobile menu and the lightbox (200). */
.mv-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:130;
  background:#ff4f00;transform-origin:0 50%;transform:scaleX(0);
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .mv{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;}
  .mv-progress{display:none;}
}
@media print{
  .mv{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;}
  .mv-progress{display:none;}
}