#page-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: #ffffff;

    /* start hidden */
    opacity: 0;
    visibility: hidden;

    /* focus effect */
    backdrop-filter: blur(0px);
    transform: scale(1);

    transition:
        opacity 0.45s ease,
        backdrop-filter 0.45s ease,
        transform 0.45s ease,
        visibility 0.45s ease;
}

/* ACTIVE STATE */
#page-transition.active {
    opacity: 1;
    visibility: visible;

    /* unfocus old page */
    backdrop-filter: blur(12px);
    transform: scale(1.02);
}

/* optional */
body.transitioning {
    overflow: hidden;
}