/* ==========================================================================
   全局动效（Motion Design）—— 仅动画/过渡，不改布局/功能/业务逻辑。
   统一 Motion Token；优先 transform / opacity；支持 prefers-reduced-motion。
   ========================================================================== */
:root {
    --motion-fast: 120ms;
    --motion-normal: 200ms;
    --motion-slow: 280ms;
    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* 页面滑动时不出现横向滚动条 */
html, body, #app { overflow-x: hidden; }

/* ---------------- 1. 页面转场（进入右滑入 / 返回左滑入） ---------------- */
.page-forward-enter-active, .page-forward-leave-active,
.page-back-enter-active,    .page-back-leave-active {
    transition: opacity var(--motion-normal) var(--ease-standard),
                transform var(--motion-normal) var(--ease-standard);
    will-change: opacity, transform;
}
.page-forward-enter-from { opacity: 0; transform: translateX(16px); }
.page-forward-leave-to   { opacity: 0; transform: translateX(-16px); }
.page-back-enter-from    { opacity: 0; transform: translateX(-16px); }
.page-back-leave-to      { opacity: 0; transform: translateX(16px); }

/* ---------------- 2. 展开/收起（搜索框、筛选等）max-height + opacity + translateY ------- */
.expand-enter-active, .expand-leave-active {
    transition: max-height var(--motion-normal) var(--ease-standard),
                opacity var(--motion-normal) var(--ease-standard),
                transform var(--motion-normal) var(--ease-standard);
    overflow: hidden;
    will-change: max-height, opacity, transform;
}
.expand-enter-from, .expand-leave-to { max-height: 0; opacity: 0; transform: translateY(-8px); }
.expand-enter-to,   .expand-leave-from { max-height: 120px; opacity: 1; transform: translateY(0); }

/* ---------------- 3. Tab / 分类 / 筛选项 选中态平滑过渡 ---------------- */
.seg-item, .cs-side-item, .tabbar-item, .grid-9-icon, .quick-icon {
    transition: background-color var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard);
}

/* ---------------- 4. 列表 / 卡片 轻微淡入（克制，不逐个飞入） ---------------- */
.order-card, .cs-card, .hist-card {
    animation: card-in var(--motion-normal) var(--ease-standard) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------- 5. 居中弹窗轻微缩放淡入（遮罩淡入沿用 app.css fade-in） ---------------- */
.dialog { animation: dialog-in var(--motion-normal) var(--ease-standard); }
@keyframes dialog-in { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------- 6. 减少动态效果：系统开启后禁用复杂动画，仅保留必要过渡 ---------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}