@view-transition {
  navigation: auto;
}

html {
  scrollbar-gutter: stable;
}

.article-transition-title {
  width: 100%;
  view-transition-name: article-title;
}

::view-transition-group(root),
::view-transition-group(article-title) {
  animation-duration: 510ms;
  animation-timing-function: linear;
}

::view-transition-image-pair(root),
::view-transition-image-pair(article-title) {
  isolation: isolate;
}

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

html:active-view-transition-type(to-article)::view-transition-old(root),
html:active-view-transition-type(to-home)::view-transition-old(root) {
  animation: article-page-recede 210ms cubic-bezier(0.4, 0, 1, 1) both;
}

html:active-view-transition-type(to-article)::view-transition-new(root),
html:active-view-transition-type(to-home)::view-transition-new(root) {
  animation: article-page-arrive 280ms 230ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html:active-view-transition-type(to-article)::view-transition-old(article-title),
html:active-view-transition-type(to-home)::view-transition-old(article-title) {
  animation: article-title-erase 190ms cubic-bezier(0.4, 0, 1, 1) both;
}

html:active-view-transition-type(to-article)::view-transition-new(article-title),
html:active-view-transition-type(to-home)::view-transition-new(article-title) {
  animation: article-title-reveal 280ms 230ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes article-title-erase {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 0 0 100%); }
}

@keyframes article-title-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes article-page-recede {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

@keyframes article-page-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

html.article-entry-pending .article-transition-meta,
html.article-entry-pending .article-transition-copy > p {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(var(--article-entry-y, 10px));
}

html.article-entry-revealing .article-transition-meta,
html.article-entry-revealing .article-transition-copy > p {
  animation-name: article-copy-arrive;
  animation-duration: var(--article-entry-duration, 460ms);
  animation-delay: var(--article-entry-delay, 0ms);
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
}

.article-transition-meta {
  --article-entry-duration: 380ms;
  --article-entry-y: 8px;
}

.article-transition-copy > p:nth-child(1) {
  --article-entry-delay: 55ms;
  --article-entry-duration: 440ms;
  --article-entry-y: 9px;
}

.article-transition-copy > p:nth-child(2) {
  --article-entry-delay: 125ms;
  --article-entry-duration: 500ms;
  --article-entry-y: 12px;
}

.article-transition-copy > p:nth-child(3) {
  --article-entry-delay: 205ms;
  --article-entry-duration: 455ms;
  --article-entry-y: 10px;
}

.article-transition-copy > p:nth-child(4) {
  --article-entry-delay: 270ms;
  --article-entry-duration: 520ms;
  --article-entry-y: 11px;
}

.article-transition-copy > p:nth-child(5) {
  --article-entry-delay: 345ms;
  --article-entry-duration: 470ms;
  --article-entry-y: 8px;
}

.article-transition-copy > p:nth-child(n + 6) {
  --article-entry-delay: 405ms;
  --article-entry-duration: 510ms;
  --article-entry-y: 10px;
}

@keyframes article-copy-arrive {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(var(--article-entry-y, 10px));
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-group(article-title),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(article-title),
  ::view-transition-new(article-title) {
    animation-duration: 0.01ms;
    animation-delay: 0ms;
  }

  html.article-entry-pending .article-transition-meta,
  html.article-entry-pending .article-transition-copy > p,
  html.article-entry-revealing .article-transition-meta,
  html.article-entry-revealing .article-transition-copy > p {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }
}