/* Native page transitions preserve links, history, and scroll restoration. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: page-depart 180ms ease-out both;
}
::view-transition-new(root) {
  animation: page-arrive 500ms 100ms cubic-bezier(.22, 1, .36, 1) both;
}
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }

/* The card becomes the gallery, keeping its position and shape in motion. */
.project-ourra .project-media,
[data-project="ourra"] .gallery-track { view-transition-name: project-ourra; }
.project-maintenance .project-media,
[data-project="checkout"] .gallery-track { view-transition-name: project-checkout; }
.project-warranty .project-media,
[data-project="warranty"] .gallery-track { view-transition-name: project-warranty; }
.project-kito .project-media,
[data-project="kito"] .gallery-track { view-transition-name: project-kito; }

::view-transition-group(project-ourra),
::view-transition-group(project-checkout),
::view-transition-group(project-warranty),
::view-transition-group(project-kito) {
  animation-duration: 720ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  z-index: 2;
  overflow: clip;
  border-radius: 16px;
}
::view-transition-old(project-ourra),
::view-transition-old(project-checkout),
::view-transition-old(project-warranty),
::view-transition-old(project-kito) {
  height: 100%;
  object-fit: cover;
  animation: image-depart 480ms ease both;
}
::view-transition-new(project-ourra),
::view-transition-new(project-checkout),
::view-transition-new(project-warranty),
::view-transition-new(project-kito) {
  height: 100%;
  object-fit: cover;
  animation: image-arrive 560ms 100ms ease both;
}

.case-header { view-transition-name: case-heading; }
.project-summary { view-transition-name: case-details; }
::view-transition-new(case-heading) {
  animation: content-arrive 600ms 180ms cubic-bezier(.22, 1, .36, 1) both;
}
::view-transition-new(case-details) {
  animation: content-arrive 600ms 280ms cubic-bezier(.22, 1, .36, 1) both;
}
::view-transition-old(case-heading),
::view-transition-old(case-details) { animation: page-depart 180ms ease-out both; }

/* Avoid replaying the homepage's entrance underneath the return transition. */
html:active-view-transition .project-card { animation: none; }

@keyframes image-depart { to { opacity: 0; } }
@keyframes image-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes content-arrive {
  from { opacity: 0; transform: translateY(32px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* Keep a captured cursor from drifting with the page snapshot. */
.portfolio-cursor { view-transition-name: portfolio-pointer; }
::view-transition-old(portfolio-pointer),
::view-transition-new(portfolio-pointer) { animation: none; opacity: 0; }

@keyframes page-depart {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes page-arrive {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}