/* Page-turn transition between real site pages. Self-hosted, no CDN. */

html.pf-ready {
    perspective: 1800px;
}

body.pf-leaving,
body.pf-entering {
    transform-origin: left center;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
}

/* Outgoing page: swings away like a book page being turned. */
body.pf-leaving {
    transition: transform 380ms ease-in, box-shadow 380ms ease-in;
    transform: rotateY(-95deg);
    box-shadow: -40px 0 60px -20px rgba(0, 0, 0, 0.35);
}

/* Incoming page: starts rotated away (as if just turned into place), settles flat. */
body.pf-entering {
    transform: rotateY(85deg);
    box-shadow: 40px 0 60px -20px rgba(0, 0, 0, 0.3);
}

body.pf-entering-active {
    transition: transform 420ms ease-out, box-shadow 420ms ease-out;
    transform: rotateY(0deg);
    box-shadow: none;
}

/* Avoid a transient horizontal scrollbar while the page is rotated. */
html.pf-ready {
    overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
    body.pf-leaving,
    body.pf-entering,
    body.pf-entering-active {
        transition: none !important;
        transform: none !important;
        box-shadow: none !important;
    }
}