@view-transition { navigation: auto; }

/* The browser carries the same photograph between its two real page layouts. */
::view-transition-group(*) {
  animation-duration: 760ms;
  animation-timing-function: cubic-bezier(.22, .72, .16, 1);
}
::view-transition-old(root) { animation: amp-page-out 280ms ease both; }
::view-transition-new(root) { animation: amp-page-in 640ms 80ms ease both; }
::view-transition-group(amp-story-photo) { z-index: 3; }
::view-transition-image-pair(amp-story-photo) { isolation: isolate; overflow: clip; }
::view-transition-old(amp-story-photo),
::view-transition-new(amp-story-photo) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}
::view-transition-old(amp-story-photo) { animation: amp-photo-out 760ms ease both; }
::view-transition-new(amp-story-photo) { animation: amp-photo-in 760ms ease both; }

/* The title settles after the photograph has begun opening into the story. */
::view-transition-group(amp-story-title) { z-index: 4; animation-duration: 660ms; }
::view-transition-image-pair(amp-story-title) { isolation: isolate; }
::view-transition-old(amp-story-title) { animation: amp-title-out 160ms ease both; mix-blend-mode: normal; }
::view-transition-new(amp-story-title) { animation: amp-title-in 540ms 180ms cubic-bezier(.2, .7, .2, 1) both; mix-blend-mode: normal; }

/* On return, the photograph folds back into the card or selected story. */
html[data-amp-story-transition='return']::view-transition-group(amp-story-photo) { animation-duration: 700ms; }
html[data-amp-story-transition='return']::view-transition-old(amp-story-photo),
html[data-amp-story-transition='return']::view-transition-new(amp-story-photo) { animation-duration: 700ms; }
html[data-amp-story-transition='return']::view-transition-new(root) { animation: amp-page-in 580ms 100ms ease both; }
html[data-amp-story-transition='return']::view-transition-new(amp-story-title) { animation-name: amp-title-return; animation-duration: 500ms; animation-delay: 160ms; }

@keyframes amp-page-out { to { opacity: 0; } }
@keyframes amp-page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes amp-photo-out { 0%, 28% { opacity: 1; } 100% { opacity: 0; } }
@keyframes amp-photo-in { 0% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes amp-title-out { to { opacity: 0; transform: translateY(-5px); } }
@keyframes amp-title-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes amp-title-return { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

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