/* ==========================================================================
   交互卡片规范对齐 · r69
   --------------------------------------------------------------------------
   基于 design-system/ds.css 的 token，把现有卡片组件的 hover 行为收敛统一。

   ## 审计发现的问题

   | 组件              | 数量 | 原 hover                | 问题            |
   |-------------------|------|-------------------------|-----------------|
   | .ml-card          |  464 | 无                       | 整卡无反馈 ★    |
   | .mh-family        |   12 | 上浮 -3px               | 距离不一致      |
   | .mh-swatch        |   58 | 上浮 -4px               | 距离不一致      |
   | .r13-frame-thumb  |   12 | 上浮 -4px               | 距离不一致      |
   | .qs-factory-thumbs|    - | 上浮 -1px               | 距离不一致      |
   | .r15-component-card|   6 | 无 transform            | 只有背景变化    |
   | .r11-step-card    |    3 | 只 box-shadow           | 无位移          |
   | .rv-card          |    6 | 上浮 -2px               | 已正确          |
   | .mtry-swatch      |   58 | 上浮 -2px               | 已正确          |

   -> 统一到 --ds-lift (-2px) + --ds-base (.24s) + --ds-ease

   ## 为什么 -2px 而不是 -4px

   -4px 在小尺寸卡片上（如 72px 宽的色卡）位移比例过大，显得晃。
   -2px 在整个卡片尺度上都成立，也不会让相邻卡片的阴影打架。

   注意：本文件只改 hover 的视觉反馈，不动布局、尺寸、颜色语义。
   ========================================================================== */

/* ==========================================================================
   本文件自用的最小 token 集
   --------------------------------------------------------------------------
   原来这些 token 定义在 design-system/tokens.css。
   现在组件库不再使用，但卡片 hover 规范需要这 9 个值，
   所以内联在这里，避免依赖外部文件。

   值与原 token 完全一致，行为不变。
   ========================================================================== */

:root {
    --ds-fast: .18s;
    --ds-base: .24s;
    --ds-slow: .42s;
    --ds-ease: cubic-bezier(.2, .7, .2, 1);
    --ds-ease-soft: cubic-bezier(.2, .65, .3, 1);
    --ds-lift: -2px;
    --ds-shadow-hover: 0 8px 22px -14px rgba(16, 24, 20, .5);
    --ds-radius-sm: 6px;
    --ds-line-2: rgba(0, 0, 0, .2);
}


/* ==========================================================================
   1. 材料列表卡 .ml-card —— 464 个，原来完全无 hover
   --------------------------------------------------------------------------
   结构：article.ml-card > a.ml-swatch(图) + .ml-card-line(色号+保存) + p(材质族)
   卡片本身没有交互反馈，只有内部图片 scale 1.025。
   这里给整卡加统一的抬起 + 柔和投影，图片缩放同步到 --ds-slow。
   ========================================================================== */

.ml-card {
    transition: transform var(--ds-base) var(--ds-ease),
                box-shadow var(--ds-base) var(--ds-ease);
    border-radius: var(--ds-radius-sm);
    will-change: transform;
}

.ml-card:hover {
    transform: translateY(var(--ds-lift));
    box-shadow: var(--ds-shadow-hover);
}

/* 图片缩放与卡片抬起使用同一缓动，节奏一致 */
.ml-swatch img {
    transition: transform var(--ds-slow) var(--ds-ease-soft);
}
.ml-swatch:hover img {
    transform: scale(1.04);
}

/* 色号标题：hover 时不再只用下划线，整卡已经给出反馈，这里保持克制 */
.ml-card h3 a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 保存按钮：跟整卡 hover 联动，避免视觉断层 */
.ml-card-save {
    transition: background var(--ds-fast) ease,
                border-color var(--ds-fast) ease,
                transform var(--ds-base) var(--ds-ease);
}
.ml-card-save:hover {
    background: rgba(0, 0, 0, .06);
    border-color: var(--ds-line-2);
}
.ml-card-save:active {
    transform: scale(.94);
}

/* ==========================================================================
   2. 统一上浮距离 -2px
   ========================================================================== */

/* 材料族卡：-3px -> -2px */
.mh-family:hover {
    transform: translateY(var(--ds-lift));
}

/* 首页色卡：-4px -> -2px */
.mh-swatch:hover {
    transform: translateY(var(--ds-lift));
}
.mh-swatch {
    transition: transform var(--ds-base) var(--ds-ease);
}

/* 产品缩略：-4px -> -2px */
.r13-frame-thumb:hover {
    transform: translateY(var(--ds-lift));
}
.r13-frame-thumb {
    transition: border-color var(--ds-fast) ease,
                background var(--ds-fast) ease,
                transform var(--ds-base) var(--ds-ease);
}

/* 工艺缩略：-1px -> -2px */
.qs-factory-thumbs button:hover {
    transform: translateY(var(--ds-lift));
    opacity: .85;
}

/* 开发组件卡：原来只变背景，补上位移 */
.r15-component-card {
    transition: background var(--ds-fast) ease,
                border-color var(--ds-fast) ease,
                box-shadow var(--ds-base) var(--ds-ease),
                transform var(--ds-base) var(--ds-ease);
}
.r15-component-card:hover {
    transform: translateY(var(--ds-lift));
    box-shadow: var(--ds-shadow-hover);
}

/* 步骤卡：原来只有 box-shadow，补上轻微位移 */
.r11-step-card {
    transition: box-shadow var(--ds-base) var(--ds-ease),
                border-color var(--ds-fast) ease,
                transform var(--ds-base) var(--ds-ease);
}
.r11-step-card:hover {
    transform: translateY(var(--ds-lift));
}

/* 评价卡：已是 -2px，只把时长统一到 token */
.rv-card {
    transition: border-color var(--ds-fast) ease,
                transform var(--ds-base) var(--ds-ease),
                background var(--ds-fast) ease;
}

/* ==========================================================================
   3. 统一缓动曲线（原来有 5 种近似 cubic-bezier）
   ========================================================================== */

.mh-family-img img,
.mh-swatch-img,
.r13-frame-thumb img,
.ql-film-item img {
    transition-timing-function: var(--ds-ease);
}

/* 图片缩放类统一用 soft 曲线（长距离更顺） */
.mh-family-img img,
.ql-film-item img {
    transition: transform var(--ds-slow) var(--ds-ease-soft),
                filter var(--ds-slow) ease;
}

/* ==========================================================================
   4. 无障碍降级
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ml-card,
    .ml-card-save,
    .mh-family,
    .mh-swatch,
    .mh-swatch-img,
    .r13-frame-thumb,
    .qs-factory-thumbs button,
    .r15-component-card,
    .r11-step-card,
    .rv-card,
    .ml-swatch img,
    .mh-family-img img,
    .ql-film-item img {
        transition: none !important;
    }
    .ml-card:hover,
    .mh-family:hover,
    .mh-swatch:hover,
    .r13-frame-thumb:hover,
    .qs-factory-thumbs button:hover,
    .r15-component-card:hover,
    .r11-step-card:hover {
        transform: none !important;
    }
    .ml-swatch:hover img,
    .mh-family:hover .mh-family-img img,
    .ql-film-item:hover img {
        transform: none !important;
    }
}

/* ==========================================================================
   5. 键盘可达性：卡片内的链接与按钮统一轮廓
   ========================================================================== */

.ml-swatch:focus-visible,
.ml-card-save:focus-visible,
.mh-family:focus-visible,
.mh-swatch:focus-visible,
.r13-frame-thumb:focus-visible,
.r15-component-card:focus-visible,
.qs-factory-thumbs button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ==========================================================================
   6. 打印
   ========================================================================== */

@media print {
    .ml-card:hover,
    .r15-component-card:hover,
    .r11-step-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}