@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  html[data-project-transition] {
    --project-duration: 300ms;
    --project-ease: cubic-bezier(0.77, 0, 0.175, 1);
    --project-radius-from: 12px;
    --project-radius-to: 24px;
  }
  html[data-project-transition="backward"] {
    --project-radius-from: 24px;
    --project-radius-to: 12px;
  }
  html[data-project-transition] .go { visibility: hidden; }
  html[data-project-transition]::view-transition-group(project-hero) {
    animation-duration: var(--project-duration);
    animation-timing-function: var(--project-ease);
    z-index: 1;
  }
  html[data-project-transition]::view-transition-image-pair(project-hero) {
    isolation: isolate;
    overflow: clip;
    animation: project-corners var(--project-duration) var(--project-ease) both;
  }
  html[data-project-transition]::view-transition-old(project-hero),
  html[data-project-transition]::view-transition-new(project-hero) {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: normal;
  }
  /* Hold the complete thumbnail while its field expands, then reveal the
     live hero over it. There is always an opaque image underneath. */
  html[data-project-transition]::view-transition-old(project-hero) { animation: none; opacity: 1; }
  html[data-project-transition]::view-transition-new(project-hero) { animation: project-reveal 120ms 180ms both; }
  html[data-project-transition]::view-transition-group(site-nav) { animation: none; z-index: 2; }
  html[data-project-transition]::view-transition-group(root),
  html[data-project-transition]::view-transition-old(root),
  html[data-project-transition]::view-transition-new(root) { animation-duration: 180ms; }

  @keyframes project-reveal { from { opacity: 0; } to { opacity: 1; } }
  @keyframes project-corners {
    from { border-radius: var(--project-radius-from); }
    to { border-radius: var(--project-radius-to); }
  }
}
@media (max-width: 900px) {
  html[data-project-transition] { --project-radius-from: 10px; --project-radius-to: 16px; }
  html[data-project-transition="backward"] { --project-radius-from: 16px; --project-radius-to: 10px; }
}