/* ponytail: book-style page open/close for same-origin nav */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: page-flip-out 0.42s cubic-bezier(0.4, 0, 1, 1) both;
  transform-origin: left center;
}
::view-transition-new(root) {
  animation: page-flip-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: left center;
}

@keyframes page-flip-out {
  to {
    opacity: 0;
    transform: perspective(1400px) rotateY(-28deg) translateX(-4%);
    filter: brightness(0.75);
  }
}
@keyframes page-flip-in {
  from {
    opacity: 0;
    transform: perspective(1400px) rotateY(28deg) translateX(4%);
    filter: brightness(0.75);
  }
  to {
    opacity: 1;
    transform: perspective(1400px) rotateY(0) translateX(0);
    filter: none;
  }
}

/* Fallback: soft fade only — no 3D on body (breaks layout) */
html.po-fallback {
  background: #08080a;
}
html.po-fallback.po-enter body {
  animation: po-fade-in 0.35s ease-out both;
}
html.po-fallback.po-exit body {
  animation: po-fade-out 0.28s ease-in both;
  pointer-events: none;
}

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

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
  html.po-fallback.po-enter body,
  html.po-fallback.po-exit body {
    animation: none !important;
  }
}