/* Page-to-page transition (2s side flowing slide). */
:root {
  --page-transition-ms: 900ms;
  /* Softer, more even motion (less "slingshot"). */
  --page-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Full-page travel distance */
  --page-transition-x: 100%;
}

/* Reduce layout shifts caused by scrollbar appearance/disappearance. */
html {
  scrollbar-gutter: stable;
}

/* Cross-document View Transitions (blend old/new documents).
   Disabled: we want a consistent "natural fade" without scroll-position artifacts. */
@view-transition {
  navigation: none;
}
#page-root {
  view-transition-name: page-root;
  background: var(--bg, #ffffff);
}
::view-transition-old(page-root),
::view-transition-new(page-root) {
  animation-duration: 900ms;
  animation-timing-function: var(--page-transition-ease);
  animation-fill-mode: both;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
::view-transition-old(page-root) {
  animation-name: pageTransitionOld;
}
::view-transition-new(page-root) {
  animation-name: pageTransitionNew;
}
@keyframes pageTransitionOld {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: none;
  }
}
@keyframes pageTransitionNew {
  from {
    opacity: 0;
    transform: none;
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html.pt-prehide,
html.pt-in,
html.pt-out {
  overflow-x: hidden;
}

html.pt-prehide #page-root {
  opacity: 0;
  transform: none;
}

html.pt-in #page-root {
  animation: pageTransitionIn var(--page-transition-ms) var(--page-transition-ease) both;
  will-change: transform, opacity;
}

html.pt-out #page-root {
  animation: pageTransitionOut var(--page-transition-ms) var(--page-transition-ease) both;
  will-change: transform, opacity;
}

@keyframes pageTransitionIn {
  from {
    opacity: 0;
    transform: none;
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pageTransitionOut {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(page-root),
  ::view-transition-new(page-root) {
    animation: none !important;
    opacity: 1 !important;
  }
  html.pt-prehide #page-root {
    transform: none;
  }
  html.pt-in #page-root,
  html.pt-out #page-root {
    animation: none !important;
    transform: none !important;
  }
}