:root {
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-page-slide {
  position: relative;
}
.t-page-slide .t-page[data-page-id="1"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.t-page-slide .t-page[data-page-id="2"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition:
    opacity   var(--page-fade-dur)  var(--page-fade-ease),
    transform var(--page-slide-dur) var(--page-slide-ease),
    filter    var(--page-slide-dur) var(--page-slide-ease);
  will-change: opacity, transform, filter;
}
.t-page-slide[data-page="1"] .t-page[data-page-id="1"],
.t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger);
}

@media (prefers-reduced-motion: reduce) {
  .t-page-slide .t-page { transition: none !important; }
}

/* Adapt the reference motion to native cross-document navigation. */
@view-transition { navigation: auto; }
.site-nav{view-transition-name:site-navigation}
::view-transition-old(root){animation:armd-page-out var(--page-slide-dur) var(--page-slide-ease) both;mix-blend-mode:normal}
::view-transition-new(root){animation:armd-page-in var(--page-slide-dur) var(--page-slide-ease) both;mix-blend-mode:normal}
::view-transition-group(site-navigation){animation-duration:var(--page-slide-dur);animation-timing-function:var(--page-slide-ease)}
@keyframes armd-page-out{to{opacity:0;transform:translateX(calc(-1 * var(--page-slide-distance)));filter:blur(var(--page-blur))}}
@keyframes armd-page-in{from{opacity:0;transform:translateX(var(--page-slide-distance));filter:blur(var(--page-blur))}to{opacity:1;transform:translateX(0);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}