/*
 * Majhuol View Transitions — smooth cinematic page transitions
 * Activates only when the browser supports cross-document view transitions.
 */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(.2, .9, .25, 1);
}

::view-transition-old(root) {
  animation-name: majhuol-vt-fade-out;
}
::view-transition-new(root) {
  animation-name: majhuol-vt-fade-in;
}

@keyframes majhuol-vt-fade-out {
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes majhuol-vt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.001ms !important;
    animation-name: none !important;
  }
}