/* Page transition between the home page's case cards and the case-study pages (cross-document View Transitions).
   The clicked card's cover grows into the case study's hero, the nav stays put, the rest of the page crossfades.
   transition.js decides which element carries the shared name. Browsers without support just navigate. */
@view-transition { navigation: auto; }

.nav { view-transition-name: site-nav; }

/* the coloured box grows into the hero; its two snapshots are plain backgrounds, so a crossfade is invisible */
::view-transition-group(case-hero), ::view-transition-group(case-media) { animation-duration: .7s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
::view-transition-old(case-hero), ::view-transition-new(case-hero) { width: 100%; height: 100%; object-fit: cover; }
::view-transition-old(case-hero) { animation: .5s ease both vt-out; }
::view-transition-new(case-hero) { animation: .5s ease both vt-in; }
/* the mockup is the same image on both pages: no crossfade, it only moves and grows */
::view-transition-old(case-media) { animation: none; opacity: 0; }
::view-transition-new(case-media) { animation: none; width: 100%; height: 100%; object-fit: contain; }
/* the hero's white curve stays over the mockup's cropped edge (Domino's), fading with the hero */
::view-transition-old(case-curve) { animation: .3s ease both vt-out; }
::view-transition-new(case-curve) { animation: .3s ease both vt-in; }

::view-transition-old(root) { animation: .25s ease both vt-out; }
::view-transition-new(root) { animation: .4s .3s ease both vt-in; }

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

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