/* Cross-document page transitions are progressive enhancement. */
@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.16,.78,.18,1);
}

::view-transition-old(root) {
  animation: page-out 260ms ease both;
}

::view-transition-new(root) {
  animation: page-in-transition 420ms cubic-bezier(.16,.78,.18,1) both;
}

/* The active homepage title and the article title share a visual identity,
   so supported browsers can morph between them instead of cross-fading only. */
.feature-card.is-active h1,
article.post h1 {
  view-transition-name: article-title;
}

::view-transition-group(article-title) {
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(.16,.78,.18,1);
}

::view-transition-old(article-title) {
  animation: title-out 260ms ease both;
}

::view-transition-new(article-title) {
  animation: title-in 500ms cubic-bezier(.16,.78,.18,1) both;
}

@keyframes page-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

@keyframes page-in-transition {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes title-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-group(article-title) {
    animation-duration: 1ms;
  }
}