/* opt in to cross-document view transitions (needed on both pages) */
@view-transition {navigation: auto;}

:root {
    --vt-cover: 750ms;      /* splash wipes in */
    --vt-hold: 450ms;       /* splash stays */
    --vt-uncover: 750ms;    /* splash wipes out, new page slides in */
    --vt-ease: cubic-bezier(0.625, 0.05, 0, 1);
    --vt-bow: 30vmax;       /* how much the wipe edge bows */
}

/* splash: hidden, shown by transition.js while the transition runs so the
   browser captures it as its own snapshot ("splash") */
#splash {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    align-items: center;
    justify-content: center;
    background: #171f27;
    color: white;
    pointer-events: none;
}
html.vt-active #splash {display: flex; view-transition-name: splash;}

/* the two page snapshots are opaque and overlap: no additive blending */
::view-transition-old(root),
::view-transition-new(root) {mix-blend-mode: normal;}

/* old page drifts up while the splash covers it */
::view-transition-old(root) {animation: vt-page-out var(--vt-cover) var(--vt-ease) forwards;}

/* new page stays hidden until the splash leaves, then slides into place */
::view-transition-new(root) {
    animation:
        vt-invisible calc(var(--vt-cover) + var(--vt-hold)) linear,
        vt-page-in var(--vt-uncover) var(--vt-ease) calc(var(--vt-cover) + var(--vt-hold)) both;
}

/* the splash never moves; an animated clip mask reveals and hides it */
::view-transition-group(splash) {animation: none;}
::view-transition-new(splash) {
    animation:
        vt-mask-cover var(--vt-cover) var(--vt-ease) both,
        vt-mask-uncover var(--vt-uncover) var(--vt-ease) calc(var(--vt-cover) + var(--vt-hold)) forwards;
}

/* flat wipe edge (fallback) */
@keyframes vt-mask-cover {
    from {clip-path: inset(100% 0 0 0);}
    to   {clip-path: inset(0);}
}
@keyframes vt-mask-uncover {
    from {clip-path: inset(0);}
    to   {clip-path: inset(0 0 100% 0);}
}

/* curved wipe edge: the control point of the curve starts on the edge (flat
   line) and moves away from it while the edge travels (arc) */
@supports (clip-path: shape(from 0 0, close)) {
    ::view-transition-new(splash) {animation-name: vt-mask-cover-curved, vt-mask-uncover-curved;}
}
@keyframes vt-mask-cover-curved {
    from {clip-path: shape(from 0% 100%, curve to 100% 100% with 50% calc(100% - 0vw), vline to 100%, hline to 0%, close);}
    to   {clip-path: shape(from 0% 0%,   curve to 100% 0%   with 50% calc(0% - var(--vt-bow)), vline to 100%, hline to 0%, close);}
}
@keyframes vt-mask-uncover-curved {
    from {clip-path: shape(from 0% 0%, hline to 100%, vline to 100%, curve to 0% 100% with 50% calc(100% + var(--vt-bow)), close);}
    to   {clip-path: shape(from 0% 0%, hline to 100%, vline to 0%,   curve to 0% 0%   with 50% calc(0% + 0vw), close);}
}

@keyframes vt-page-out {
    from {transform: translateY(0);}
    to   {transform: translateY(-15vh);}
}
@keyframes vt-page-in {
    from {transform: translateY(25vh);}
    to   {transform: translateY(0);}
}
@keyframes vt-invisible {
    from, to {opacity: 0;}
}

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