/* ============================================================
 * assets/ui-motion.css —— 全站统一过渡动效层（唯一动效来源）
 * ------------------------------------------------------------
 * 规范：
 *   时长  --mo-fast 150ms / --mo-base 200ms / --mo-slow 300ms / --mo-bounce 420ms
 *   缓动  ease-in-out（默认）· cubic-bezier(.4,0,.2,1)（位移）
 *         cubic-bezier(.34,1.3,.64,1)（弹入）
 *   级差  --mo-step 30ms（卡片/列表依次入场）
 *   范围  仅处理 opacity / transform / 颜色 / 边框 / 阴影 / filter
 *   降级  prefers-reduced-motion: reduce 时全部关闭
 * 接入：各页面 </head> 前 <link rel="stylesheet" href="/assets/ui-motion.css?v=xxxx">
 * 说明：新增元素只要命中下方选择器即自动入场，无需额外 JS。
 * ============================================================ */

:root {
    /* 时长 */
    --mo-fast: 150ms;
    --mo-base: 200ms;
    --mo-slow: 300ms;
    /* 弹出过冲（放大后收小）时长 */
    --mo-bounce: 420ms;
    /* 缓动 */
    --mo-ease: ease-in-out;
    --mo-ease-out: cubic-bezier(.4, 0, .2, 1);
    --mo-ease-spring: cubic-bezier(.34, 1.3, .64, 1);
    /* 列表/卡片入场级差 */
    --mo-step: 30ms;
    /* 反馈幅度（点击按下的缩小量，越小越明显） */
    --mo-press: .90;
    --mo-bright: 1.04;
}

/* ------------------------------------------------------------
 * 1. 基础
 * ---------------------------------------------------------- */
html {
    -webkit-tap-highlight-color: transparent;
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid rgba(21, 101, 192, .55);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
 * 2. 关键帧
 * ---------------------------------------------------------- */
@keyframes mo-fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
}

@keyframes mo-rise-in {
    from { opacity: 0; transform: translateY(6px) }
    to { opacity: 1; transform: translateY(0) }
}

@keyframes mo-page-in {
    from { opacity: 0; transform: translateY(4px) }
    to { opacity: 1; transform: translateY(0) }
}

@keyframes mo-pop-in {
    from { opacity: 0; transform: translateY(10px) scale(.96) }
    to { opacity: 1; transform: translateY(0) scale(1) }
}

/* 底部面板：上滑 40px + 轻微放大 + 淡入 */
@keyframes mo-sheet-in {
    from { opacity: 0; transform: translateY(40px) scale(.97) }
    to { opacity: 1; transform: translateY(0) scale(1) }
}

/* 下拉/二级菜单：在按钮处由极小弹窗弹出放大，再收小一点点归位 */
@keyframes mo-menu-pop {
    0%   { opacity: 0; transform: scale(.22) }
    55%  { opacity: 1; transform: scale(1.05) }
    100% { opacity: 1; transform: scale(1) }
}

/* 上浮小面板：从下方弹起 + 淡入 */
@keyframes mo-panel-in {
    from { opacity: 0; transform: translateY(16px) scale(.97) }
    to { opacity: 1; transform: translateY(0) scale(1) }
}

/* ------------------------------------------------------------
 * 3. 页面切换（配合页面 JS 已使用的 body 类）
 * ---------------------------------------------------------- */
body {
    animation: mo-fade-in var(--mo-base) var(--mo-ease-out) both;
    transition: transform var(--mo-slow) var(--mo-ease),
                opacity var(--mo-slow) var(--mo-ease);
}

body.lgc-page-load {
    animation: mo-page-in var(--mo-base) var(--mo-ease-out) both;
}

body.lgc-leaving {
    transform: scale(1.01);
    pointer-events: none;
}

/* 站内分页/标签容器 */
.page {
    transition: opacity var(--mo-base) var(--mo-ease),
                transform var(--mo-base) var(--mo-ease);
}

.page.active,
.page.on {
    animation: mo-page-in var(--mo-base) var(--mo-ease-out) both;
}

/* ------------------------------------------------------------
 * 4. 可交互元素：统一过渡（hover / 按下 / 状态变化）
 * ---------------------------------------------------------- */
a, button, [role="button"],
input[type="submit"], input[type="button"], input[type="reset"],
.btn, .bigbtn, .mini-btn, .glass-btn, .lg-btn, .submit-btn,
.back-btn, .up-btn, .del-btn, .mv-btn, .pay-btn, .mode-btn, .amount-btn,
.btn-detail, .tab-btn, .nb, .nav-btn, .tab, .qq-group, .pay-item,
.theme, .all-card, .product-card, a.card {
    transition-property: color, background-color, border-color,
                         box-shadow, opacity, transform, filter;
    transition-duration: var(--mo-fast);
    transition-timing-function: var(--mo-ease);
}

/* 滑动指示条（导航/标签胶囊） */
.tab-ind, .ind, .nav-indicator, .tab-indicator, .tabs-indicator {
    transition: left var(--mo-base) var(--mo-ease-out),
                width var(--mo-base) var(--mo-ease-out),
                transform var(--mo-base) var(--mo-ease-out),
                background-color var(--mo-base) var(--mo-ease);
}

/* 开关 */
.switch, .toggle {
    transition: background-color var(--mo-base) var(--mo-ease),
                border-color var(--mo-base) var(--mo-ease);
}

.switch::after, .toggle::after {
    transition: transform var(--mo-base) var(--mo-ease-out);
}

/* hover：仅限具备精确指针的设备 */
@media (hover: hover) and (pointer: fine) {
    .btn:hover, .bigbtn:hover, .mini-btn:hover, .glass-btn:hover, .lg-btn:hover,
    .submit-btn:hover, .pay-btn:hover, .btn-detail:hover, .mode-btn:hover,
    .amount-btn:hover, .back-btn:hover, .up-btn:hover, .del-btn:hover, .mv-btn:hover,
    button:hover, a.btn:hover, .tab-btn:hover, .nb:hover, .nav-btn:hover,
    .theme:hover, .all-card:hover, .product-card:hover, .pay-item:hover, .qq-group:hover {
        filter: brightness(var(--mo-bright));
    }
}

/* 按下：优先使用页面 JS 切换的 .lgc-tapping，其次 :active 兜底 */
.lgc-tapping {
    transform: scale(var(--mo-press)) !important;
    filter: brightness(1.08) !important;
}

/* 划动拉伸：JS 直接把 rotate(θ)·scale(a,b)·rotate(-θ) 以 !important 内联写进 transform，
   沿划动方向拉长（含斜向），任意角度都不再退化成整体放大。
   这里只负责三件事：
     · transition: none —— 严格跟手，不做插值
     · filter: none —— 拖动期间不挂滤镜（逐帧重绘的主要卡顿来源）
     · will-change —— 提升为合成层，transform 变化走 GPU
   回弹由 JS 用内联纯 transform + CSS 过渡完成（见 tap_anim.js） */
.lgc-stretching {
    transition: none !important;
    filter: none !important;
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    button:active, [role="button"]:active,
    input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active,
    .btn:active, .bigbtn:active, .mini-btn:active, .glass-btn:active, .lg-btn:active,
    .submit-btn:active, .pay-btn:active, .btn-detail:active, .mode-btn:active,
    .amount-btn:active, .back-btn:active, .up-btn:active, .del-btn:active, .mv-btn:active,
    .tab-btn:active, .nb:active, .nav-btn:active,
    a:active, .theme:active, .all-card:active, .product-card:active {
        transform: scale(var(--mo-press));
    }
}

/* ------------------------------------------------------------
 * 5. 组件 / 列表入场（新插入的节点同样适用）
 * ---------------------------------------------------------- */
.card, .box, .theme, .theme-card, .all-card, .pay-table, .code-box,
.ann-card, .user-card, .lg-card, .panel, .product-card {
    animation: mo-rise-in var(--mo-slow) var(--mo-ease-out) both;
}

.card:nth-child(2), .theme:nth-child(2), .all-card:nth-child(2),
.box:nth-child(2), .product-card:nth-child(2), .pay-table:nth-child(2) {
    animation-delay: var(--mo-step);
}

.card:nth-child(3), .theme:nth-child(3), .all-card:nth-child(3),
.box:nth-child(3), .product-card:nth-child(3), .pay-table:nth-child(3) {
    animation-delay: calc(var(--mo-step) * 2);
}

.card:nth-child(4), .theme:nth-child(4), .all-card:nth-child(4),
.box:nth-child(4), .product-card:nth-child(4), .pay-table:nth-child(4) {
    animation-delay: calc(var(--mo-step) * 3);
}

.card:nth-child(5), .theme:nth-child(5), .all-card:nth-child(5),
.box:nth-child(5), .product-card:nth-child(5), .pay-table:nth-child(5) {
    animation-delay: calc(var(--mo-step) * 4);
}

.card:nth-child(6), .theme:nth-child(6), .all-card:nth-child(6),
.box:nth-child(6), .product-card:nth-child(6), .pay-table:nth-child(6) {
    animation-delay: calc(var(--mo-step) * 5);
}

/* ------------------------------------------------------------
 * 6. 弹窗 / 抽屉 / 下拉：展开时入场
 * ---------------------------------------------------------- */
.modal-mask.on, .modal-mask.open, .mask.on, .mask.open,
.lgc-mask.on, .modal.open, .drawer.open, .popup.open, .pop.on {
    animation: mo-fade-in var(--mo-fast) var(--mo-ease-out) both;
}

.modal-mask.on .modal, .modal-mask.open .modal,
.mask.on .modal, .mask.open .modal,
.lgc-mask.on .lgc-modal,
.drawer.open .drawer-inner, .popup.open .popup-inner {
    animation: mo-pop-in var(--mo-base) var(--mo-ease-out) both;
}

.modal.open > .sheet,
.lgc-mask.on .lgc-sheet {
    animation: mo-sheet-in var(--mo-base) var(--mo-ease-spring) both;
}

/* 下拉 / 二级菜单（如消息列表页右上角「⋯」菜单）：在「⋯」按钮处由小弹窗放大弹出后收小归位 */
.head-menu.open {
    transform-origin: top right;
    animation: mo-menu-pop var(--mo-bounce) var(--mo-ease-out) both;
}

/* 上浮小面板（如群聊「@成员」面板） */
.mention-panel.open {
    transform-origin: bottom center;
    animation: mo-panel-in var(--mo-base) var(--mo-ease-spring) both;
}

/* ------------------------------------------------------------
 * 7. 降级：用户偏好减少动效时全部关闭
 *    （禁止长按原生菜单的兜底规则统一放在 api/appearance.php，
 *      避免与本文件重复下发；本文件只管动效）
 * ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }

    body, body.lgc-leaving, body.lgc-page-load {
        transform: none !important;
        animation: none !important;
    }
}