/* Shared page-entry transition. Pages with a custom background can set
   --page-transition-background on their body rule to fade it in as well. */
body {
    position: relative;
    isolation: isolate;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--page-transition-background, none);
    background-position: center;
    background-size: cover;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 250ms ease-out, transform 250ms ease-out;
    pointer-events: none;
}

body.page-ready {
    opacity: 1;
}

body.page-ready::before {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    body,
    body::before {
        opacity: 1;
        transform: none;
        transition: none;
    }
}