/* Maison Claire - cross-page transitions.
   Chromium/Brave/Edge get true cross-document View Transitions (a dissolve
   plus a subtle 3D depth "thunk"); other browsers fall back to a clean fade.
   All gated by the MOTION flag in build.py + prefers-reduced-motion. */

@view-transition { navigation: auto; }

/* Outgoing page lifts slightly toward the viewer and fades. */
::view-transition-old(root) {
  animation: mcPageOut 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* Incoming page warps up from a touch of depth and settles with a soft thunk. */
::view-transition-new(root) {
  animation: mcPageIn 480ms cubic-bezier(0.2, 0.76, 0.24, 1.02) both;
}
@keyframes mcPageOut {
  to { opacity: 0; transform: perspective(1400px) translateY(-10px) translateZ(60px) rotateX(-3deg); }
}
@keyframes mcPageIn {
  0%   { opacity: 0; transform: perspective(1400px) translateY(22px) translateZ(-120px) rotateX(5deg) scale(0.985); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* Fallback (no cross-document View Transitions): opacity-only dissolve, so
   fixed elements like the home intro are never reparented by a transform. */
#main { transition: opacity 0.5s ease; }
html.pt-enter #main { opacity: 0; }
html.pt-enter-active #main { opacity: 1; }
html.pt-leave #main { opacity: 0; transition: opacity 0.24s ease; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  #main { transition: none !important; }
  html.pt-enter #main, html.pt-leave #main { opacity: 1 !important; }
}