/* ====== PAGE TRANSITIONS (View Transitions API) ====== */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: page-fade-out 0.25s ease forwards;
}

::view-transition-new(root) {
  animation: page-fade-in 0.25s ease forwards;
}

@keyframes page-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Nav persists across transitions (shared element) */
.hero-nav {
  view-transition-name: main-nav;
}

::view-transition-old(main-nav),
::view-transition-new(main-nav) {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01s;
  }
}