/* Horizontal slide between the landing page (index.html) and the full site (about.html).
   Only those two pages link this file, so only navigations between them animate.
   Browsers without cross-document view transitions simply navigate normally. */

@view-transition { navigation: auto; }

/* forward (landing → about): old page exits left, new page enters from the right */
::view-transition-old(root) { animation: 560ms cubic-bezier(.7, 0, .2, 1) both pt-out-left; }
::view-transition-new(root) { animation: 560ms cubic-bezier(.7, 0, .2, 1) both pt-in-right; }

/* back (about → landing): the reverse */
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: pt-out-right; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: pt-in-left; }

@keyframes pt-out-left  { to   { transform: translateX(-100%); } }
@keyframes pt-in-right  { from { transform: translateX(100%); } }
@keyframes pt-out-right { to   { transform: translateX(100%); } }
@keyframes pt-in-left   { from { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}