@view-transition {
  navigation: auto;
}

.transition-heading {
  position: relative;
  view-transition-name: page-heading;
}

.morning {
  view-transition-name: page-media;
}

.projects-page .project-post:first-of-type .project-images-row {
  view-transition-name: page-media;
}

::view-transition-group(root) {
  animation-duration: 280ms;
  animation-timing-function: ease-out;
}

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

::view-transition-new(root) {
  animation: transition-in 280ms 35ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

::view-transition-group(page-heading) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-group(page-media) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(page-heading),
::view-transition-new(page-heading),
::view-transition-old(page-media),
::view-transition-new(page-media) {
  mix-blend-mode: normal;
}

html.page-arriving .p-body {
  animation: none;
}

html.page-arriving .transition-heading::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 38px;
  height: 1px;
  background: color-mix(in srgb, #2563eb 62%, transparent);
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  animation: transition-trace 480ms 45ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes transition-out {
  to { opacity: 0; }
}

@keyframes transition-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes transition-trace {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  20% { opacity: 0.5; }
  68% {
    opacity: 0.5;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translateX(7px) scaleX(0.72);
  }
}

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

  html.page-arriving .transition-heading::after {
    display: none;
  }
}