:root{
  --mo-enter:200ms;
  --mo-exit:140ms;
  --mo-ease-out:cubic-bezier(.16,.84,.30,1);
  --mo-ease-in:cubic-bezier(.45,0,1,1);
  --mo-rise:12px;
  --mo-step:40ms;
}

html.mo [data-mo]:not(.mo-in){
  opacity:0;
  transform:translate3d(0,var(--mo-rise),0);
  transition:opacity var(--mo-exit) var(--mo-ease-in),transform var(--mo-exit) var(--mo-ease-in);
}
html.mo [data-mo].mo-in{
  animation:mo-reveal var(--mo-enter) var(--mo-ease-out) var(--mo-delay,0ms) backwards;
}
@keyframes mo-reveal{
  from{opacity:0;transform:translate3d(0,var(--mo-rise),0)}
}
@media (prefers-reduced-motion:reduce){
  html.mo [data-mo]:not(.mo-in),html.mo [data-mo].mo-in{
    opacity:1;
    transform:none;
    transition:none;
    animation:none;
  }
}