/**
 * animation.css - 页面切换动画
 * 所有动画使用 translate3d 确保 GPU 加速
 */

/* ==================== 前进动画 ==================== */

/* 新页面从右侧滑入 */
.ls-page.ls-enter-forward {
    display: block !important;
    z-index: 10;
    animation: lsSlideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 旧页面向左微移并淡出 */
.ls-page.ls-leave-forward {
    z-index: 1;
    animation: lsSlideOutLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ==================== 后退动画 ==================== */

/* 旧页面从左侧滑入恢复 */
.ls-page.ls-enter-backward {
    display: block !important;
    z-index: 1;
    animation: lsSlideInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 当前页面向右滑出 */
.ls-page.ls-leave-backward {
    z-index: 10;
    animation: lsSlideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ==================== Tab 切换动画 ==================== */

.ls-page.ls-enter-tab {
    display: block !important;
    animation: lsFadeIn 0.2s ease forwards;
}

.ls-page.ls-leave-tab {
    animation: lsFadeOut 0.15s ease forwards;
}

/* ==================== Keyframes ==================== */

@keyframes lsSlideInRight {
    from { transform: translate3d(100%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

@keyframes lsSlideOutLeft {
    from { transform: translate3d(0, 0, 0); opacity: 1; }
    to   { transform: translate3d(-30%, 0, 0); opacity: 0.65; }
}

@keyframes lsSlideInLeft {
    from { transform: translate3d(-30%, 0, 0); opacity: 0.65; }
    to   { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes lsSlideOutRight {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(100%, 0, 0); }
}

@keyframes lsFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes lsFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ==================== 弹窗动画 ==================== */

@keyframes lsSlideUp {
    from { transform: translate3d(0, 100%, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

@keyframes lsSlideDown {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 100%, 0); }
}

@keyframes lsScaleIn {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@keyframes lsScaleOut {
    from { transform: scale(1); opacity: 1; }
    to   { transform: scale(0.85); opacity: 0; }
}

/* ==================== 子页面切换动画 ==================== */

/* 进入：淡入（不区分方向，统一简洁淡入） */
.ls-sub-page.ls-sub-enter-left,
.ls-sub-page.ls-sub-enter-right {
    animation: lsSubEnter 0.2s ease-out forwards;
}

/* 离开：立即隐藏（不做退出动画，避免两个页面同时可见的闪烁感） */
.ls-sub-page.ls-sub-leave-left,
.ls-sub-page.ls-sub-leave-right {
    animation: lsSubLeave 0.15s ease-in forwards;
}

@keyframes lsSubEnter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes lsSubLeave {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ==================== 内容动画 ==================== */

@keyframes lsContentFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ls-page-content {
    animation: lsContentFadeIn 0.3s ease forwards;
}

/* ==================== Loading Spinner ==================== */

@keyframes lsSpin {
    to { transform: rotate(360deg); }
}