@view-transition {
  navigation: auto;
}

::view-transition { background: #000; }

.site-header { view-transition-name: portfolio-header; }
.site-name { view-transition-name: portfolio-brand; }

@keyframes portfolio-page-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes portfolio-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

::view-transition-old(root) {
  animation: portfolio-page-out 180ms ease-out both;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: portfolio-page-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  mix-blend-mode: normal;
}

::view-transition-group(portfolio-header) { animation-duration: 220ms; }

::view-transition-old(portfolio-header),
::view-transition-new(portfolio-header) {
  animation-duration: 180ms;
  mix-blend-mode: normal;
}

::view-transition-group(portfolio-brand) {
  z-index: 5;
  animation-duration: 220ms;
  animation-timing-function: ease;
}

::view-transition-old(portfolio-brand) { animation: none; opacity: 0; }
::view-transition-new(portfolio-brand) { animation: none; opacity: 1; mix-blend-mode: normal; }

@keyframes portfolio-image-out {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to {
    opacity: 0;
    transform: translate3d(var(--project-exit-x), var(--project-exit-y), 0) scale(var(--project-exit-scale));
  }
}

@keyframes portfolio-image-in {
  from {
    opacity: 0;
    transform: translate3d(var(--project-enter-x), var(--project-enter-y), 0) scale(var(--project-enter-scale));
  }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes portfolio-content-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.shared-project-transition { view-transition-name: none; }

.shared-project-transition::view-transition {
  animation: none;
}

::view-transition-group(portfolio-project-visual) {
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  animation: none;
}

::view-transition-image-pair(portfolio-project-visual) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  isolation: isolate;
}

::view-transition-old(portfolio-project-visual),
::view-transition-new(portfolio-project-visual) {
  position: absolute;
  inset: auto;
  object-fit: contain;
  transform-origin: center;
  mix-blend-mode: normal;
  will-change: transform, opacity;
}

::view-transition-old(portfolio-project-visual) {
  left: var(--project-from-x);
  top: var(--project-from-y);
  width: var(--project-from-width);
  height: var(--project-from-height);
  animation: portfolio-image-out 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
::view-transition-new(portfolio-project-visual) {
  left: var(--project-to-x);
  top: var(--project-to-y);
  width: var(--project-to-width);
  height: var(--project-to-height);
  animation: portfolio-image-in 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

::view-transition-group(portfolio-project-copy) { z-index: 3; animation: none; }
::view-transition-old(portfolio-project-copy) { animation: portfolio-page-out 120ms ease both; }
::view-transition-new(portfolio-project-copy) {
  animation: portfolio-content-in 180ms ease-out 300ms both;
}

.shared-project-transition::view-transition-group(portfolio-header) {
  z-index: 4;
  overflow: clip;
  background: #000;
  animation: none;
}
.shared-project-transition::view-transition-old(portfolio-header) {
  animation: portfolio-page-out 90ms ease-out both;
}
.shared-project-transition::view-transition-new(portfolio-header) {
  animation: portfolio-content-in 140ms ease-out 90ms both;
}

html.page-enter .case-hero > img,
html.page-enter .case-hero-copy {
  animation: portfolio-page-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

  html.page-enter .case-hero > img,
  html.page-enter .case-hero-copy,
  .shared-project-transition::view-transition,
  .shared-project-transition::view-transition-old(portfolio-header),
  .shared-project-transition::view-transition-new(portfolio-header),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(portfolio-header),
  ::view-transition-old(portfolio-header),
  ::view-transition-new(portfolio-header),
  ::view-transition-group(portfolio-brand),
  ::view-transition-old(portfolio-brand),
  ::view-transition-new(portfolio-brand),
  ::view-transition-group(portfolio-project-visual),
  ::view-transition-old(portfolio-project-visual),
  ::view-transition-new(portfolio-project-visual),
  ::view-transition-group(portfolio-project-copy),
  ::view-transition-old(portfolio-project-copy),
  ::view-transition-new(portfolio-project-copy) { animation: none; }
}