/* Monarchy — motion option A (light): view transitions + scroll reveals.
   transform/opacity only. Hidden state only applies when JS adds .ma-ready. */
@view-transition { navigation: auto; }
.nav, header.nav { view-transition-name: mm-header; }
::view-transition-old(root) { animation: mm-vt-out 180ms ease-in both; }
::view-transition-new(root) { animation: mm-vt-in 260ms cubic-bezier(.2,.7,.3,1) both; }
::view-transition-group(mm-header) { animation-duration: 0s; }
::view-transition-old(mm-header), ::view-transition-new(mm-header) { animation: none; mix-blend-mode: normal; }
@keyframes mm-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes mm-vt-in { from { opacity: 0; transform: translateY(12px); } }

html.ma-ready .ma { opacity: 0; transform: translate3d(0, var(--ma-y, 16px), 0);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--ma-i, 0) * 60ms); }
html.ma-ready .ma.ma-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.ma-ready .ma { opacity: 1 !important; transform: none !important; transition: none !important; }
}