/* The browser morphs the selected card into the destination hero. */
@view-transition {
  navigation: auto;
}

::view-transition-group(project-page) {
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

::view-transition-image-pair(project-page) {
  isolation: isolate;
  overflow: clip;
}

::view-transition-old(project-page),
::view-transition-new(project-page) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  mix-blend-mode: normal;
}

::view-transition-old(project-page) {
  animation: project-fade-out 220ms ease-out both;
}

::view-transition-new(project-page) {
  animation: project-fade-in 380ms 100ms ease-out both;
}

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

::view-transition-new(root) {
  animation: project-fade-in 360ms ease-out both;
}

@keyframes project-fade-out {
  to { opacity: 0; }
}

@keyframes project-fade-in {
  from { opacity: 0; }
}

@keyframes project-arrive {
  from { opacity: 0; transform: translateY(16px) scale(0.975); }
  to { opacity: 1; transform: none; }
}

/* Direct visits and browsers without cross-document transitions still get an entrance. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.has-project-transition) .app-hero {
    transform-origin: center top;
    animation: project-arrive 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

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

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}