#page-root > .app.tab-old,
#page-root > .app.tab-new{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;
    background:#fff;

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

/*
 * 顶层 Tab 切换：
 *
 * old 页面不再 fade out。
 * 它整个动画期间保持完全可见，作为稳定底板。
 *
 * 这样不会在黑色 Header 消失时
 * 暴露 #page-root 的白色背景。
 */
#page-root > .app.tab-old{
    z-index:1;

    opacity:1;
    transform:translate3d(0,0,0);

    pointer-events:none;
}

/*
 * 新页面覆盖在旧页面上。
 *
 * 300ms + Material standard easing。
 * 只做很轻的 fade + scale。
 */
#page-root > .app.tab-new{
    z-index:2;

    pointer-events:none;

    will-change:opacity,transform;

    animation:
        tab-destination-enter
        .30s
        cubic-bezier(.4,0,.2,1)
        both;
}

@keyframes tab-destination-enter{
    from{
        opacity:0;
        transform:translate3d(0,0,0);
    }

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

@media (prefers-reduced-motion:reduce){
    #page-root > .app.tab-new{
        animation-duration:.01ms !important;
    }
}