/* ==========================================================================
   动效层 motion.css —— 零侵入：不改任何页面结构、文案与图片，只给已有元素加动画
   --------------------------------------------------------------------------
   设计原则：
   1. 只动 transform / opacity（合成层动画），不动宽高/内外边距/定位 → 布局零抖动（CLS = 0）
   2. 首屏元素不做入场动画，保护 LCP 与第一眼观感
   3. 隐藏态只挂在 html.motion-ready 下，样式或脚本没加载时页面保持原样，不会白屏
   4. 跟随系统"减弱动态效果"设置，开启后全部关闭
   5. 触屏设备不触发 hover 效果，避免点击后卡在悬停态
   ========================================================================== */

:root {
    --mv-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 入场动画：初始隐藏态 ---------- */
html.motion-ready [data-mv] {
    opacity: 0;
    transform: translate3d(0, var(--mv-y, 20px), 0) scale(var(--mv-s, 1));
    will-change: opacity, transform;
}

/* 只淡入、不做位移的元素（自身已用 transform 定位的，交给 JS 自动降级成这一档） */
html.motion-ready [data-mv="fade"] {
    transform: none;
}

/* ---------- 入场动画：进入视口后的终态 ---------- */
html.motion-ready [data-mv].mv-in {
    opacity: 1;
    transform: none;
    transition: opacity var(--mv-dur, 680ms) var(--mv-ease),
                transform var(--mv-dur, 680ms) var(--mv-ease);
    transition-delay: var(--mv-d, 0ms);
    will-change: auto;
}

/* ---------- 标题下的装饰横线：从中轴向两侧展开 ---------- */
html.motion-ready [data-mv-line] > span {
    transform: scaleX(0);
    transform-origin: 50% 50%;
}

html.motion-ready [data-mv-line].mv-in > span {
    transform: scaleX(1);
    transition: transform 620ms var(--mv-ease);
    transition-delay: var(--mv-d, 0ms);
}

/* ---------- 悬停微交互（仅指针设备）---------- */
@media (hover: hover) and (pointer: fine) {

    /* 功能卡片：轻微上浮 + 阴影加深，图标同步小幅抬起放大 */
    .winda-func-item {
        transition: transform .38s var(--mv-ease), box-shadow .38s var(--mv-ease);
    }

    .winda-func-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 36px -16px rgba(15, 23, 42, .45);
    }

    .winda-func-item .i-img img {
        transition: transform .38s var(--mv-ease);
    }

    .winda-func-item:hover .i-img img {
        transform: translateY(-4px) scale(1.06);
    }

    /* 行动按钮：上浮 + 投影，反馈更明确 */
    .free-use-btn,
    .yuyue-show-btn,
    .nav-free-login {
        transition: transform .28s var(--mv-ease), box-shadow .28s var(--mv-ease);
    }

    .free-use-btn:hover,
    .yuyue-show-btn:hover,
    .nav-free-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px -12px rgba(20, 153, 255, .7);
    }
}

/* ---------- 详情页阅读进度条（纯叠加层，不占文档流、不改内容）---------- */
.mv-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #51ffbe, #514eff);
    z-index: 99999;
    pointer-events: none;
    will-change: transform;
}

/* ---------- 无障碍：系统要求减弱动态效果时全部关闭 ---------- */
@media (prefers-reduced-motion: reduce) {
    html.motion-ready [data-mv],
    html.motion-ready [data-mv="fade"],
    html.motion-ready [data-mv-line] > span {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .winda-func-item,
    .winda-func-item .i-img img,
    .free-use-btn,
    .yuyue-show-btn,
    .nav-free-login {
        transition: none !important;
    }

    .winda-func-item:hover,
    .winda-func-item:hover .i-img img,
    .free-use-btn:hover,
    .yuyue-show-btn:hover,
    .nav-free-login:hover {
        transform: none !important;
    }

    .mv-progress {
        display: none !important;
    }
}