/* Real document navigation preserves URLs, history, forms and page metadata. */
@view-transition { navigation: auto; }

::view-transition { pointer-events: none; }
::view-transition-group(root) { animation-duration: 620ms; }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root) {
  animation: 180ms ease-out both page-depart;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  animation: 520ms cubic-bezier(.16,1,.3,1) 100ms both page-arrive;
  mix-blend-mode: normal;
}
.nav { view-transition-name: site-navigation; }
.announcement { view-transition-name: site-announcement; }
::view-transition-group(site-navigation) {
  animation-duration: 620ms;
  animation-timing-function: cubic-bezier(.16,1,.3,1);
  z-index: 2;
}
::view-transition-old(site-navigation),
::view-transition-new(site-navigation) { animation-duration: 320ms; }
::view-transition-group(site-announcement) { animation-duration: 320ms; }

@keyframes page-depart { to { opacity: 0; transform: translateY(-10px); } }
@keyframes page-arrive { from { opacity: 0; transform: translateY(18px); } }

/* Older browsers get a short rose/ivory veil, never a hidden or locked page. */
html.page-leaving::after, html.page-arriving::after {
  content: ''; position: fixed; inset: 0; z-index: 10000;
  pointer-events: none;
  background: radial-gradient(ellipse at 85% 15%, #eddcda, transparent 65%), #f5eadf;
}
html.page-leaving::after { animation: 220ms ease-out both page-veil-in; }
html.page-arriving::after { animation: 520ms cubic-bezier(.16,1,.3,1) both page-veil-out; }
@keyframes page-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-veil-out { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 760px) {
  @keyframes page-arrive { from { opacity: 0; transform: translateY(12px); } }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.page-leaving::after, html.page-arriving::after { display: none; }
}