/* Shared scrolling and page-turn motion. */
html { scroll-padding-top: calc(var(--ssx-header-height, 96px) + 16px); }
html.lenis, html.lenis body { scroll-behavior: auto !important; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    @view-transition { navigation: auto; }

    ::view-transition-group(root) { animation: none; perspective: 2400px; }
    ::view-transition-image-pair(root) { isolation: isolate; }
    ::view-transition-old(root) {
        animation: none;
        transform: none;
        opacity: 1;
        mix-blend-mode: normal;
        z-index: 1;
    }
    ::view-transition-new(root) {
        animation: ss-page-turn-in 850ms cubic-bezier(.22,.61,.36,1) both;
        transform-origin: right center;
        backface-visibility: hidden;
        mix-blend-mode: normal;
        z-index: 2;
    }
}

/* One continuous sweep: a lightly bowed free edge settles flat without pauses. */
@keyframes ss-page-turn-in {
    from {
        transform: perspective(2800px) translateX(100%) rotateY(24deg) skewY(-.7deg);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, .3% 90%, .8% 80%, 1.5% 70%, 2.1% 60%, 2.4% 50%, 2.1% 40%, 1.5% 30%, .8% 20%, .3% 10%);
        opacity: 1;
    }
    to {
        transform: perspective(2800px) translateX(0) rotateY(0) skewY(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 90%, 0 80%, 0 70%, 0 60%, 0 50%, 0 40%, 0 30%, 0 20%, 0 10%);
        opacity: 1;
    }
}

/* Page-shaped fallback for browsers without cross-document view transitions. */
.ss-page-turn-sheet {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    pointer-events: none;
    background: linear-gradient(100deg, #080808 0%, #141414 80%, #333 100%);
    transform-origin: left center;
    backface-visibility: hidden;
    box-shadow: 18px 0 50px rgba(0,0,0,.3);
}

@media (prefers-reduced-motion: reduce) {
    html, body { scroll-behavior: auto !important; }
    @view-transition { navigation: none; }
    .ss-page-turn-sheet { display: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}