/* Page transition, native version (Chrome, Edge, Safari 18.2+): the browser keeps a picture of the old page, fades it out into the page colour,
   then fades the new page in. Both pages opt in with the rule below. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition { background: var(--bg, #f5f3eb); }
  ::view-transition-group(root) { animation-duration: .65s; }
  ::view-transition-old(root) { animation: ptOutVT .25s ease-in both; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: ptInVT .4s ease-out .22s both; mix-blend-mode: normal; }
}
@keyframes ptOutVT { from { opacity: 1; } to { opacity: 0; } }
@keyframes ptInVT { from { opacity: 0; } to { opacity: 1; } }

/* Fallback (js/pt.js) for browsers without the native version (e.g. Firefox): the same fade done with a page-coloured cover. */
/* Page transition: the old page fades out into the page colour, then the new page fades in. */
html.pt-out::after, html.pt-in::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000;
  background: var(--ptc, #f5f3eb);
}
html.pt-out::after { opacity: 0; animation: ptOut .3s ease-in forwards; }
html.pt-in::after { opacity: 1; }
html.pt-in.pt-go::after { animation: ptIn .45s ease-out forwards; pointer-events: none; }
@keyframes ptOut { from { opacity: 0; } to { opacity: 1; } }
@keyframes ptIn { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.pt-out::after, html.pt-in::after { content: none; } }