/* One live-DOM fade avoids browser snapshots exposing uninitialized content. */
@view-transition { navigation: auto; }
:root { --page-fade-out: 280ms; --page-fade-in: 420ms; }
html body > :is(main, .site-footer, .marquee, .side-label, .side-links), html #ajax-content-wrap {
  transition: opacity var(--page-fade-in) ease-out;
}
html.page-loading body > :is(main, .site-footer, .marquee, .side-label, .side-links), html.page-loading #ajax-content-wrap {
  opacity: 0;
  transition: none;
}
@media(prefers-reduced-motion:reduce) {
  html body > :is(main, .site-footer, .marquee, .side-label, .side-links), html #ajax-content-wrap { transition: none; }
}

@property --page-wipe-edge { syntax: '<percentage>'; inherits: false; initial-value: -20%; }
html.page-ready body > :is(main, .site-footer, .marquee, .side-label, .side-links), html.page-ready #ajax-content-wrap {
  mask-image: linear-gradient(to right, transparent var(--page-wipe-edge), #000 calc(var(--page-wipe-edge) + 20%));
  animation: page-directional-in 650ms cubic-bezier(.2,.7,.2,1) both;
}
html.page-ready body.page-leaving > :is(main, .site-footer, .marquee, .side-label, .side-links), html.page-ready body.page-leaving #ajax-content-wrap {
  animation: none;
  mask-image: linear-gradient(to right, #000 var(--page-wipe-edge), transparent calc(var(--page-wipe-edge) + 20%));
}
@keyframes page-directional-in { from { --page-wipe-edge: 100%; } to { --page-wipe-edge: -20%; } }
@media(prefers-reduced-motion:reduce) {
  html.page-ready body > :is(main, .site-footer, .marquee, .side-label, .side-links), html.page-ready #ajax-content-wrap { animation: none; mask-image: none; }
}

/* Production-style overlap: retain the old page beneath a broad gradient reveal. */
@property --navigation-reveal { syntax: '<number>'; inherits: false; initial-value: 0; }
.native-navigation .site-header, .native-navigation #header-outer { view-transition-name: fixed-header; }
html.native-navigation.page-ready body > :is(main, .site-footer, .marquee, .side-label, .side-links), html.native-navigation.page-ready #ajax-content-wrap {
  mask-image: none; animation: none; transition: none;
}
::view-transition-group(root) { animation-duration: 1.2s; }
::view-transition-old(root) { animation: none; opacity: 1; mix-blend-mode: normal; }
::view-transition-new(root) {
  mix-blend-mode: normal;
  animation: navigation-gradient 1.2s cubic-bezier(.45,0,.35,1) both;
  mask-image: linear-gradient(270deg, #000 calc(-70% + 170% * var(--navigation-reveal)), transparent calc(170% * var(--navigation-reveal)));
}
::view-transition-group(fixed-header) { animation: none; z-index: 10; }
::view-transition-old(fixed-header) { display: none; }
::view-transition-new(fixed-header) { animation: none; mix-blend-mode: normal; }
@keyframes navigation-gradient { from { --navigation-reveal: 0; } to { --navigation-reveal: 1; } }
@media(prefers-reduced-motion:reduce) { @view-transition { navigation: none; } }