/*
 * Public page transition effects.
 * This stylesheet is loaded ONLY when an effect is enabled.
 * Normal navigation stays authoritative; no fixed navigation delay is added.
 */

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

    ::view-transition-group(root) {
        animation-duration: .32s;
        animation-timing-function: cubic-bezier(.22,.72,.18,1);
    }

    ::view-transition-new(root) {
        animation: page-transition-reveal .16s ease-out both;
    }

    html.page-transition-effect-diagonal-peel::view-transition-old(root) {
        transform-origin: 100% 0%;
        animation: page-transition-diagonal-peel .30s cubic-bezier(.3,.74,.24,1) both;
        filter: drop-shadow(-18px 16px 18px rgba(0,0,0,.22));
    }

    html.page-transition-effect-paper-tear::view-transition-old(root) {
        animation: page-transition-paper-tear-center .30s cubic-bezier(.24,.72,.22,1) both;
        filter: drop-shadow(0 12px 18px rgba(0,0,0,.26));
    }

    html.page-transition-effect-paper-tear.page-transition-tear-diagonal::view-transition-old(root),
    html.page-transition-effect-paper-tear[data-page-transition-tear-actual="diagonal"]::view-transition-old(root) {
        animation-name: page-transition-paper-tear-diagonal;
    }

    @keyframes page-transition-reveal {
        from { opacity:.88; }
        to { opacity:1; }
    }

    @keyframes page-transition-diagonal-peel {
        0% {
            clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
            transform:perspective(1200px) rotateY(0deg) rotateZ(0deg) translate3d(0,0,0);
            opacity:1;
        }
        55% {
            clip-path:polygon(0 0,82% 0,100% 18%,100% 100%,0 100%);
            transform:perspective(1200px) rotateY(-3deg) rotateZ(-.4deg) translate3d(-1.5%,0,0);
            opacity:.98;
        }
        100% {
            clip-path:polygon(0 0,0 0,100% 100%,0 100%);
            transform:perspective(1200px) rotateY(-9deg) rotateZ(-1.2deg) translate3d(-5%,1%,0);
            opacity:.82;
        }
    }

    /*
     * A widening transparent tear exposes the incoming page underneath.
     * The alternating narrow stops produce a rougher paper-like edge while
     * keeping the effect inexpensive enough for mobile.
     */
    @keyframes page-transition-paper-tear-center {
        0% {
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 56%,49.7% 54%,50.3% 51%,49.6% 48%,50.4% 44%,
                49.7% 40%,50.4% 36%,49.6% 31%,50.3% 27%,49.7% 22%,0 24%
            );
            transform:scaleX(1);
            opacity:1;
        }
        48% {
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 58%,43% 55%,57% 51%,43% 47%,57% 43%,
                43% 39%,57% 34%,43% 30%,57% 25%,43% 20%,0 22%
            );
            transform:scaleX(1.025);
            opacity:.96;
        }
        100% {
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 62%,8% 57%,92% 51%,8% 45%,92% 39%,
                8% 33%,92% 27%,8% 20%,92% 13%,8% 7%,0 10%
            );
            transform:scaleX(1.075);
            opacity:.18;
        }
    }

    @keyframes page-transition-paper-tear-diagonal {
        0% {
            clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 72%,49% 60%,51% 56%,49% 51%,51% 46%,49% 41%,51% 36%,49% 31%,0 43%);
            transform:rotate(0deg) scale(1);
            opacity:1;
        }
        52% {
            clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 78%,38% 64%,62% 57%,38% 50%,62% 43%,38% 36%,62% 29%,38% 22%,0 37%);
            transform:rotate(.35deg) scale(1.025);
            opacity:.94;
        }
        100% {
            clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 92%,4% 70%,96% 58%,4% 46%,96% 34%,4% 22%,96% 10%,4% 0,0 12%);
            transform:rotate(.8deg) scale(1.06);
            opacity:.14;
        }
    }
}

/* Direct-animation fallback used only where cross-document View Transitions
   are unavailable. */
html.page-transition-fallback-running {
    transform-origin:center center;
    will-change:clip-path,transform,opacity;
}


/* =========================================================
   Deterministic exit effects
   Used when a minimum transition time is configured.
   These animate the live document itself, so they remain visible even when
   cross-document View Transitions are unavailable or do not fire.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
    html.page-transition-running{
        overflow:hidden !important;
    }

    html.page-transition-running body{
        transform-origin:center center;
        backface-visibility:hidden;
        will-change:transform,clip-path,opacity,filter;
    }

    html.page-transition-running-diagonal-peel body{
        transform-origin:100% 0%;
        animation:page-transition-live-diagonal-peel var(--page-transition-live-duration,.30s) cubic-bezier(.22,.68,.16,1) both;
    }

    html.page-transition-running-paper-tear-center body{
        animation:page-transition-live-paper-tear-center var(--page-transition-live-duration,.30s) cubic-bezier(.22,.68,.16,1) both;
    }

    html.page-transition-running-paper-tear-diagonal body{
        animation:page-transition-live-paper-tear-diagonal var(--page-transition-live-duration,.30s) cubic-bezier(.22,.68,.16,1) both;
    }

    @keyframes page-transition-live-diagonal-peel{
        0%{
            clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
            transform:perspective(1200px) rotateY(0deg) rotateZ(0deg) translate3d(0,0,0);
            filter:drop-shadow(0 0 0 rgba(0,0,0,0));
            opacity:1;
        }
        38%{
            clip-path:polygon(0 0,91% 0,100% 12%,100% 100%,0 100%);
            transform:perspective(1200px) rotateY(-4deg) rotateZ(-.5deg) translate3d(-1%,0,0);
            filter:drop-shadow(-10px 10px 10px rgba(0,0,0,.18));
            opacity:1;
        }
        100%{
            clip-path:polygon(0 0,3% 0,100% 100%,0 100%);
            transform:perspective(1200px) rotateY(-14deg) rotateZ(-2deg) translate3d(-7%,2%,0);
            filter:drop-shadow(-24px 18px 22px rgba(0,0,0,.32));
            opacity:.22;
        }
    }

    @keyframes page-transition-live-paper-tear-center{
        0%{
            clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
            transform:scale(1);
            opacity:1;
        }
        42%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 59%,44% 56%,56% 52%,44% 48%,56% 44%,
                44% 40%,56% 36%,44% 31%,56% 27%,44% 22%,0 24%
            );
            transform:scaleX(1.018);
            filter:drop-shadow(0 10px 12px rgba(0,0,0,.18));
            opacity:.98;
        }
        100%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 66%,6% 59%,94% 53%,6% 47%,94% 41%,
                6% 35%,94% 29%,6% 23%,94% 17%,6% 10%,0 13%
            );
            transform:scaleX(1.075);
            filter:drop-shadow(0 20px 22px rgba(0,0,0,.3));
            opacity:.08;
        }
    }

    @keyframes page-transition-live-paper-tear-diagonal{
        0%{
            clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
            transform:rotate(0deg) scale(1);
            opacity:1;
        }
        42%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 79%,39% 65%,61% 58%,39% 51%,61% 44%,
                39% 37%,61% 30%,39% 23%,0 38%
            );
            transform:rotate(.35deg) scale(1.018);
            filter:drop-shadow(0 12px 14px rgba(0,0,0,.2));
            opacity:.98;
        }
        100%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 94%,4% 72%,96% 60%,4% 48%,96% 36%,
                4% 24%,96% 12%,4% 0,0 12%
            );
            transform:rotate(.9deg) scale(1.07);
            filter:drop-shadow(0 20px 22px rgba(0,0,0,.3));
            opacity:.08;
        }
    }
}


/* =========================================================
   Destination-page backdrop
   A same-origin visual iframe is loaded beneath the current page while the
   live page peels/tears away. It never handles input and never replaces the
   final ordinary navigation.
   ========================================================= */
.page-transition-next-preview{
    position:fixed;
    inset:0;
    z-index:2147483000;
    width:100vw;
    height:100vh;
    height:100dvh;
    margin:0;
    padding:0;
    border:0;
    background:#fff;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
}

.page-transition-next-backdrop{
    position:fixed;
    inset:0;
    z-index:2147482999;
    width:100vw;
    height:100vh;
    height:100dvh;
    margin:0;
    padding:0;
    border:0;
    background:#000;
    pointer-events:none;
}

.page-transition-next-preview--probe-only{
    width:1px!important;
    height:1px!important;
    inset:auto auto 0 0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
}

html.page-transition-preview-ready .page-transition-next-preview{
    opacity:1;
    visibility:visible;
}

/* Keep the current live page above the prefetched destination. */
html.page-transition-running body{
    position:relative;
    z-index:2147483001;
}

/* The iframe is appended to body, so pull it back out of body's animated
   stacking context and keep it fixed underneath. */
html.page-transition-running body > .page-transition-next-preview{
    position:fixed !important;
    z-index:-1 !important;
}

/*
 * Because an iframe placed inside an animated body would otherwise inherit
 * the body's clipping, expose a fixed backdrop using body::before while the
 * preview is still loading. Once ready, JS marks the preview and the iframe
 * itself is promoted by the rule below.
 */
html.page-transition-running.page-transition-preview-ready body{
    background:transparent !important;
}

/* Modern browsers support :has(); move the preview above the document
   background but below ordinary body content. */
@supports selector(body:has(.page-transition-next-preview)){
    html.page-transition-running body:has(.page-transition-next-preview){
        isolation:isolate;
    }
    html.page-transition-running body > .page-transition-next-preview{
        z-index:-1 !important;
    }
}


/* iframe is a sibling of body under <html>; current body animates above it. */
html.page-transition-running > .page-transition-next-backdrop{
    z-index:2147482999 !important;
}
html.page-transition-running > .page-transition-next-preview{
    z-index:2147483000 !important;
}
html.page-transition-running > body{
    z-index:2147483001 !important;
}


/* =========================================================
   Smooth transition finish
   Motion duration follows the configured minimum navigation time.
   Final frames continue moving/fading until the real page swap.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

    @keyframes page-transition-live-diagonal-peel{
        0%{
            clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
            transform:perspective(1200px) rotateY(0deg) rotateZ(0deg) translate3d(0,0,0);
            filter:drop-shadow(0 0 0 rgba(0,0,0,0));
            opacity:1;
        }
        28%{
            clip-path:polygon(0 0,96% 0,100% 6%,100% 100%,0 100%);
            transform:perspective(1200px) rotateY(-2deg) rotateZ(-.2deg) translate3d(-.4%,0,0);
            filter:drop-shadow(-5px 6px 8px rgba(0,0,0,.12));
            opacity:1;
        }
        62%{
            clip-path:polygon(0 0,68% 0,100% 34%,100% 100%,0 100%);
            transform:perspective(1200px) rotateY(-7deg) rotateZ(-.8deg) translate3d(-2.5%,.5%,0);
            filter:drop-shadow(-14px 13px 15px rgba(0,0,0,.22));
            opacity:.92;
        }
        86%{
            clip-path:polygon(0 0,25% 0,100% 77%,100% 100%,0 100%);
            transform:perspective(1200px) rotateY(-13deg) rotateZ(-1.7deg) translate3d(-6%,1.5%,0);
            filter:drop-shadow(-22px 18px 20px rgba(0,0,0,.3));
            opacity:.48;
        }
        100%{
            clip-path:polygon(0 0,0 0,100% 100%,100% 100%,0 100%);
            transform:perspective(1200px) rotateY(-18deg) rotateZ(-2.4deg) translate3d(-9%,2.5%,0);
            filter:drop-shadow(-28px 22px 24px rgba(0,0,0,.34));
            opacity:0;
        }
    }

    @keyframes page-transition-live-paper-tear-center{
        0%{
            clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
            transform:scale(1);
            filter:drop-shadow(0 0 0 rgba(0,0,0,0));
            opacity:1;
        }
        30%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 57%,47% 55%,53% 52%,47% 49%,53% 46%,
                47% 43%,53% 39%,47% 35%,53% 31%,47% 27%,0 29%
            );
            transform:scaleX(1.008);
            opacity:1;
        }
        64%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 61%,34% 57%,66% 52%,34% 47%,66% 42%,
                34% 37%,66% 32%,34% 27%,66% 22%,34% 16%,0 20%
            );
            transform:scaleX(1.035);
            filter:drop-shadow(0 12px 15px rgba(0,0,0,.2));
            opacity:.86;
        }
        88%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 68%,12% 60%,88% 53%,12% 46%,88% 39%,
                12% 32%,88% 25%,12% 18%,88% 11%,12% 4%,0 8%
            );
            transform:scaleX(1.072);
            filter:drop-shadow(0 19px 22px rgba(0,0,0,.28));
            opacity:.36;
        }
        100%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 72%,0 62%,100% 54%,0 46%,100% 38%,
                0 30%,100% 22%,0 14%,100% 6%,0 0
            );
            transform:scaleX(1.095);
            filter:drop-shadow(0 22px 24px rgba(0,0,0,.3));
            opacity:0;
        }
    }

    @keyframes page-transition-live-paper-tear-diagonal{
        0%{
            clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
            transform:rotate(0deg) scale(1);
            filter:drop-shadow(0 0 0 rgba(0,0,0,0));
            opacity:1;
        }
        30%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 75%,46% 62%,54% 58%,46% 54%,54% 50%,
                46% 46%,54% 42%,46% 38%,0 49%
            );
            transform:rotate(.12deg) scale(1.006);
            opacity:1;
        }
        64%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 82%,31% 67%,69% 59%,31% 51%,69% 43%,
                31% 35%,69% 27%,31% 19%,0 35%
            );
            transform:rotate(.42deg) scale(1.034);
            filter:drop-shadow(0 13px 16px rgba(0,0,0,.2));
            opacity:.86;
        }
        88%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 92%,9% 72%,91% 61%,9% 50%,91% 39%,
                9% 28%,91% 17%,9% 6%,0 17%
            );
            transform:rotate(.82deg) scale(1.07);
            filter:drop-shadow(0 19px 22px rgba(0,0,0,.28));
            opacity:.34;
        }
        100%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 100%,0 76%,100% 63%,0 50%,100% 37%,
                0 24%,100% 11%,0 0
            );
            transform:rotate(1.05deg) scale(1.095);
            filter:drop-shadow(0 22px 24px rgba(0,0,0,.3));
            opacity:0;
        }
    }
}


/* =========================================================
   Organic paper effects + additional transition patterns
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

    /* A softer curved peel: rounded clip path + perspective/skew gives a
       curled-sheet impression instead of a flat card flip. */
    html.page-transition-running-diagonal-peel body{
        border-radius:0 0 0 0;
        transform-origin:100% 0%;
        animation:page-transition-curved-peel var(--page-transition-live-duration,.30s)
            cubic-bezier(.18,.62,.12,1) both !important;
    }

    @keyframes page-transition-curved-peel{
        0%{
            clip-path:ellipse(145% 145% at 50% 50%);
            transform:perspective(1500px) translate3d(0,0,0) rotateY(0) rotateZ(0) skewY(0);
            border-radius:0;
            filter:drop-shadow(0 0 0 rgba(0,0,0,0));
            opacity:1;
        }
        34%{
            clip-path:ellipse(130% 122% at 35% 72%);
            transform:perspective(1500px) translate3d(-1.5%,-.5%,18px) rotateY(-2deg) rotateZ(-.3deg) skewY(-.6deg);
            border-radius:0 18% 0 0;
            filter:drop-shadow(-7px 8px 10px rgba(0,0,0,.14));
            opacity:1;
        }
        68%{
            clip-path:ellipse(96% 91% at 15% 92%);
            transform:perspective(1500px) translate3d(-8%,-2%,54px) rotateY(-8deg) rotateZ(-1.1deg) skewY(-2deg);
            border-radius:0 34% 0 0;
            filter:drop-shadow(-20px 18px 22px rgba(0,0,0,.28));
            opacity:.88;
        }
        88%{
            clip-path:ellipse(58% 57% at -2% 108%);
            transform:perspective(1500px) translate3d(-22%,-5%,92px) rotateY(-16deg) rotateZ(-2.3deg) skewY(-4deg);
            border-radius:0 48% 0 0;
            filter:drop-shadow(-30px 24px 28px rgba(0,0,0,.34));
            opacity:.5;
        }
        100%{
            clip-path:ellipse(17% 20% at -12% 116%);
            transform:perspective(1500px) translate3d(-44%,-9%,120px) rotateY(-25deg) rotateZ(-4deg) skewY(-6deg);
            border-radius:0 55% 0 0;
            filter:drop-shadow(-34px 28px 30px rgba(0,0,0,.38));
            opacity:0;
        }
    }

    /*
     * More irregular torn-paper edge.
     * The tear walks left/right by uneven amounts and uses deliberately
     * non-periodic vertical spacing so it reads less like a zig-zag line.
     */
    @keyframes page-transition-live-paper-tear-center{
        0%{
            clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
            transform:scale(1);
            opacity:1;
        }
        27%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 62%,48.8% 60%,51.4% 57.7%,48.2% 55.1%,52.1% 51.2%,
                48.9% 48.6%,51.8% 44.3%,47.7% 41.5%,52.5% 36.9%,
                49.1% 33.2%,51.2% 29.8%,48.4% 25.1%,0 28%
            );
            transform:scaleX(1.006);
            opacity:1;
        }
        58%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 68%,38% 63%,63% 59%,35% 55%,68% 50%,
                40% 46%,65% 41%,32% 37%,70% 31%,
                42% 27%,61% 21%,36% 15%,0 20%
            );
            transform:scaleX(1.03) rotate(.08deg);
            filter:drop-shadow(0 13px 17px rgba(0,0,0,.22));
            opacity:.84;
        }
        84%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 79%,17% 69%,86% 63%,11% 56%,92% 49%,
                21% 43%,82% 35%,8% 29%,95% 21%,
                14% 15%,88% 7%,18% 1%,0 5%
            );
            transform:scaleX(1.07) rotate(.22deg);
            filter:drop-shadow(0 20px 24px rgba(0,0,0,.3));
            opacity:.35;
        }
        100%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 100%,0 84%,100% 76%,0 66%,100% 55%,
                0 45%,100% 34%,0 23%,100% 12%,0 0
            );
            transform:scaleX(1.1) rotate(.35deg);
            opacity:0;
        }
    }

    @keyframes page-transition-live-paper-tear-diagonal{
        0%{
            clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
            transform:rotate(0) scale(1);
            opacity:1;
        }
        27%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 83%,47% 70%,53% 67%,46% 63%,55% 59%,
                45% 55%,54% 50%,44% 46%,56% 41%,
                46% 37%,53% 32%,45% 27%,0 40%
            );
            transform:rotate(.08deg) scale(1.006);
            opacity:1;
        }
        58%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 91%,31% 74%,69% 66%,28% 59%,73% 50%,
                35% 44%,66% 36%,24% 30%,77% 20%,
                38% 14%,64% 6%,29% 0,0 15%
            );
            transform:rotate(.38deg) scale(1.03);
            filter:drop-shadow(0 13px 17px rgba(0,0,0,.22));
            opacity:.84;
        }
        84%{
            clip-path:polygon(
                0 0,100% 0,100% 100%,0 100%,
                0 100%,10% 83%,91% 70%,7% 61%,96% 49%,
                16% 39%,85% 29%,4% 20%,98% 8%,20% 0
            );
            transform:rotate(.82deg) scale(1.07);
            filter:drop-shadow(0 20px 24px rgba(0,0,0,.3));
            opacity:.34;
        }
        100%{
            clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 100%,0 78%,100% 65%,0 51%,100% 37%,0 23%,100% 9%,0 0);
            transform:rotate(1.1deg) scale(1.1);
            opacity:0;
        }
    }

    /* Page drops away and exposes the already-prefetched destination. */
    html.page-transition-running-drop-down body{
        transform-origin:50% 0%;
        animation:page-transition-drop-down var(--page-transition-live-duration,.30s)
            cubic-bezier(.32,.04,.68,1) both !important;
    }
    html.page-transition-running-drop-left body{
        transform-origin:100% 50%;
        animation:page-transition-drop-left var(--page-transition-live-duration,.30s)
            cubic-bezier(.32,.04,.68,1) both !important;
    }
    html.page-transition-running-drop-right body{
        transform-origin:0 50%;
        animation:page-transition-drop-right var(--page-transition-live-duration,.30s)
            cubic-bezier(.32,.04,.68,1) both !important;
    }

    @keyframes page-transition-drop-down{
        0%{transform:perspective(1200px) translate3d(0,0,0) rotateX(0);opacity:1;filter:drop-shadow(0 0 0 transparent)}
        18%{transform:perspective(1200px) translate3d(0,-1.5%,18px) rotateX(1deg);opacity:1}
        100%{transform:perspective(1200px) translate3d(0,112vh,-80px) rotateX(-7deg);opacity:.18;filter:drop-shadow(0 -24px 28px rgba(0,0,0,.32))}
    }
    @keyframes page-transition-drop-left{
        0%{transform:perspective(1200px) translate3d(0,0,0) rotateY(0);opacity:1}
        18%{transform:perspective(1200px) translate3d(1.2%,0,18px) rotateY(-1deg);opacity:1}
        100%{transform:perspective(1200px) translate3d(-112vw,5%,-80px) rotateZ(-5deg) rotateY(8deg);opacity:.18}
    }
    @keyframes page-transition-drop-right{
        0%{transform:perspective(1200px) translate3d(0,0,0) rotateY(0);opacity:1}
        18%{transform:perspective(1200px) translate3d(-1.2%,0,18px) rotateY(1deg);opacity:1}
        100%{transform:perspective(1200px) translate3d(112vw,5%,-80px) rotateZ(5deg) rotateY(-8deg);opacity:.18}
    }

    /* Zoom through the exact click position. */
    html.page-transition-running-click-zoom body{
        transform-origin:var(--page-transition-click-x,50vw) var(--page-transition-click-y,50vh);
        animation:page-transition-click-zoom var(--page-transition-live-duration,.30s)
            cubic-bezier(.16,.66,.12,1) both !important;
    }
    @keyframes page-transition-click-zoom{
        0%{transform:scale(1);filter:blur(0);opacity:1}
        34%{transform:scale(1.18);filter:blur(0);opacity:1}
        72%{transform:scale(2.8);filter:blur(.5px);opacity:.9}
        100%{transform:scale(8);filter:blur(2px);opacity:0}
    }
}


/* =========================================================
   Tile shrink
   The current page is divided into a 12x12 grid. Each cell keeps its own
   center while its visible rectangle shrinks toward that center, revealing
   the prefetched destination page beneath it.
   ========================================================= */

@property --page-transition-tile-scale {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html.page-transition-running-tile-shrink body{
        --page-transition-tile-scale:100%;

        /*
         * One repeating mask creates the vertical shrinking slices and the
         * second creates the horizontal slices. Intersecting them produces
         * independent square tiles without cloning the DOM dozens of times.
         */
        -webkit-mask-image:
            linear-gradient(
                to right,
                transparent calc((100% - var(--page-transition-tile-scale)) / 2),
                #000 calc((100% - var(--page-transition-tile-scale)) / 2),
                #000 calc((100% + var(--page-transition-tile-scale)) / 2),
                transparent calc((100% + var(--page-transition-tile-scale)) / 2)
            ),
            linear-gradient(
                to bottom,
                transparent calc((100% - var(--page-transition-tile-scale)) / 2),
                #000 calc((100% - var(--page-transition-tile-scale)) / 2),
                #000 calc((100% + var(--page-transition-tile-scale)) / 2),
                transparent calc((100% + var(--page-transition-tile-scale)) / 2)
            );
        -webkit-mask-size:8.333333% 100%,100% 8.333333%;
        -webkit-mask-repeat:repeat;
        -webkit-mask-composite:source-in;

        mask-image:
            linear-gradient(
                to right,
                transparent calc((100% - var(--page-transition-tile-scale)) / 2),
                #000 calc((100% - var(--page-transition-tile-scale)) / 2),
                #000 calc((100% + var(--page-transition-tile-scale)) / 2),
                transparent calc((100% + var(--page-transition-tile-scale)) / 2)
            ),
            linear-gradient(
                to bottom,
                transparent calc((100% - var(--page-transition-tile-scale)) / 2),
                #000 calc((100% - var(--page-transition-tile-scale)) / 2),
                #000 calc((100% + var(--page-transition-tile-scale)) / 2),
                transparent calc((100% + var(--page-transition-tile-scale)) / 2)
            );
        mask-size:8.333333% 100%,100% 8.333333%;
        mask-repeat:repeat;
        mask-composite:intersect;

        animation:page-transition-tile-shrink
            var(--page-transition-live-duration,.30s)
            cubic-bezier(.22,.66,.16,1)
            both !important;
        will-change:mask-image,-webkit-mask-image,opacity,filter;
    }

    @keyframes page-transition-tile-shrink{
        0%{
            --page-transition-tile-scale:100%;
            opacity:1;
            filter:brightness(1);
        }
        22%{
            --page-transition-tile-scale:94%;
            opacity:1;
            filter:brightness(1);
        }
        62%{
            --page-transition-tile-scale:58%;
            opacity:.98;
            filter:brightness(1.01);
        }
        84%{
            --page-transition-tile-scale:27%;
            opacity:.86;
            filter:brightness(1.03);
        }
        100%{
            --page-transition-tile-scale:0%;
            opacity:0;
            filter:brightness(1.05);
        }
    }
}

/* Fallback for engines that cannot animate registered custom properties:
   the page still exits cleanly instead of blocking navigation. */
@supports not (background:paint(something)) {
    @media (prefers-reduced-motion: no-preference) {
        html.page-transition-running-tile-shrink body{
            animation-duration:var(--page-transition-live-duration,.30s);
        }
    }
}


/* =========================================================
   Scroll-independent TWIST effect
   The current viewport is still the paper, but the peel is rendered as
   a curling sheet rather than a straight diagonal cut/fold.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

    html.page-transition-running-twist{
        overflow:hidden;
        perspective:1800px;
        perspective-origin:100% 0%;
    }

    html.page-transition-running-twist body{
        position:relative;
        transform-origin:
            calc(var(--page-transition-scroll-x,0px) + var(--page-transition-viewport-w,100vw))
            var(--page-transition-scroll-y,0px) !important;
        backface-visibility:hidden;
        transform-style:preserve-3d;
        animation:page-transition-twist-viewport
            var(--page-transition-live-duration,.30s)
            cubic-bezier(.16,.72,.10,1)
            both !important;
    }

    /*
     * A soft highlight/shadow travelling with the sheet makes the turning
     * edge read as a curl. It uses viewport coordinates, so scrolling does
     * not change the shape of the effect.
     */
    html.page-transition-running-twist body::after{
        content:"";
        position:absolute;
        left:var(--page-transition-scroll-x,0px);
        top:var(--page-transition-scroll-y,0px);
        width:var(--page-transition-viewport-w,100vw);
        height:var(--page-transition-viewport-h,100vh);
        z-index:2147483646;
        pointer-events:none;
        opacity:0;
        transform-origin:100% 0%;
        background:
            radial-gradient(
                ellipse 42% 72% at 100% 0%,
                rgba(255,255,255,.56) 0%,
                rgba(255,255,255,.22) 18%,
                rgba(255,255,255,0) 43%
            ),
            radial-gradient(
                ellipse 52% 82% at 100% 0%,
                rgba(0,0,0,0) 24%,
                rgba(0,0,0,.12) 46%,
                rgba(0,0,0,.28) 68%,
                rgba(0,0,0,0) 84%
            );
        animation:page-transition-twist-shading
            var(--page-transition-live-duration,.30s)
            cubic-bezier(.16,.72,.10,1)
            both;
    }

    @keyframes page-transition-twist-viewport{
        0%{
            clip-path:ellipse(
                142% 170% at
                calc(var(--page-transition-scroll-x,0px) + var(--page-transition-viewport-w,100vw))
                var(--page-transition-scroll-y,0px)
            );
            transform:
                perspective(1800px)
                translate3d(0,0,0)
                rotateY(0deg)
                rotateX(0deg)
                rotateZ(0deg)
                skewY(0deg);
            filter:drop-shadow(0 0 0 rgba(0,0,0,0));
            opacity:1;
        }

        18%{
            clip-path:ellipse(
                132% 158% at
                calc(var(--page-transition-scroll-x,0px) + var(--page-transition-viewport-w,100vw))
                var(--page-transition-scroll-y,0px)
            );
            transform:
                perspective(1800px)
                translate3d(-.6%,-.15%,12px)
                rotateY(-2deg)
                rotateX(.6deg)
                rotateZ(-.15deg)
                skewY(-.25deg);
            filter:drop-shadow(-5px 7px 9px rgba(0,0,0,.10));
            opacity:1;
        }

        40%{
            clip-path:ellipse(
                108% 134% at
                calc(var(--page-transition-scroll-x,0px) + var(--page-transition-viewport-w,100vw))
                var(--page-transition-scroll-y,0px)
            );
            transform:
                perspective(1800px)
                translate3d(-3.2%,-.8%,38px)
                rotateY(-7deg)
                rotateX(1.4deg)
                rotateZ(-.65deg)
                skewY(-.8deg);
            filter:drop-shadow(-13px 13px 17px rgba(0,0,0,.20));
            opacity:.98;
        }

        62%{
            clip-path:ellipse(
                78% 106% at
                calc(var(--page-transition-scroll-x,0px) + var(--page-transition-viewport-w,100vw))
                var(--page-transition-scroll-y,0px)
            );
            transform:
                perspective(1800px)
                translate3d(-10%,-2.2%,76px)
                rotateY(-14deg)
                rotateX(2.3deg)
                rotateZ(-1.5deg)
                skewY(-1.7deg);
            filter:drop-shadow(-24px 21px 27px rgba(0,0,0,.30));
            opacity:.90;
        }

        80%{
            clip-path:ellipse(
                47% 76% at
                calc(var(--page-transition-scroll-x,0px) + var(--page-transition-viewport-w,100vw))
                var(--page-transition-scroll-y,0px)
            );
            transform:
                perspective(1800px)
                translate3d(-22%,-4.8%,118px)
                rotateY(-25deg)
                rotateX(3.2deg)
                rotateZ(-2.8deg)
                skewY(-3deg);
            filter:drop-shadow(-34px 29px 34px rgba(0,0,0,.38));
            opacity:.68;
        }

        93%{
            clip-path:ellipse(
                23% 48% at
                calc(var(--page-transition-scroll-x,0px) + var(--page-transition-viewport-w,100vw))
                var(--page-transition-scroll-y,0px)
            );
            transform:
                perspective(1800px)
                translate3d(-38%,-8%,154px)
                rotateY(-40deg)
                rotateX(4deg)
                rotateZ(-4.8deg)
                skewY(-4.6deg);
            filter:drop-shadow(-40px 34px 38px rgba(0,0,0,.42));
            opacity:.34;
        }

        100%{
            clip-path:ellipse(
                4% 13% at
                calc(var(--page-transition-scroll-x,0px) + var(--page-transition-viewport-w,100vw))
                var(--page-transition-scroll-y,0px)
            );
            transform:
                perspective(1800px)
                translate3d(-52%,-12%,184px)
                rotateY(-55deg)
                rotateX(5deg)
                rotateZ(-7deg)
                skewY(-6deg);
            filter:drop-shadow(-44px 38px 42px rgba(0,0,0,.44));
            opacity:0;
        }
    }
}
}


/* TRUE diagonal peel — straight-line prototype.
   One shared diagonal boundary travels from top-right toward bottom-left.
   The untouched page never transforms. */

html.page-transition-running-diagonal-peel{
    overflow:hidden;
    perspective:1500px;
    perspective-origin:100% 0%;
}

html.page-transition-running-diagonal-peel > body{
    visibility:hidden !important;
    animation:none !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
}

.page-transition-peel-sheet,
.page-transition-peel-curl{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    overflow:hidden;
    pointer-events:none;
}

/* Current page that has NOT been reached by the fold.
   No transform is ever applied here. */
.page-transition-peel-sheet{
    z-index:2147483001;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
    animation:page-peel-straight-stationary
        var(--page-transition-live-duration,.36s)
        cubic-bezier(.20,.72,.10,1)
        both;
}

/* Reached/folded part of exactly the same current page. */
.page-transition-peel-curl{
    z-index:2147483002;
    transform:none;
    filter:none;
    animation:page-peel-straight-fold
        var(--page-transition-live-duration,.36s)
        cubic-bezier(.18,.74,.10,1)
        both;
}

/* Paper-back tint only; no curve, no secondary edge. */
.page-transition-peel-curl::after{content:none;}

/* No pseudo-element edge: the polygon boundary itself is the only edge. */
.page-transition-peel-curl::before{
    content:none;
}

/*
 * Both polygons use exactly the same diagonal points at every keyframe.
 * Therefore there is one boundary only: no gap, overlap, opposite curve,
 * or second folded corner.
 */
@keyframes page-peel-straight-stationary{
    0%{
        clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
    }
    10%{
        clip-path:polygon(0 0,94% 0,100% 7%,100% 100%,0 100%);
    }
    25%{
        clip-path:polygon(0 0,80% 0,100% 22%,100% 100%,0 100%);
    }
    43%{
        clip-path:polygon(0 0,62% 0,100% 42%,100% 100%,0 100%);
    }
    62%{
        clip-path:polygon(0 0,42% 0,100% 64%,100% 100%,0 100%);
    }
    79%{
        clip-path:polygon(0 0,23% 0,94% 100%,0 100%);
    }
    91%{
        clip-path:polygon(0 0,8% 0,62% 100%,0 100%);
    }
    100%{
        clip-path:polygon(0 100%,0 100%,0 100%);
    }
}

@keyframes page-peel-straight-fold{
    0%{
        clip-path:polygon(100% 0,100% 0,100% 0);
        transform:none;
        filter:none;
        opacity:1;
    }
    10%{
        clip-path:polygon(94% 0,100% 0,100% 7%);
        transform:none;
        filter:none;
        opacity:1;
    }
    25%{
        clip-path:polygon(80% 0,100% 0,100% 22%);
        transform:none;
        filter:none;
        opacity:1;
    }
    43%{
        clip-path:polygon(62% 0,100% 0,100% 42%);
        transform:none;
        filter:none;
        opacity:1;
    }
    62%{
        clip-path:polygon(42% 0,100% 0,100% 64%);
        transform:none;
        filter:none;
        opacity:1;
    }
    79%{
        clip-path:polygon(23% 0,100% 0,100% 100%,94% 100%);
        transform:none;
        filter:none;
        opacity:1;
    }
    91%{
        clip-path:polygon(8% 0,100% 0,100% 100%,62% 100%);
        transform:none;
        filter:none;
        opacity:1;
    }
    100%{
        clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
        transform:none;
        filter:none;
        opacity:0;
    }
}

@keyframes page-peel-straight-paper-back{
    0%,5%{opacity:0;}
    18%{opacity:.08;}
    42%{opacity:.18;}
    68%{opacity:.27;}
    88%{opacity:.30;}
    100%{opacity:0;}
}