/* Motion layer: page transitions, image reveal masks and magnetic buttons.
   Everything here only runs for visitors who have not asked for reduced motion. */
@media (prefers-reduced-motion:no-preference){
  /* Cross-page transitions in browsers that support them; the header stays put. */
  @view-transition{navigation:auto}
  #nav{view-transition-name:mx-nav}
  ::view-transition-old(root){animation:mx-out .3s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:mx-in .6s cubic-bezier(.2,.7,.2,1) .05s both}
  ::view-transition-group(mx-nav){animation-duration:.45s}

  /* Images wipe open from the bottom as they scroll into view. */
  .mx-mask{clip-path:inset(100% 0 0 0);transition:clip-path 1.15s cubic-bezier(.77,0,.18,1),scale 1.6s cubic-bezier(.2,.7,.2,1),transform .6s ease}
  .mx-mask.mx-zoom{scale:1.12}
  .mx-mask.mx-in{clip-path:inset(0);scale:1}
}
@keyframes mx-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes mx-in{from{opacity:0;transform:translateY(24px)}}