/* Page to page: the new page arrives showing what the last one showed and reframes itself (vt.js).
   The page itself is never snapshotted: on iPhones Safari draws snapshots darker than the live page. */
@view-transition { navigation: auto; }
:root { view-transition-name: none; --vt-frame: 750ms; --vt-ease: cubic-bezier(.5, 0, .2, 1); --vt-late: 520ms; --vt-words-ms: 600ms; }
@media (prefers-reduced-motion: no-preference) {
  /* the leaving page's words fade out over the arriving page */
  .vt-title { view-transition-name: home-title; } .vt-rail { view-transition-name: home-rail; } .vt-nav { view-transition-name: home-nav; }
  .vt-cap { view-transition-name: film-cap; } .vt-top { view-transition-name: film-top; }
  .vt-card { view-transition-name: film-card; } .vt-log { view-transition-name: film-log; }
  ::view-transition-old(home-title), ::view-transition-old(home-rail), ::view-transition-old(home-nav),
  ::view-transition-old(film-cap), ::view-transition-old(film-top), ::view-transition-old(film-card), ::view-transition-old(film-log) { animation: vt-out 200ms ease both; }
  @keyframes vt-out { to { opacity: 0; } }

  /* from the home's slate, the clicked card's picture grows into the poster: home.html names the card, film.html sets .from-card */
  .from-card .plate { view-transition-name: film-pic; overflow: clip; }
  .from-card .plate__top { view-transition-name: film-top-in; }
  .from-card .plate__cap { view-transition-name: film-cap-in; }
  ::view-transition-group(film-pic) { animation-duration: var(--vt-frame); animation-timing-function: var(--vt-ease); }
  /* both pictures fill the moving frame, so the card's shape can become the poster's without stretching */
  ::view-transition-old(film-pic), ::view-transition-new(film-pic) { height: 100%; object-fit: cover; animation-duration: var(--vt-frame); animation-timing-function: var(--vt-ease); }
  ::view-transition-new(film-top-in), ::view-transition-new(film-cap-in) { animation: vt-in var(--vt-words-ms) ease var(--vt-late) both; }
  @keyframes vt-in { from { opacity: 0; } }
}