/* ============================================================
   dtbm 全站动效/微交互共享层（2026-08 UI 优化）
   约定：纯叠加，不覆盖 layui 组件内部结构；所有动效尊重 prefers-reduced-motion。
   接入：页面 <head> 引入本文件，主容器加 .m-main，列表/表格外层加 data-stagger，
        </body> 前引入 motion.js。
   ============================================================ */

:root {
    --m-accent: #1677ff;
    --m-accent-soft: rgba(22, 119, 255, .12);
    --m-radius: 10px;
    --m-ease: cubic-bezier(0.18, 1.35, 0.32, 1);   /* v2: 弹性过冲 */
    --m-dur-fast: .18s;
    --m-dur-in: .65s;
    --m-shadow-1: 0 1px 4px rgba(15, 35, 70, .06);
    --m-shadow-2: 0 6px 18px -6px rgba(15, 35, 70, .14);
    --m-shadow-3: 0 12px 32px -8px rgba(15, 35, 70, .22);
}

/* ---------- 页面入场：body.m-page-enter 由 motion.js 在 DOMContentLoaded 加上 ---------- */
@keyframes mPageIn {
    from { opacity: 0; transform: translateY(28px) scale(.98); filter: blur(5px); }
    to { opacity: 1; transform: none; filter: none; }
}
body.m-page-enter .m-main {
    animation: mPageIn var(--m-dur-in) var(--m-ease) backwards;
}

/* ---------- 列表/表格条目到达：motion.js 给子项设 --i 并加 .m-in ---------- */
@keyframes mItemIn {
    from { opacity: 0; transform: translateX(-26px); }
    to { opacity: 1; transform: none; }
}
[data-stagger] > .m-in,
[data-stagger] .m-stagger-row.m-in {
    animation: mItemIn .5s var(--m-ease) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}

/* ---------- 卡片悬停浮起 ---------- */
.layui-card, .m-card {
    transition: transform var(--m-dur-fast) ease-out, box-shadow var(--m-dur-fast) ease-out;
}
.layui-card:hover, .m-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: var(--m-shadow-3), 0 0 0 1px var(--m-accent-soft);
}

/* ---------- 按钮按压与主按钮悬停 ---------- */
.layui-btn {
    transition: transform .12s ease-out, box-shadow .15s ease-out, opacity .15s ease-out;
}
.layui-btn:active { transform: scale(.97); }
.layui-btn:not(.layui-btn-primary):not(.layui-btn-disabled):hover { box-shadow: var(--m-shadow-2); }

/* ---------- 表格行悬停：提亮 + 左缘 accent 光条 ---------- */
.layui-table tbody tr { transition: background .15s ease-out, box-shadow .15s ease-out; }
.layui-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--m-accent); }

/* ---------- 输入焦点环（box-shadow 实现，不动布局） ---------- */
.layui-input:focus, .layui-textarea:focus, .layui-select:focus {
    box-shadow: 0 0 0 4px var(--m-accent-soft);
    border-color: var(--m-accent) !important;
    transition: box-shadow .15s ease-out, border-color .15s ease-out;
}

/* ---------- 无障碍：减弱动效时全部关闭 ---------- */
@media (prefers-reduced-motion: reduce) {
    body.m-page-enter .m-main,
    [data-stagger] > .m-in,
    [data-stagger] .m-stagger-row.m-in { animation: none; }
    .layui-card, .m-card, .layui-btn, .layui-table tbody tr { transition: none; }
    .layui-card:hover, .m-card:hover { transform: none; }
    .layui-btn:active { transform: none; }
}