#page-root > .app.route-old,
#page-root > .app.route-new{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;

    background:#fff;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.route-forward.route-old{
    animation:page-old-forward .54s cubic-bezier(.32,.72,0,1) both;
}

.route-forward.route-new{
    animation:page-new-forward .54s cubic-bezier(.32,.72,0,1) both;
}

.route-back.route-old{
    z-index:2;

    animation:page-old-back .54s cubic-bezier(.32,.72,0,1) both;
}

.route-back.route-new{
    z-index:1;

    animation:page-new-back .54s cubic-bezier(.32,.72,0,1) both;
}

@keyframes page-new-forward{
    from{
        transform:translate3d(99.5%,0,0);
    }

    to{
        transform:translate3d(0,0,0);
    }
}

@keyframes page-old-forward{
    from{
        transform:translate3d(0,0,0);
    }

    to{
        transform:translate3d(-33%,0,0);
    }
}

@keyframes page-old-back{
    from{
        transform:translate3d(0,0,0);
    }

    to{
        transform:translate3d(99.5%,0,0);
    }
}

@keyframes page-new-back{
    from{
        transform:translate3d(-33%,0,0);
    }

    to{
        transform:translate3d(0,0,0);
    }
}

@media (prefers-reduced-motion:reduce){
    .route-old,
    .route-new{
        animation-duration:.01ms !important;
    }
}