@view-transition {
  navigation: auto;
}

.site-nav {
  view-transition-name: ip-site-header;
}

main {
  view-transition-name: ip-page-main;
}

::view-transition-group(ip-site-header) {
  z-index: 60;
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

::view-transition-old(ip-site-header),
::view-transition-new(ip-site-header) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(ip-page-main) {
  animation: ip-page-out 150ms cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(ip-page-main) {
  animation: ip-page-in 340ms cubic-bezier(.22, 1, .36, 1) 35ms both;
}

::view-transition-old(root) {
  animation: ip-root-out 150ms ease both;
}

::view-transition-new(root) {
  animation: ip-root-in 300ms ease 30ms both;
}

.site-nav::after {
  content: "";
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #3093f5 18%, #61b0ff 72%, transparent 100%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

html.ip-page-arriving .site-nav::after {
  animation: ip-route-line 650ms cubic-bezier(.22, 1, .36, 1) both;
}

html.ip-page-fallback-arriving main {
  animation: ip-page-in 340ms cubic-bezier(.22, 1, .36, 1) 25ms both;
}

@keyframes ip-page-out {
  to {
    opacity: 0;
    transform: translateY(-5px);
  }
}

@keyframes ip-page-in {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ip-root-out {
  to { opacity: .72; }
}

@keyframes ip-root-in {
  from { opacity: .72; }
  to { opacity: 1; }
}

@keyframes ip-route-line {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  18% { opacity: .82; }
  72% {
    opacity: .82;
    transform: scaleX(1);
    transform-origin: left center;
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

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

  html.ip-page-arriving .site-nav::after,
  html.ip-page-fallback-arriving main {
    animation: none;
  }
}