@view-transition {
    navigation: auto;
}

::view-transition {
    background-color: var(--bg-primary, #ffffff);
}

::view-transition-group(root) {
    animation-duration: 340ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}

::view-transition-old(root) {
    animation: page-transition-out 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

::view-transition-new(root) {
    animation: page-transition-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The same text-sized label appears in both documents. It travels above the
   root snapshots without inheriting either page's differently padded anchor. */
.page-transition-blog-label {
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    view-transition-name: blog-nav-label;
}

.page-transition-header {
    view-transition-name: page-header;
}

::view-transition-group(page-header) {
    animation-duration: 460ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
}

::view-transition-image-pair(page-header) {
    isolation: isolate;
}

::view-transition-old(page-header) {
    animation: page-header-out 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

::view-transition-new(page-header) {
    animation: page-header-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

::view-transition-group(blog-nav-label) {
    animation-duration: 460ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}

::view-transition-image-pair(blog-nav-label) {
    isolation: isolate;
}

::view-transition-old(blog-nav-label),
::view-transition-new(blog-nav-label) {
    width: 100%;
    height: 100%;
    object-fit: none;
    object-position: left center;
    mix-blend-mode: normal;
}

::view-transition-old(blog-nav-label) {
    animation: blog-nav-label-out 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

::view-transition-new(blog-nav-label) {
    animation: blog-nav-label-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes page-transition-out {
    to { opacity: 0; transform: translateY(-7px); }
}

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

@keyframes blog-nav-label-out {
    to { opacity: 0; }
}

@keyframes blog-nav-label-in {
    from { opacity: 0; }
}

@keyframes page-header-out {
    0% { opacity: 1; }
    12%, 100% { opacity: 0; }
}

@keyframes page-header-in {
    0%, 58% { opacity: 0; }
    82%, 100% { opacity: 1; }
}

/* Used only when cross-document View Transitions are unavailable. */
html.page-transition-fallback.page-transition-enter body {
    animation: page-transition-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.page-transition-fallback.page-transition-exit body {
    animation: page-transition-out 180ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(root),
    ::view-transition-group(page-header),
    ::view-transition-group(blog-nav-label),
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(page-header),
    ::view-transition-new(page-header),
    ::view-transition-old(blog-nav-label),
    ::view-transition-new(blog-nav-label),
    html.page-transition-fallback.page-transition-enter body,
    html.page-transition-fallback.page-transition-exit body {
        animation: none;
    }
}