/* Enable cross-document transitions */
@view-transition { navigation: auto; }

/* --- SLIDE NAVIGATION ANIMATION (cross-document) --- */
html { overflow-x: clip; } /* avoid scrollbar */

::view-transition-old(root) { animation: page-slide-out 1s ease both; }
::view-transition-new(root) { animation: page-slide-in 1s ease both; }

/* Hide shared-element layers so we don't double-animate during the slide 
::view-transition-group(site-logo),
::view-transition-image-pair(site-logo),
::view-transition-group(hero-block),
::view-transition-image-pair(hero-block),
::view-transition-group(page-title),
::view-transition-image-pair(page-title) {
  display: none;
}
*/
/* Keyframes */
@keyframes page-slide-in {
  from { transform: translateX(100%); opacity: 1; }
  to   { transform: translateX(0);   opacity: 1; }
}
@keyframes page-slide-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(-100%); opacity: 1; }
}

/* Reduced motion = no animation */
@media (prefers-reduced-motion: reduce) {
  ::view-transition,
  ::view-transition-old(root),
  ::view-transition-new(root) { display: none; }
}