/* motion.css -- the Baseplate motion layer's stylesheet. Spec: docs/motion-layer.md.
   Everything here is inside a reduced-motion query: for anyone who prefers
   reduced motion none of it exists, and the page is simply itself.
   A start state applies only to an element motion.js has armed, which it does
   only after it is running with its recovery handlers installed, and only for
   elements below the fold; so nothing is ever hidden before the script exists,
   and nothing above the fold is hidden at all. */
@media (prefers-reduced-motion: no-preference) {
  .bp-motion-armed:not(.is-shown) { opacity: 0; }
  .bp-motion-armed[data-bp-motion="stagger"]:not(.is-shown),
  .bp-motion-armed.mo-stagger:not(.is-shown) { opacity: 1; }
  .bp-motion-armed[data-bp-motion="stagger"]:not(.is-shown) > *,
  .bp-motion-armed.mo-stagger:not(.is-shown) > * { opacity: 0; }

  /* The page change is the browser's own cross-document transition. The site
     header and footer hold still; the page beneath them slides and fades.
     Heroes are not named: the Hero block repeats, and duplicate names cancel. */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  .site-footer { view-transition-name: site-footer; }
  ::view-transition-old(site-header), ::view-transition-new(site-header),
  ::view-transition-old(site-footer), ::view-transition-new(site-footer) { animation: none; }
  ::view-transition-old(root) { animation: 220ms cubic-bezier(.33,0,.15,1) both bp-vt-out; }
  ::view-transition-new(root) { animation: 380ms cubic-bezier(.33,0,.15,1) both bp-vt-in; }
  @keyframes bp-vt-out { to { opacity: 0; transform: translateY(-10px); } }
  @keyframes bp-vt-in { from { opacity: 0; transform: translateY(14px); } }
}