/* ============================================================================
   金牛论坛 · 统一微交互层 AU-MOTION v1.0
   ----------------------------------------------------------------------------
   目标：让「每一个操作界面」都有好看且克制的动画——
         按钮 / 表单 / 卡片 / 弹层 / 下拉 / 列表 / 分页 / 标签 / 开关 /
         上传 / 通知 / 播放器 / 管理表格 / 空状态 / 加载骨架
   原则：
     1. 只用 transform / opacity 做动画，避免重排
     2. 统一 --au-ease / --au-t-* 时长，与 aurora 对齐
     3. prefers-reduced-motion 一键静音
     4. 性能：content-visibility / contain / will-change 节制
   须在 aurora.css 之后加载。
   ============================================================================ */

:root {
    --m-ease: cubic-bezier(.22, 1, .36, 1);
    --m-ease-out: cubic-bezier(.16, 1, .3, 1);
    --m-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
    --m-t-1: 120ms;
    --m-t-2: 180ms;
    --m-t-3: 280ms;
    --m-t-4: 420ms;
    --m-t-5: 640ms;
    --m-press: scale(.97);
    --m-lift: translateY(-2px);
    --m-glow: 0 0 0 0 rgba(165, 124, 54, 0);
    --m-sh-1: 0 1px 2px rgba(35, 32, 26, .06), 0 8px 20px -12px rgba(35, 32, 26, .18);
    --m-sh-2: 0 2px 4px rgba(35, 32, 26, .06), 0 16px 36px -16px rgba(35, 32, 26, .22);
    --m-sh-pop: 0 8px 28px -8px rgba(35, 32, 26, .22), 0 2px 8px rgba(35, 32, 26, .06);
}

/* ── 1. 全局：滚动条 / 选中 / 焦点环 ───────────────────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 2. 按钮：光泽扫过 + 按压回弹 + 磁性光斑 ─────────────────────── */
.btn, .btn-icon, .cp-btn, .cp-btn-audio, .btn-hero-primary, .btn-hero-ghost {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transition:
        transform var(--m-t-2) var(--m-ease),
        box-shadow var(--m-t-3) var(--m-ease),
        background var(--m-t-2) var(--m-ease),
        border-color var(--m-t-2) var(--m-ease),
        color var(--m-t-2) var(--m-ease),
        filter var(--m-t-2) var(--m-ease);
    will-change: transform;
}
.btn:hover, .btn-icon:hover, .cp-btn:hover, .cp-btn-audio:hover {
    transform: translateZ(0) var(--m-lift);
    box-shadow: var(--m-sh-2);
}
.btn:active, .btn-icon:active, .cp-btn:active, .cp-btn-audio:active {
    transform: translateZ(0) var(--m-press) !important;
    box-shadow: var(--m-sh-1);
    transition-duration: var(--m-t-1);
}
.btn-primary, .btn-create, .btn-login {
    background-image: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255, 255, 255, .18) 50%,
        transparent 70%
    );
    background-size: 220% 100%;
    background-position: 120% 0;
}
.btn-primary:hover, .btn-create:hover, .btn-login:hover {
    background-position: -40% 0;
    animation: m-shine 0.9s var(--m-ease) 1;
}
@keyframes m-shine {
    from { background-position: 120% 0; }
    to { background-position: -40% 0; }
}

/* 涟漪 */
.m-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    transform: scale(0);
    opacity: .55;
    pointer-events: none;
    animation: m-ripple 0.55s var(--m-ease-out) forwards;
}
.dark .m-ripple,
[data-theme="dark"] .m-ripple { background: rgba(255, 255, 255, .22); }
@keyframes m-ripple {
    to { transform: scale(2.8); opacity: 0; }
}

/* ── 3. 卡片 / 列表项：抬升 + 边缘高光 ───────────────────────────── */
.bbs-card, .sidebar-card, .card, .topic-card, .list-group-item,
.aadmin-stat-card, .s30-card, .au-glass {
    transform: translateZ(0);
    transition:
        transform var(--m-t-3) var(--m-ease),
        box-shadow var(--m-t-3) var(--m-ease),
        border-color var(--m-t-3) var(--m-ease),
        background var(--m-t-2) var(--m-ease);
    will-change: transform, opacity;
}
.bbs-card:hover, .sidebar-card:hover, .card:hover, .topic-card:hover,
.list-group-item:hover, .s30-card:hover {
    transform: translateZ(0) translateY(-3px);
    box-shadow: var(--m-sh-pop);
}

/* 列表进入：错峰淡入上浮 */
.m-stagger > * {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    animation: m-rise-in var(--m-t-5) var(--m-ease) forwards;
}
.m-stagger > *:nth-child(1) { animation-delay: 0ms; }
.m-stagger > *:nth-child(2) { animation-delay: 45ms; }
.m-stagger > *:nth-child(3) { animation-delay: 90ms; }
.m-stagger > *:nth-child(4) { animation-delay: 135ms; }
.m-stagger > *:nth-child(5) { animation-delay: 180ms; }
.m-stagger > *:nth-child(6) { animation-delay: 225ms; }
.m-stagger > *:nth-child(7) { animation-delay: 270ms; }
.m-stagger > *:nth-child(8) { animation-delay: 315ms; }
.m-stagger > *:nth-child(n+9) { animation-delay: 360ms; }

@keyframes m-rise-in {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to { opacity: 1; transform: none; }
}
@keyframes m-fade-up {
    from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); }
    to { opacity: 1; transform: none; }
}
@keyframes m-fade-down {
    from { opacity: 0; transform: translate3d(0, -10px, 0); }
    to { opacity: 1; transform: none; }
}
@keyframes m-zoom-in {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes m-slide-right {
    from { opacity: 0; transform: translate3d(18px, 0, 0); }
    to { opacity: 1; transform: none; }
}
@keyframes m-pop {
    0% { opacity: 0; transform: scale(.86); }
    70% { transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes m-bounce-soft {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(-6px); }
}
@keyframes m-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(165, 124, 54, .35); }
    70% { box-shadow: 0 0 0 12px rgba(165, 124, 54, 0); }
    100% { box-shadow: 0 0 0 0 rgba(165, 124, 54, 0); }
}
@keyframes m-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}
@keyframes m-spin {
    to { transform: rotate(360deg); }
}
@keyframes m-skeleton {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes m-heart {
    0% { transform: scale(1); }
    30% { transform: scale(1.28); }
    55% { transform: scale(.92); }
    100% { transform: scale(1); }
}

/* 入场工具类 */
.m-enter { animation: m-fade-up var(--m-t-5) var(--m-ease) both; }
.m-enter-down { animation: m-fade-down var(--m-t-5) var(--m-ease) both; }
.m-enter-zoom { animation: m-zoom-in var(--m-t-4) var(--m-ease-spring) both; }
.m-enter-right { animation: m-slide-right var(--m-t-5) var(--m-ease) both; }
.m-pop { animation: m-pop var(--m-t-4) var(--m-ease-spring) both; }

/* ── 4. 表单：聚焦光环 + 失败抖动 + 标签上浮 ─────────────────────── */
.form-control, .form-select, .form-check-input, textarea.form-control {
    transition:
        border-color var(--m-t-2) var(--m-ease),
        box-shadow var(--m-t-3) var(--m-ease),
        background var(--m-t-2) var(--m-ease),
        transform var(--m-t-2) var(--m-ease);
}
.form-control:focus, .form-select:focus {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 3px var(--au-brand-soft, rgba(165, 124, 54, .14)),
        var(--m-sh-1) !important;
}
.form-control.is-invalid, .form-select.is-invalid, .is-invalid {
    animation: m-shake .42s var(--m-ease);
    border-color: var(--au-err, #C4382E) !important;
}
.form-check-input {
    transition: background var(--m-t-2) var(--m-ease),
                border-color var(--m-t-2) var(--m-ease),
                box-shadow var(--m-t-2) var(--m-ease),
                transform var(--m-t-1) var(--m-ease);
}
.form-check-input:checked {
    background-color: var(--au-brand, #A57C36);
    border-color: var(--au-brand, #A57C36);
    animation: m-pop var(--m-t-3) var(--m-ease-spring);
}
.form-check-input:active { transform: scale(.9); }

/* 开关 */
.form-switch .form-check-input {
    transition: background .22s var(--m-ease), border-color .22s var(--m-ease);
}
.form-switch .form-check-input:checked {
    animation: m-pop .28s var(--m-ease-spring);
}

/* ── 5. 弹层 / 下拉 / 抽屉 / Toast ───────────────────────────────── */
.modal.fade .modal-dialog {
    transform: translate3d(0, 22px, 0) scale(.96);
    opacity: 0;
    transition:
        transform var(--m-t-4) var(--m-ease-spring),
        opacity var(--m-t-3) var(--m-ease);
}
.modal.show .modal-dialog {
    transform: none;
    opacity: 1;
}
.modal.fade .modal-backdrop {
    transition: opacity var(--m-t-3) var(--m-ease);
}
.modal-content {
    animation: m-fade-up var(--m-t-4) var(--m-ease-spring) both;
}

.dropdown-menu {
    animation: m-fade-down var(--m-t-2) var(--m-ease) both;
    transform-origin: top center;
}
.dropdown-menu.show {
    animation: m-fade-down var(--m-t-2) var(--m-ease) both;
}

.toast {
    animation: m-slide-right var(--m-t-3) var(--m-ease-spring) both;
    will-change: transform, opacity;
}
.toast.m-enter-down {
    animation: m-fade-down var(--m-t-3) var(--m-ease-spring) both;
}
.toast.m-shake {
    animation: m-shake .42s var(--m-ease), m-fade-down var(--m-t-3) var(--m-ease) both;
}
.toast.hide, .toast.m-exit {
    opacity: 0;
    transform: translate3d(0, -12px, 0) scale(.96);
    transition: opacity var(--m-t-2), transform var(--m-t-2);
}

/* 侧栏抽屉 / 折叠 */
.au-fold-children, .au-children-inner {
    transition: grid-template-rows var(--m-t-3) var(--m-ease),
                opacity var(--m-t-3) var(--m-ease),
                max-height var(--m-t-3) var(--m-ease);
}

/* ── 6. 导航 / 标签 / 分页 / 徽章 ────────────────────────────────── */
.nav-link, .nav-tabs .nav-link, .pagination .page-link {
    transition:
        color var(--m-t-2) var(--m-ease),
        background var(--m-t-2) var(--m-ease),
        border-color var(--m-t-2) var(--m-ease),
        transform var(--m-t-1) var(--m-ease),
        box-shadow var(--m-t-2) var(--m-ease);
}
.nav-link:hover, .pagination .page-link:hover {
    transform: translateY(-1px);
}
.nav-link.active, .nav-tabs .nav-link.active {
    animation: m-fade-up var(--m-t-3) var(--m-ease);
}
.pagination .page-item.active .page-link {
    animation: m-pop var(--m-t-3) var(--m-ease-spring);
}

.badge, .notification-badge, .voice-badge {
    transition: transform var(--m-t-2) var(--m-ease-spring),
                opacity var(--m-t-2) var(--m-ease);
}
.badge-new, .notification-badge {
    animation: m-pulse-ring 1.8s var(--m-ease) 2;
}

/* ── 7. 操作反馈：点赞心形 / 成功勾 / 加载 ───────────────────────── */
.like-active svg, .btn-icon.like-active svg {
    animation: m-heart .48s var(--m-ease-spring);
}
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: m-spin .7s linear infinite;
}

/* 成功脉冲 */
.m-success-pulse {
    animation: m-pulse-ring .7s var(--m-ease), m-pop .35s var(--m-ease-spring);
}

/* ── 8. 图片 / 头像 / 灯箱 ───────────────────────────────────────── */
img, video {
    transition: opacity var(--m-t-3) var(--m-ease), transform var(--m-t-3) var(--m-ease);
}
img.au-img {
    opacity: 0;
    transform: scale(1.02);
}
img.au-img.au-img-in {
    opacity: 1;
    transform: none;
}
.avatar, .avatar-sm, .avatar-md, .avatar-lg, .btn-avatar {
    transition: transform var(--m-t-2) var(--m-ease-spring),
                box-shadow var(--m-t-3) var(--m-ease),
                border-color var(--m-t-2) var(--m-ease);
}
.btn-avatar:hover, .avatar:hover {
    transform: scale(1.06) rotate(-1.5deg);
}

/* ── 9. 骨架屏 / 空状态 ──────────────────────────────────────────── */
.m-skeleton {
    background: linear-gradient(
        90deg,
        var(--au-bg-2, #F0EDE6) 25%,
        var(--au-surface, rgba(255,255,255,.7)) 37%,
        var(--au-bg-2, #F0EDE6) 63%
    );
    background-size: 200% 100%;
    animation: m-skeleton 1.4s ease infinite;
    border-radius: var(--au-r-sm, 12px);
}
.empty-state {
    animation: m-fade-up var(--m-t-5) var(--m-ease) both;
}

/* ── 10. 页面过渡遮罩（路由切换瞬间） ───────────────────────────── */
#m-page-veil {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    background: var(--au-bg, #F7F5F1);
    opacity: 0;
    transition: opacity .28s var(--m-ease);
}
#m-page-veil.on { opacity: .55; }

/* ── 11. 播放器 / 语音组件 ───────────────────────────────────────── */
.cp-dock, .voice-widget, .voice-panel {
    animation: m-fade-up var(--m-t-4) var(--m-ease-spring) both;
}
.cp-btn-audio.playing {
    animation: m-pulse-ring 1.6s var(--m-ease) infinite;
}

/* ── 12. 管理后台表格 ────────────────────────────────────────────── */
.table-hover tbody tr {
    transition: background var(--m-t-2) var(--m-ease),
                transform var(--m-t-1) var(--m-ease),
                box-shadow var(--m-t-2) var(--m-ease);
}
.table-hover tbody tr:hover {
    background: var(--au-brand-soft, rgba(165, 124, 54, .08));
    transform: translateX(2px);
}

/* ── 13. 性能：contain / content-visibility（长列表） ────────────── */
.bbs-card, .sidebar-card, .topic-card, .card, .s30-card {
    contain: layout style paint;
}
.topic-card, .list-group-item, .reply-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 120px;
}
.topic-card { contain-intrinsic-size: auto 160px; }
.reply-item { contain-intrinsic-size: auto 100px; }

/* 视差层不参与重排 */
.lx-atmos, .lx-grid, .lx-grain {
    pointer-events: none;
    contain: strict;
}

/* 只在 hover 设备上启用重动画 */
@media (hover: none) {
    .btn:hover, .btn-icon:hover, .bbs-card:hover, .card:hover, .topic-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    .m-ripple { display: none; }
}

/* 移动端轻量化 */
@media (max-width: 768px) {
    .m-stagger > * { animation-duration: 380ms; }
    .btn-primary:hover, .btn-create:hover { animation: none; background-position: 120% 0; }
}

/* 打印：全部关掉 */
@media print {
    .m-ripple, #m-page-veil, .lx-atmos, .lx-grid, .lx-grain, .lx-progress {
        display: none !important;
    }
}

/* 表单失败抖动（JS 临时类） */
.m-shake-once {
    animation: m-shake .42s var(--m-ease) !important;
}

/* 管理后台侧栏 / 抽屉 */
.admin-sidebar, .admin-scrim, .admin-nav-link {
    transition: transform var(--m-t-3) var(--m-ease),
                opacity var(--m-t-3) var(--m-ease),
                background var(--m-t-2) var(--m-ease),
                color var(--m-t-2) var(--m-ease),
                box-shadow var(--m-t-3) var(--m-ease);
}
.admin-nav-link {
    position: relative;
    overflow: hidden;
}
.admin-nav-link::after {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    border-radius: 3px;
    background: var(--au-brand, #A57C36);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform var(--m-t-2) var(--m-ease);
}
.admin-nav-link:hover::after,
.admin-nav-link.active::after {
    transform: scaleY(1);
}
.admin-nav-link:hover { transform: translateX(3px); }
.admin-nav-link:active { transform: translateX(1px) scale(.98); }

/* 操作条 / 工具条弹出 */
.admin-batch-bar, .au-toolbar, .lx-toolbar {
    animation: m-fade-down var(--m-t-3) var(--m-ease) both;
}

/* 折叠开关图标旋转 */
.au-fold-ico.is-open, .au-children-toggle.is-open .ico {
    transform: rotate(180deg);
}

/* 分页页码微弹 */
.pagination .page-item .page-link:active {
    transform: scale(.92);
}

/* 选择框批量高亮 */
.table tr.m-row-selected {
    animation: m-fade-up var(--m-t-2) var(--m-ease);
    background: var(--au-brand-soft, rgba(165, 124, 54, .10)) !important;
}