/* ==========================================================================
   Rodenstock Eyewear – page slide between pages (final version)
   Cross-document View Transitions as in alternative2: arriving at a subpage
   (html[data-page="sub"]) slides the new page in from the right, returning to
   the main page slides it in from the left; the header stays in place.
   A separate file because @view-transition cannot be limited to some pages –
   only the main and eyewear pages of versions with page_slide link it (not the
   legal pages), and page-slide.js skips the slide when only the language
   changes. Browsers without support (Firefox,
   Safari before 18.2) simply load the next page; whether pages opened via
   file:// slide depends on the browser (Chrome does).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  .site-header { view-transition-name: site-header; }
  /* a header that was hidden on the old page drops in with its own show timing (main.css: 450ms) */
  ::view-transition-group(site-header) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
    animation: 1.1s cubic-bezier(0.65, 0, 0.35, 1) both;   /* timing of alternative2 */
  }
  ::view-transition-old(root) { animation-name: page-out-right; }
  ::view-transition-new(root) { animation-name: page-in-left; }
  :root[data-page="sub"]::view-transition-old(root) { animation-name: page-out-left; }
  :root[data-page="sub"]::view-transition-new(root) { animation-name: page-in-right; }
}

@keyframes page-out-left { to { translate: -100% 0; } }
@keyframes page-in-right { from { translate: 100% 0; } }
@keyframes page-out-right { to { translate: 100% 0; } }
@keyframes page-in-left { from { translate: -100% 0; } }