/* =============================================================================
   图片交互动效 · 全站
   -----------------------------------------------------------------------
   需求：所有内容型图片在鼠标悬停时有显示动作，点击时有一点动态效果。
   实现原则：
     1. 纯 CSS 状态 + Web Animations，不改 DOM 结构 —— 原页面的
        card-codex.js / decks.js / story.js 依赖既有 DOM 层级，动 DOM 会引入回归。
     2. transform 用 CSS 变量承载（--img-zoom），点击动画也走同一个变量，
        避免 hover 态与点击态互相覆盖。
     3. 只对"内容型图片"生效（naturalWidth ≥ 80px），关键词/兵种这类
        11~13px 的小图标不加动效，否则整个界面会一直在抖。
     4. 尊重两种降级口径：系统 prefers-reduced-motion 与应用内
        「减少动态效果」开关（html[data-motion="reduced"]），与 motion.js 同源。
   ============================================================================= */

/* 所有图片：统一的过渡载体。
   transform 只挂在带 data-img-fx 的图片上 —— 全局给每张 img 加 transform
   会连带影响战场里的卡面（它们有自己的定位与尺寸计算），这里收敛作用域。 */
img {
  --img-zoom: 1;
  transition:
    transform 240ms cubic-bezier(.22, .68, .28, 1),
    filter 240ms cubic-bezier(.4, 0, .2, 1),
    box-shadow 240ms cubic-bezier(.4, 0, .2, 1);
}

img[data-img-fx] {
  transform: scale(var(--img-zoom));
}

/* 悬停：轻微推近 + 提亮 + 投影加深（内容型图片才带 data-img-fx） */
img[data-img-fx] {
  will-change: transform, filter;
}

img[data-img-fx]:hover {
  --img-zoom: 1.04;
  filter: brightness(1.08) saturate(1.06) contrast(1.02);
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .72);
}

img[data-img-fx]:focus-visible {
  --img-zoom: 1.04;
  filter: brightness(1.08) saturate(1.06);
}

/* 小图标（关键词 / 兵种，11~13px）：只给极轻微的亮度反馈，
   不缩放、不投影 —— 否则界面会一直在抖。 */
img[data-img-fx='small'] {
  --img-zoom: 1;
  transition: filter 180ms cubic-bezier(.4, 0, .2, 1);
}
img[data-img-fx='small']:hover {
  --img-zoom: 1;
  filter: brightness(1.22) saturate(1.08);
}

/* 点击：金色扩散环 + 亮度脉冲 */
@keyframes img-click-ring {
  from {
    box-shadow: 0 0 0 0 rgba(240, 194, 107, .6), 0 0 0 1px rgba(240, 194, 107, .9);
  }
  to {
    box-shadow: 0 0 0 16px rgba(240, 194, 107, 0), 0 0 0 1px rgba(240, 194, 107, 0);
  }
}

@keyframes img-click-pulse {
  0% {
    filter: brightness(1) saturate(1);
    transform: scale(var(--img-zoom));
  }
  32% {
    filter: brightness(1.42) saturate(1.28);
    transform: scale(calc(var(--img-zoom) * 1.055));
  }
  100% {
    filter: brightness(1) saturate(1);
    transform: scale(var(--img-zoom));
  }
}

img.is-img-clicking {
  animation:
    img-click-ring 460ms cubic-bezier(.22, .68, .28, 1),
    img-click-pulse 460ms cubic-bezier(.22, .68, .28, 1);
}

/* 减少动态：只留极轻微的亮度变化，不做缩放与扩散。
   两条口径任一命中即降级：系统偏好 / 应用内开关。 */
@media (prefers-reduced-motion: reduce) {
  img {
    transition: filter 160ms linear;
  }
  img[data-img-fx] {
    transform: none;
  }
  img[data-img-fx]:hover {
    --img-zoom: 1;
    filter: brightness(1.06);
    box-shadow: none;
  }
  img.is-img-clicking {
    animation: none;
    filter: brightness(1.18);
  }
}

[data-motion='reduced'] img {
  transition: filter 160ms linear;
}
[data-motion='reduced'] img[data-img-fx] {
  transform: none;
}
[data-motion='reduced'] img[data-img-fx]:hover {
  --img-zoom: 1;
  filter: brightness(1.06);
  box-shadow: none;
}
[data-motion='reduced'] img.is-img-clicking {
  animation: none;
  filter: brightness(1.18);
}