/* Native cross-document transition; no link interception or extra animation library.
 * Motion reference: https://madbox.io/games/
 * 550ms curved cover, 150ms hold, 600ms curved reveal.
 * The color sits behind the two clipped page snapshots, never over the live page.
 */
:root {
    /* Website blue: Uncode color-210407 / relaunch --bk-blue. */
    --mrbk-transition-color: #2196f3;
}

html::view-transition-group(root) {
    animation: none;
    overflow: clip;
}

html::view-transition-image-pair(root) {
    isolation: isolate;
    background: var(--mrbk-transition-color);
}

html::view-transition-old(root),
html::view-transition-new(root) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    mix-blend-mode: normal;
    opacity: 1;
    transform: none;
}

html::view-transition-old(root) {
    z-index: 1;
    animation: mrbk-wave-cover 550ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

html::view-transition-new(root) {
    z-index: 2;
    animation: mrbk-wave-reveal 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 700ms both;
}

/* The bend reaches min(viewport width, viewport height) / 4 at the centre.
 * These matching polygon points approximate a quadratic Bezier without SVG IDs
 * or fixed pixel dimensions, including on narrow portrait screens.
 */
@keyframes mrbk-wave-cover {
    from {
        clip-path: polygon(
            0 0,
            100% 0,
            100% 100%,
            96.875% 100%,
            93.75% 100%,
            90.625% 100%,
            87.5% 100%,
            84.375% 100%,
            81.25% 100%,
            78.125% 100%,
            75% 100%,
            71.875% 100%,
            68.75% 100%,
            65.625% 100%,
            62.5% 100%,
            59.375% 100%,
            56.25% 100%,
            53.125% 100%,
            50% 100%,
            46.875% 100%,
            43.75% 100%,
            40.625% 100%,
            37.5% 100%,
            34.375% 100%,
            31.25% 100%,
            28.125% 100%,
            25% 100%,
            21.875% 100%,
            18.75% 100%,
            15.625% 100%,
            12.5% 100%,
            9.375% 100%,
            6.25% 100%,
            3.125% 100%,
            0% 100%
        );
    }
    to {
        clip-path: polygon(
            0 0,
            100% 0,
            100% 0%,
            96.875% calc(0% - min(3.02734vw, 3.02734vh)),
            93.75% calc(0% - min(5.85938vw, 5.85938vh)),
            90.625% calc(0% - min(8.49609vw, 8.49609vh)),
            87.5% calc(0% - min(10.9375vw, 10.9375vh)),
            84.375% calc(0% - min(13.1836vw, 13.1836vh)),
            81.25% calc(0% - min(15.2344vw, 15.2344vh)),
            78.125% calc(0% - min(17.0898vw, 17.0898vh)),
            75% calc(0% - min(18.75vw, 18.75vh)),
            71.875% calc(0% - min(20.2148vw, 20.2148vh)),
            68.75% calc(0% - min(21.4844vw, 21.4844vh)),
            65.625% calc(0% - min(22.5586vw, 22.5586vh)),
            62.5% calc(0% - min(23.4375vw, 23.4375vh)),
            59.375% calc(0% - min(24.1211vw, 24.1211vh)),
            56.25% calc(0% - min(24.6094vw, 24.6094vh)),
            53.125% calc(0% - min(24.9023vw, 24.9023vh)),
            50% calc(0% - min(25vw, 25vh)),
            46.875% calc(0% - min(24.9023vw, 24.9023vh)),
            43.75% calc(0% - min(24.6094vw, 24.6094vh)),
            40.625% calc(0% - min(24.1211vw, 24.1211vh)),
            37.5% calc(0% - min(23.4375vw, 23.4375vh)),
            34.375% calc(0% - min(22.5586vw, 22.5586vh)),
            31.25% calc(0% - min(21.4844vw, 21.4844vh)),
            28.125% calc(0% - min(20.2148vw, 20.2148vh)),
            25% calc(0% - min(18.75vw, 18.75vh)),
            21.875% calc(0% - min(17.0898vw, 17.0898vh)),
            18.75% calc(0% - min(15.2344vw, 15.2344vh)),
            15.625% calc(0% - min(13.1836vw, 13.1836vh)),
            12.5% calc(0% - min(10.9375vw, 10.9375vh)),
            9.375% calc(0% - min(8.49609vw, 8.49609vh)),
            6.25% calc(0% - min(5.85938vw, 5.85938vh)),
            3.125% calc(0% - min(3.02734vw, 3.02734vh)),
            0% 0%
        );
    }
}

@keyframes mrbk-wave-reveal {
    from {
        clip-path: polygon(
            0 100%,
            100% 100%,
            100% 100%,
            96.875% 100%,
            93.75% 100%,
            90.625% 100%,
            87.5% 100%,
            84.375% 100%,
            81.25% 100%,
            78.125% 100%,
            75% 100%,
            71.875% 100%,
            68.75% 100%,
            65.625% 100%,
            62.5% 100%,
            59.375% 100%,
            56.25% 100%,
            53.125% 100%,
            50% 100%,
            46.875% 100%,
            43.75% 100%,
            40.625% 100%,
            37.5% 100%,
            34.375% 100%,
            31.25% 100%,
            28.125% 100%,
            25% 100%,
            21.875% 100%,
            18.75% 100%,
            15.625% 100%,
            12.5% 100%,
            9.375% 100%,
            6.25% 100%,
            3.125% 100%,
            0% 100%
        );
    }
    to {
        clip-path: polygon(
            0 100%,
            100% 100%,
            100% 0%,
            96.875% calc(0% - min(3.02734vw, 3.02734vh)),
            93.75% calc(0% - min(5.85938vw, 5.85938vh)),
            90.625% calc(0% - min(8.49609vw, 8.49609vh)),
            87.5% calc(0% - min(10.9375vw, 10.9375vh)),
            84.375% calc(0% - min(13.1836vw, 13.1836vh)),
            81.25% calc(0% - min(15.2344vw, 15.2344vh)),
            78.125% calc(0% - min(17.0898vw, 17.0898vh)),
            75% calc(0% - min(18.75vw, 18.75vh)),
            71.875% calc(0% - min(20.2148vw, 20.2148vh)),
            68.75% calc(0% - min(21.4844vw, 21.4844vh)),
            65.625% calc(0% - min(22.5586vw, 22.5586vh)),
            62.5% calc(0% - min(23.4375vw, 23.4375vh)),
            59.375% calc(0% - min(24.1211vw, 24.1211vh)),
            56.25% calc(0% - min(24.6094vw, 24.6094vh)),
            53.125% calc(0% - min(24.9023vw, 24.9023vh)),
            50% calc(0% - min(25vw, 25vh)),
            46.875% calc(0% - min(24.9023vw, 24.9023vh)),
            43.75% calc(0% - min(24.6094vw, 24.6094vh)),
            40.625% calc(0% - min(24.1211vw, 24.1211vh)),
            37.5% calc(0% - min(23.4375vw, 23.4375vh)),
            34.375% calc(0% - min(22.5586vw, 22.5586vh)),
            31.25% calc(0% - min(21.4844vw, 21.4844vh)),
            28.125% calc(0% - min(20.2148vw, 20.2148vh)),
            25% calc(0% - min(18.75vw, 18.75vh)),
            21.875% calc(0% - min(17.0898vw, 17.0898vh)),
            18.75% calc(0% - min(15.2344vw, 15.2344vh)),
            15.625% calc(0% - min(13.1836vw, 13.1836vh)),
            12.5% calc(0% - min(10.9375vw, 10.9375vh)),
            9.375% calc(0% - min(8.49609vw, 8.49609vh)),
            6.25% calc(0% - min(5.85938vw, 5.85938vh)),
            3.125% calc(0% - min(3.02734vw, 3.02734vh)),
            0% 0%
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    html::view-transition-group(root),
    html::view-transition-old(root),
    html::view-transition-new(root) {
        animation: none;
    }

    html::view-transition-image-pair(root) {
        background: none;
    }
}