html {
    background: #EFEFE5;
}

.page-transition {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(12px) scale(0.992);
    transform-origin: 50% 50%;
    transition:
        opacity 650ms ease,
        filter 650ms ease,
        transform 650ms cubic-bezier(0.22, 0.72, 0.2, 1);
}

.page-transition.page-visible {
    opacity: 1;
    /* Both `filter` and `transform` must resolve to `none` when settled —
       otherwise the body keeps a containing block and `position: fixed`
       children (the article back orb) scroll away instead of staying pinned.
       `blur(0)` still counts as a filter, so it must be `none`, not `blur(0)`. */
    filter: none;
    transform: none;
}

.page-transition.page-leaving {
    pointer-events: none;
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-12px) scale(0.992);
}

@media (prefers-reduced-motion: reduce) {
    .page-transition,
    .page-transition.page-visible,
    .page-transition.page-leaving {
        filter: none;
        transform: none;
        transition-duration: 120ms;
    }
}