@view-transition {
  navigation: auto;
}

html {
  background: #141414;
}

::view-transition-group(root) {
  animation-duration: 440ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation: submarine-page-out 340ms cubic-bezier(.4, 0, .2, 1) both;
}

::view-transition-new(root) {
  animation: submarine-page-in 440ms cubic-bezier(.22, 1, .36, 1) both;
}

/* The selected homepage cover is the one piece of editorial content that stays
   visually continuous while the new reader document initializes. Only the
   clicked cover receives one of these names in page-transitions.js. */
::view-transition-group(issue-1-cover),
::view-transition-group(issue-2-cover),
::view-transition-group(issue-3-cover) {
  z-index: 1000;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

::view-transition-image-pair(issue-1-cover),
::view-transition-image-pair(issue-2-cover),
::view-transition-image-pair(issue-3-cover) {
  isolation: auto;
}

::view-transition-old(issue-1-cover),
::view-transition-new(issue-1-cover),
::view-transition-old(issue-2-cover),
::view-transition-new(issue-2-cover),
::view-transition-old(issue-3-cover),
::view-transition-new(issue-3-cover) {
  mix-blend-mode: normal;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

/* Keep the document-level transition to opacity only. Scaling the complete page
   also scales fixed/background layers and was perceptible as a tiny vibration
   when the live homepage replaced the View Transition snapshot. */
@keyframes submarine-page-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes submarine-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(issue-1-cover),
  ::view-transition-old(issue-1-cover),
  ::view-transition-new(issue-1-cover),
  ::view-transition-group(issue-2-cover),
  ::view-transition-old(issue-2-cover),
  ::view-transition-new(issue-2-cover),
  ::view-transition-group(issue-3-cover),
  ::view-transition-old(issue-3-cover),
  ::view-transition-new(issue-3-cover) {
    animation-duration: 1ms !important;
    transform: none !important;
  }
}