/* ==========================================================================
   MIRA VIEW TRANSITIONS — shared by every page (landing + service pages).
   Cross-document: header persists, a pendant on the landing morphs into the
   service page H1 (shared view-transition-name dir-*), back reverses direction.
   Direction type "back" is added by js/mira-motion-core.js (pagereveal).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

::view-transition-old(root) { animation: mm-vt-out 360ms cubic-bezier(0.7, 0, 0.84, 0) both; }
::view-transition-new(root) { animation: mm-vt-in 680ms cubic-bezier(0.16, 1, 0.3, 1) both; }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: mm-vt-out-back; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: mm-vt-in-back; }
/* named elements without a partner on the next page (the other pendants) leave with the page */
::view-transition-old(*):only-child { animation: mm-vt-out 360ms cubic-bezier(0.7, 0, 0.84, 0) both; }
::view-transition-group(*) { animation-duration: 720ms; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }

@keyframes mm-vt-out { to { opacity: 0; transform: translateY(-28px) scale(0.985); } }
@keyframes mm-vt-in { from { opacity: 0; transform: translateY(36px); } }
@keyframes mm-vt-out-back { to { opacity: 0; transform: translateY(28px) scale(0.985); } }
@keyframes mm-vt-in-back { from { opacity: 0; transform: translateY(-36px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: 150ms !important; animation-name: none; }
}


.site-header { view-transition-name: mira-header; }