/*! ==========================================================================
 *  动态视觉层 Motion UI  v1.0
 *  ------------------------------------------------------------------------
 *  纯叠加式前端动效。只使用 transform / opacity / box-shadow / background /
 *  filter / animation 这类"不参与布局"的属性，不修改任何既有标记、
 *  不接管任何事件、不触碰任何业务逻辑。
 *
 *  · 全部动效限定在 body.zm-ui 作用域内（由 ui-motion.js 自动挂类）
 *    —— 站内不存在同前缀规则，因此与原有样式零冲突；
 *  · 完整移除方式：摘掉页面里的两行引用即可 100% 还原，无需改回任何代码。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 0. 设计变量
 * ------------------------------------------------------------------------ */
:root {
    --zm-blue: #3853e3;
    --zm-blue-soft: #6c8cff;
    --zm-pink: #f4a0a0;
    --zm-ease: cubic-bezier(.32, .72, 0, 1);
    --zm-spring: cubic-bezier(.34, 1.46, .64, 1);
    --zm-rise: cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------------------
 * 1. 整页淡入 —— 切换页面时不再"硬闪"
 *    （不带 zm-ui 前缀，保证任何情况下都不闪白）
 * ------------------------------------------------------------------------ */
@keyframes zmPageIn {
    from { opacity: 0; }
}
body {
    animation: zmPageIn .4s var(--zm-ease) backwards;
}

/* ---------------------------------------------------------------------------
 * 2. 首屏内容错位升起 —— 卡片逐张"落"下来的层次感
 * ------------------------------------------------------------------------ */
@keyframes zmRise {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
}

body > .content > *,
body > .container > *,
body > .login-container > * {
    animation: zmRise .62s var(--zm-rise) backwards;
}
body > .content > *:nth-child(1),
body > .container > *:nth-child(1),
body > .login-container > *:nth-child(1) { animation-delay: .02s; }
body > .content > *:nth-child(2),
body > .container > *:nth-child(2),
body > .login-container > *:nth-child(2) { animation-delay: .07s; }
body > .content > *:nth-child(3),
body > .container > *:nth-child(3),
body > .login-container > *:nth-child(3) { animation-delay: .12s; }
body > .content > *:nth-child(4),
body > .container > *:nth-child(4),
body > .login-container > *:nth-child(4) { animation-delay: .17s; }
body > .content > *:nth-child(5),
body > .container > *:nth-child(5),
body > .login-container > *:nth-child(5) { animation-delay: .22s; }
body > .content > *:nth-child(6),
body > .container > *:nth-child(6),
body > .login-container > *:nth-child(6) { animation-delay: .27s; }
body > .content > *:nth-child(7),
body > .container > *:nth-child(7),
body > .login-container > *:nth-child(7) { animation-delay: .32s; }
body > .content > *:nth-child(8),
body > .container > *:nth-child(8),
body > .login-container > *:nth-child(8) { animation-delay: .37s; }
body > .content > *:nth-child(n+9),
body > .container > *:nth-child(n+9),
body > .login-container > *:nth-child(n+9) { animation-delay: .42s; }

/* ---------------------------------------------------------------------------
 * 3. 卡片 / 列表项：悬停浮起 + 按压回弹
 * ------------------------------------------------------------------------ */
body.zm-ui :is(.menu-item, .channel-item, .amount-item, .admin-card, .card,
    .hs-panel-item, .step-panel-item, .admin-trade-row, .as-row, .menu-group,
    .qr-card, .expire-frame) {
    transition: transform .34s var(--zm-ease), box-shadow .34s var(--zm-ease);
}

@media (hover: hover) and (pointer: fine) {
    body.zm-ui :is(.menu-item, .channel-item, .amount-item, .admin-card, .card,
        .hs-panel-item, .step-panel-item, .admin-trade-row, .as-row, .qr-card):hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px -10px rgba(56, 83, 227, .28),
                    0 2px 6px rgba(17, 24, 60, .05);
    }
}

body.zm-ui :is(.menu-item, .channel-item, .amount-item, .admin-card, .card,
    .hs-panel-item, .step-panel-item, .as-row, .qr-card, .profile-name-btn):active {
    transform: scale(.975);
    transition-duration: .12s;
}

/* 菜单箭头跟随滑动 */
body.zm-ui .menu-arrow {
    transition: transform .32s var(--zm-ease), color .32s var(--zm-ease);
}
@media (hover: hover) and (pointer: fine) {
    body.zm-ui .menu-item:hover .menu-arrow {
        transform: translateX(3px);
        color: var(--zm-blue);
    }
}

/* ---------------------------------------------------------------------------
 * 4. 头像：呼吸光环（向外扩散的水波纹）
 * ------------------------------------------------------------------------ */
@keyframes zmAvatarPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(56, 83, 227, .34),
                    0 6px 16px rgba(56, 83, 227, .18);
    }
    58% {
        box-shadow: 0 0 0 10px rgba(56, 83, 227, 0),
                    0 10px 26px rgba(56, 83, 227, .30);
    }
}
body.zm-ui .profile-avatar {
    animation: zmAvatarPulse 3.6s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* ---------------------------------------------------------------------------
 * 5. 按钮：流光扫过 + 按压弹性
 * ------------------------------------------------------------------------ */
@keyframes zmSweep {
    0%        { transform: translateX(-160%) skewX(-18deg); }
    55%, 100% { transform: translateX(330%) skewX(-18deg); }
}

body.zm-ui :is(.login-btn, .btn-recharge, .btn-km, .send, .mbt,
    .xyob-btn, .step-cycle-btn, .img-btn) {
    position: relative;
    overflow: hidden;
    transition: transform .18s var(--zm-spring), box-shadow .3s ease, filter .2s ease;
}
body.zm-ui :is(.login-btn, .btn-recharge, .btn-km, .send, .mbt,
    .xyob-btn, .step-cycle-btn, .img-btn)::after {
    content: "";
    position: absolute;
    top: -25%;
    bottom: -25%;
    left: 0;
    width: 34%;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
    animation: zmSweep 4.4s cubic-bezier(.5, 0, .5, 1) infinite;
}
body.zm-ui :is(.login-btn, .btn-recharge, .btn-km, .send, .mbt,
    .xyob-btn, .step-cycle-btn, .img-btn):active {
    transform: scale(.955);
    filter: brightness(.97);
}
body.zm-ui :is(.login-btn, .btn-recharge, .btn-km):not(:active):hover {
    box-shadow: 0 10px 22px -8px rgba(56, 83, 227, .55);
}

/* 余额卡：缓慢掠过的柔光 */
body.zm-ui .balance-card {
    position: relative;
    overflow: hidden;
}
body.zm-ui .balance-card::after {
    content: "";
    position: absolute;
    top: -45%;
    bottom: -45%;
    left: 0;
    width: 26%;
    pointer-events: none;
    background: linear-gradient(100deg,
        transparent, rgba(255, 255, 255, .30), transparent);
    animation: zmSweep 7s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
 * 6. 弹层 / 模态框：遮罩淡入 + 面板弹性弹入
 *    （display 由 none 变可见时动画自动重播，无需任何 JS 介入）
 * ------------------------------------------------------------------------ */
@keyframes zmOverlayIn {
    from { opacity: 0; }
}
@keyframes zmPopIn {
    from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.93); }
}
@keyframes zmSheetIn {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
}

body.zm-ui :is(.modal-overlay, .km-modal-overlay, .action-overlay,
    .img-preview-overlay) {
    animation: zmOverlayIn .28s ease backwards;
}
body.zm-ui :is(.modal-box, .km-modal-box) {
    animation: zmPopIn .46s var(--zm-spring) backwards;
}
body.zm-ui .action-sheet {
    animation: zmSheetIn .46s var(--zm-ease) backwards;
}

/* 提示条 */
@keyframes zmToastIn {
    from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.92); }
}
body.zm-ui .toast {
    animation: zmToastIn .32s var(--zm-spring) backwards;
}

/* ---------------------------------------------------------------------------
 * 7. 底部导航：选中项发光呼吸（保留原有的缩放弹性过渡，不覆盖）
 * ------------------------------------------------------------------------ */
@keyframes zmNavHalo {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(56, 83, 227, .30)); }
    50%      { filter: drop-shadow(0 0 8px rgba(56, 83, 227, .70)); }
}
@keyframes zmNavAura {
    0%, 100% { opacity: .40; transform: scale(1); }
    50%      { opacity: .78; transform: scale(1.22); }
}

body.zm-ui .bnav-item.is-active .bnav-icon {
    animation: zmNavHalo 2.8s ease-in-out infinite;
}
body.zm-ui .bnav-item.is-active::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(56, 83, 227, .26), rgba(56, 83, 227, 0) 70%);
    animation: zmNavAura 2.8s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
 * 8. 顶部栏：滚动后浮起投影（由 JS 在滚动时挂类）
 * ------------------------------------------------------------------------ */
body.zm-ui .header {
    transition: box-shadow .34s var(--zm-ease);
}
body.zm-ui .header.zm-scrolled {
    box-shadow: 0 8px 20px -12px rgba(17, 24, 60, .35);
}

/* ---------------------------------------------------------------------------
 * 9. 聊天消息 / 列表项：新的内容自然浮入
 * ------------------------------------------------------------------------ */
@keyframes zmMsgIn {
    from { opacity: 0; transform: translate3d(0, 9px, 0) scale(.985); }
}
body.zm-ui .cmsg {
    animation: zmMsgIn .34s var(--zm-ease) backwards;
}
body.zm-ui .ctag {
    animation: zmMsgIn .3s var(--zm-ease) backwards;
}

/* ---------------------------------------------------------------------------
 * 10. 滚动进入视口才浮现（由 JS 的 IntersectionObserver 挂 zm-in）
 * ------------------------------------------------------------------------ */
body.zm-ui .zm-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity .55s ease, transform .68s var(--zm-rise);
}
body.zm-ui .zm-reveal.zm-in {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------------------
 * 11. 点击波纹（JS 生成 .zm-ripple）
 * ------------------------------------------------------------------------ */
@keyframes zmRipple {
    to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
body.zm-ui .zm-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle,
        rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 70%);
    animation: zmRipple .62s cubic-bezier(.22, 1, .36, 1) forwards;
}
body.zm-ui .zm-ripple.zm-ripple-blue {
    background: radial-gradient(circle,
        rgba(56, 83, 227, .30), rgba(56, 83, 227, 0) 70%);
}

/* ---------------------------------------------------------------------------
 * 12. 数值变化脉冲（余额、数量等变动时闪一下）
 * ------------------------------------------------------------------------ */
@keyframes zmFlash {
    0%   { transform: scale(1); }
    38%  { transform: scale(1.13); filter: drop-shadow(0 0 9px rgba(56, 83, 227, .45)); }
    100% { transform: scale(1); }
}
body.zm-ui .zm-flash {
    animation: zmFlash .52s var(--zm-spring);
}

/* ---------------------------------------------------------------------------
 * 13. 登录页品牌区：轻微浮动呼吸
 * ------------------------------------------------------------------------ */
@keyframes zmFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -6px, 0); }
}
body.zm-ui .brand-content {
    animation: zmFloat 6.8s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
 * 14. 滚动条细化
 * ------------------------------------------------------------------------ */
body.zm-ui ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
body.zm-ui ::-webkit-scrollbar-thumb {
    background: rgba(56, 83, 227, .22);
    border-radius: 3px;
}
body.zm-ui ::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------------------------------------------------------------------------
 * 15. 减弱动效 / 低端机降级：系统开了"减少动态效果"就全部收掉
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    body,
    body.zm-ui *,
    body.zm-ui *::before,
    body.zm-ui *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    body.zm-ui .zm-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}