@view-transition {
  navigation: auto;
}

/* Leave the destination page live; only the title and article copy need
   snapshots. Capturing the entire illustrated homepage stalls return frames. */
html {
  view-transition-name: none;
}

/* Each line keeps its own alignment as it travels from the left-aligned card
   to the centered headline. Only these lines change position and size. */
.article-title-line {
  display: block;
  width: fit-content;
  max-width: 100%;
}
.article-detail .article-title-line {
  margin-inline: auto;
}
.article-detail .article-title-line:nth-child(1) {
  view-transition-name: article-title-1;
}
.article-detail .article-title-line:nth-child(2) {
  view-transition-name: article-title-2;
}
.article-body {
  view-transition-name: article-copy;
}
.article-subtitle {
  view-transition-name: article-subtitle;
}
.article-detail > .byline {
  view-transition-name: article-byline;
}
.article-nav,
body > header {
  view-transition-name: site-navigation;
}

::view-transition {
  pointer-events: none;
}
::view-transition-group(site-navigation),
::view-transition-group(article-copy),
::view-transition-group(article-subtitle),
::view-transition-group(article-byline) {
  animation: none;
}
::view-transition-group(article-title-1),
::view-transition-group(article-title-2) {
  animation-duration: 800ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  transform-origin: 0 0;
  will-change: transform;
}
::view-transition-old(site-navigation),
::view-transition-old(article-title-1),
::view-transition-old(article-title-2) {
  animation: none;
  opacity: 0;
}
::view-transition-new(site-navigation),
::view-transition-new(article-title-1),
::view-transition-new(article-title-2) {
  animation: none;
  opacity: 1;
  mix-blend-mode: normal;
}
::view-transition-new(article-title-1),
::view-transition-new(article-title-2) {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: left top;
}
::view-transition-new(article-copy),
::view-transition-new(article-subtitle),
::view-transition-new(article-byline) {
  animation: article-text-fade 180ms ease-out 560ms both;
  mix-blend-mode: normal;
}
::view-transition-old(article-copy),
::view-transition-old(article-subtitle),
::view-transition-old(article-byline) {
  animation: article-text-fade 120ms ease-in reverse both;
  mix-blend-mode: normal;
}
@keyframes article-text-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Capture the return as one stable layer after scroll restoration. */
html:has(body[data-article-return]) {
  view-transition-name: article-return;
}
body[data-article-return] .article-title-line,
body[data-article-return] .article-body,
body[data-article-return] .article-subtitle,
body[data-article-return] .article-detail > .byline {
  view-transition-name: none;
}
::view-transition-group(article-return) {
  animation: none;
}
::view-transition-old(article-return) {
  animation: article-text-fade 240ms ease-in-out reverse both;
  mix-blend-mode: normal;
}
::view-transition-new(article-return) {
  animation: article-text-fade 240ms ease-in-out both;
  mix-blend-mode: normal;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0s;
    animation-delay: 0s;
  }
}

/* Mobile articles use ordinary navigation, without shared text animations. */
@media (max-width: 700px) {
  @view-transition {
    navigation: none;
  }
}