/* Page movement: the Keystone 4 site slid the main content between pages with smoothState +
   animate.css (public/js/pageflower.js). This recreates it with cross-document View Transitions:
   plain page loads, animated by the browser (Chrome, Edge, Safari; others simply load the page).
   The header stays still; only #mainContent slides, over 1s like the original.
   Direction comes from the link that was clicked (see components/PageMotion.tsx):
     from-left  — new content enters from the left, old leaves to the right (menu links, earlier pieces)
     from-right — the reverse (later pieces in the picker)
   The back button plays the reverse of how the page was reached. */
@view-transition { navigation: auto; }

#mainContent { view-transition-name: main; }

/* header (root) doesn't move or fade */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(main) { animation: none; }
::view-transition-image-pair(main) { isolation: auto; }

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

html:active-view-transition-type(from-left)::view-transition-new(main)  { animation: em-slide-in-left 1s ease both; }
html:active-view-transition-type(from-left)::view-transition-old(main)  { animation: em-slide-out-right 1s ease both; }
html:active-view-transition-type(from-right)::view-transition-new(main) { animation: em-slide-in-right 1s ease both; }
html:active-view-transition-type(from-right)::view-transition-old(main) { animation: em-slide-out-left 1s ease both; }

/* links without a direction: switch instantly, as the old site did */
html:active-view-transition-type(none)::view-transition-old(main),
html:active-view-transition-type(none)::view-transition-new(main) { animation: none; }

/* the slide runs across the full width without scrollbars appearing */
html:active-view-transition { overflow-x: hidden; }

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