/* 页面切换动画 */
/* 底部导航栏层级高于过渡遮罩，切换全程保持可见、不闪断 */
.bottom-nav {
    z-index: 10000;
    background-color: white;
}

.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

body.page-exit .page-transition-overlay {
    opacity: 1;
}

body.page-enter {
    overflow: hidden;
}

body.page-exit {
    overflow: hidden;
}

/* 动画作用于 body 的直接子元素（排除底部导航栏和过渡遮罩），保持底栏固定不动 */
body.page-enter > *:not(.bottom-nav):not(.page-transition-overlay) {
    animation: pageEnterPush 0.32s cubic-bezier(0.32, 0.72, 0.24, 1) forwards;
}

body.page-exit > *:not(.bottom-nav):not(.page-transition-overlay) {
    animation: pageExitPush 0.25s ease forwards;
}

/* 底部 push 覆盖：新页从底部整体滑入覆盖旧页 */
@keyframes pageEnterPush {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* 旧页轻微下沉，模拟被推开的错觉 */
@keyframes pageExitPush {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0.85;
        transform: translateY(14px);
    }
}

/* 3D 轻翻转：私人定制页专用跳转动画（与底部导航 push 动画区分） */
body.page-enter-3d {
    overflow: hidden;
}

body.page-exit-3d {
    overflow: hidden;
}

body.page-enter-3d > *:not(.bottom-nav):not(.page-transition-overlay) {
    animation: enterFlip3d 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

body.page-exit-3d > *:not(.bottom-nav):not(.page-transition-overlay) {
    animation: exitFlip3d 0.35s ease forwards;
}

@keyframes enterFlip3d {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateY(-10deg) translateX(60px);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) rotateY(0) translateX(0);
    }
}

@keyframes exitFlip3d {
    from {
        opacity: 1;
        transform: perspective(1000px) rotateY(0);
    }
    to {
        opacity: 0;
        transform: perspective(1000px) rotateY(6deg) translateX(-40px);
    }
}

/* 中心缩放淡入：达人/主理人登录注册页专用 */
body.page-enter-scale {
    overflow: hidden;
}

body.page-exit-scale {
    overflow: hidden;
}

body.page-enter-scale > *:not(.bottom-nav):not(.page-transition-overlay) {
    animation: enterScale 0.32s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

body.page-exit-scale > *:not(.bottom-nav):not(.page-transition-overlay) {
    animation: exitScale 0.25s ease forwards;
}

@keyframes enterScale {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes exitScale {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.92);
    }
}

/* 底部导航点击反馈 */
.bottom-nav .nav-item {
    transition: transform 0.15s ease, color 0.2s ease;
}

.bottom-nav .nav-item:active {
    transform: scale(0.9);
}

.bottom-nav .nav-item.active i {
    animation: navIconPop 0.3s ease;
}

@keyframes navIconPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}