/* 页面切换动画 - iOS风格 */

/* 页面进入动画 - 从右向左滑入 */
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 页面退出动画 - 从左向右滑出 */
@keyframes slideOutToRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* 页面淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 页面淡出动画 */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* 应用动画到body */
body.page-slide-in {
    animation: slideInFromRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.page-slide-out {
    animation: slideOutToRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.page-fade-in {
    animation: fadeIn 0.3s ease-out;
}

body.page-fade-out {
    animation: fadeOut 0.3s ease-out;
}

/* 默认：所有页面进入时都有滑入动画 */
body {
    animation: slideInFromRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 防止动画期间出现滚动条 */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}