/* Shared page stack: shrink, lift the old page, bring the next up, expand.
   Full-document navigation keeps every page's own initialization and URLs. */
@view-transition { navigation: auto; }
::view-transition { background: var(--page-transition-bg, #fff); }
::view-transition-group(root) { animation: none; }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root), ::view-transition-new(root) {
  mix-blend-mode: normal;
  transform-origin: center;
  backface-visibility: hidden;
  width: 100%; height: 100%; object-fit: cover; object-position: top;
}
::view-transition-old(root) { animation: pro-stack-out 1.2s linear both; }
::view-transition-new(root) { animation: pro-stack-in 1.8s linear both; }
@keyframes pro-stack-out {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(.86,0,.07,1); }
  50% { transform: scale(.85); animation-timing-function: cubic-bezier(.86,0,.07,1); }
  100% { transform: translateY(-100%) scale(.85); }
}
@keyframes pro-stack-in {
  0%, 33.333% { transform: translateY(100%) scale(.85); animation-timing-function: cubic-bezier(.86,0,.07,1); }
  66.667% { transform: translateY(0) scale(.85); animation-timing-function: cubic-bezier(.86,0,.07,1); }
  100% { transform: translateY(0) scale(1); }
}
/* Direct openings stay separate from internal navigation and the brand intro. */
.page-entry-pending body { opacity: 0; }
.page-entry-fallback main { animation: pro-page-content-in .8s cubic-bezier(.22,1,.36,1) both; }
@keyframes pro-page-content-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.portfolio-entry-pending .work-hero-sticky { opacity: 0; }
.portfolio-page-entering .work-hero { overflow: clip; }
.portfolio-page-entering .work-hero-sticky { animation: pro-page-content-in .8s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .page-entry-pending body, .portfolio-entry-pending .work-hero-sticky { opacity: 1; }
  .page-entry-fallback main, .portfolio-page-entering .work-hero-sticky { animation: none; }
}