/* Page-to-page morph (cross-document View Transitions). Loaded by case pages and index-epic.html.
   A clicked work tile names its screenshot "shot" and its client name "title"; the case page's hero
   frame and h1 carry the same names, so the browser morphs one into the other. Browsers without
   support simply navigate as usual. */
@view-transition { navigation: auto; }

.case .case-hero .frame { view-transition-name: shot; }
.case .case-head h1 { view-transition-name: title; }

/* both titles hug their text, so the small tile name and the big h1 have the same shape and simply grow into each other */
.bn__txt strong { width: fit-content; }
.case .case-head h1 { width: fit-content; margin-inline: auto; }
/* arriving through the morph: the morph IS the entrance, so skip the fade-up reveal (it made the title vanish) */
:root:active-view-transition .case-head [data-r] { opacity: 1; transform: none; transition: none; }

::view-transition-group(shot),
::view-transition-group(title) { animation-duration: .8s; animation-timing-function: cubic-bezier(.45, 0, .1, 1); }
::view-transition-old(shot), ::view-transition-new(shot) { height: 100%; object-fit: cover; object-position: top; }
/* title: scale by height (same text → same proportions) and crossfade quickly in the middle, so it reads as one word growing */
::view-transition-old(title), ::view-transition-new(title) { height: 100%; width: auto; left: 50%; translate: -50% 0; animation-duration: .8s; animation-timing-function: cubic-bezier(.45, 0, .1, 1); }
::view-transition-old(title) { animation-name: vt-title-out; }
::view-transition-new(title) { animation-name: vt-title-in; }
@keyframes vt-title-out { 0%, 35% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes vt-title-in { 0%, 35% { opacity: 0; } 65%, 100% { opacity: 1; } }
::view-transition-old(root) { animation: vt-out .35s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: vt-in .5s cubic-bezier(.2, .8, .2, 1) .1s both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

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