@view-transition {
  navigation: auto;
}

/* Only the page transitions. The root (the room behind it) is left
   live, so the weather is never frozen in a snapshot mid-sway. The
   page has no background of its own, so a crossfade would show both
   texts at once: the old page goes at once and the new one fades in. */
.site-wrapper {
  view-transition-name: page;
}

::view-transition-old(root) {
  animation: none;
  opacity: 0;
}

::view-transition-new(root) {
  animation: none;
}

/* The page (nav and all) is the same from one page to the next, so it
   does not animate: the old is dropped and the new shown at once. The
   sheet below is the only thing that moves. */
::view-transition-group(page) {
  animation: none;
}

::view-transition-old(page) {
  animation: none;
  opacity: 0;
}

::view-transition-new(page) {
  animation: none;
}

/* The sheet: every page has one, and it is the same sheet. On
   navigation its box moves from the one page's to the other's -- the
   list card grows into the essay, the essay shrinks back to the card
   -- while the contents crossfade. The snapshots are pinned to the
   top left corner at their own size and clipped, rather than scaled
   to the moving box, so nothing stretches. */
.sheet {
  view-transition-name: sheet;
}

::view-transition-group(sheet) {
  animation-duration: 800ms;
  animation-timing-function: ease-out;
}

::view-transition-image-pair(sheet) {
  overflow: clip;
  border-radius: 8px;
}

::view-transition-old(sheet),
::view-transition-new(sheet) {
  height: 100%;
  object-fit: none;
  object-position: top left;
  animation-duration: 800ms;
}