/* Full document navigation stays native. Unsupported browsers ignore this rule. */
@view-transition {
  navigation: auto;
}

:root {
  --route-transition-duration: 320ms;
  --route-transition-ease: cubic-bezier(.22, .68, .12, 1);
}

.site-header {
  view-transition-name: liancon-header;
}

::view-transition {
  background: var(--base, #fff);
  pointer-events: none;
}

::view-transition-group(root) {
  animation-duration: var(--route-transition-duration);
  animation-timing-function: var(--route-transition-ease);
  overflow: clip;
}

::view-transition-image-pair(root) {
  isolation: isolate;
}

::view-transition-old(root),
::view-transition-new(root) {
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
  animation-duration: var(--route-transition-duration);
  animation-timing-function: var(--route-transition-ease);
  animation-fill-mode: both;
  transform-origin: 50% 0;
}

::view-transition-old(root) {
  z-index: 1;
  animation-name: liancon-page-recede;
}

::view-transition-new(root) {
  z-index: 2;
  animation-name: liancon-page-reveal;
}

/* Keep the navigation grounded while the page beneath it changes. */
::view-transition-group(liancon-header) {
  z-index: 3;
  animation: none;
}

::view-transition-old(liancon-header) {
  display: none;
}

::view-transition-new(liancon-header) {
  animation: none;
  mix-blend-mode: normal;
}

@keyframes liancon-page-recede {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to { transform: translateY(-24px) scale(.985); opacity: .68; }
}

@keyframes liancon-page-reveal {
  from { clip-path: inset(100% 0 0 0); transform: translateY(30px); }
  to { clip-path: inset(0 0 0 0); transform: translateY(0); }
}

/* Incoming-only keyboard/fallback reveal, below the sticky header. */
.route-transition-curtain {
  position: fixed;
  z-index: 25;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  visibility: hidden;
  background: var(--base, #fff);
  transform: translate3d(0, 101%, 0);
  contain: strict;
}

:root[data-route-transition="entering"] .route-transition-curtain {
  visibility: visible;
  animation: liancon-curtain-uncover 260ms var(--route-transition-ease) both;
}

@keyframes liancon-curtain-uncover {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -101%, 0); visibility: hidden; }
}

/* Preference selectors also work before JS runs or if JS is unavailable. */
:root[data-motion="off"] {
  view-transition-name: none;
}

:root[data-motion="off"] .site-header {
  view-transition-name: none;
}

:root[data-motion="off"]::view-transition-group(*),
:root[data-motion="off"]::view-transition-old(*),
:root[data-motion="off"]::view-transition-new(*) {
  animation: none !important;
}

:root[data-motion="off"]::view-transition-old(*) {
  display: none;
}

:root[data-motion="off"]::view-transition-new(*) {
  clip-path: none;
  transform: none;
  opacity: 1;
}

:root[data-motion="off"] .route-transition-curtain {
  display: none;
}

:root[data-motion="off"][data-route-transition] main,
:root[data-motion="off"][data-route-transition] .site-footer {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  :root, .site-header { view-transition-name: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  ::view-transition-old(*) { display: none; }
  ::view-transition-new(*) { clip-path: none; transform: none; opacity: 1; }
  .route-transition-curtain { display: none; }
  :root[data-route-transition] main,
  :root[data-route-transition] .site-footer { animation: none; }
}