/* 卡片科幻特效层（增补规格 2026-09-22 §5）。
   整块删除本文件 + 移除 index.html 的 <link>，即完全回滚。
   约定：不得定义 :root 变量（防绕过 contrast.test.js 的对比度基线）；
        不得使用强制优先级；所有 animation 必须在文件末尾 reduced-motion 块内关闭。
   颜色只用既有令牌；rgba(106, 90, 224, …) 是 --accent #6a5ae0 的十进制写法，仅用于透明度表达。 */

/* ---- 5.1 剧种卡：完整特效（桌面） ---- */
.cat-card { position: relative; overflow: hidden; }
.cat-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 4px 16px rgba(106, 90, 224, .25);
}
.cat-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background-image: linear-gradient(90deg, transparent 0%, rgba(106, 90, 224, .28) 50%, transparent 100%);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  opacity: 0;
}
@media (hover: hover) {
  /* 只在 hover 时播放一次，不做常驻循环：常驻动效持续吸引注意，对适老不利 */
  .cat-card:hover::after { animation: cfxSweep 1.1s linear 1; }
}
/* 两端必须让光带完全移出：background-position 百分比参照 (容器宽 − 背景图宽) = 0.6×容器宽，
   -100% → 偏移 -0.6×容器宽（带宽 0.4×容器宽，落于 [-0.6, -0.2]），200% → +1.2×容器宽。
   若按容器宽直接相乘（-40% → 140%）两端会各残留 40% 带宽，循环点可见"尾巴瞬移"。 */
@keyframes cfxSweep {
  from { opacity: 1; background-position: -100% 0; }
  to   { opacity: 1; background-position: 200% 0; }
}

/* ---- 5.2 条目卡：轻量发光描边（不倾斜、不位移、不缩放） ----
   卡内含 44px 收藏键，一旦位移触控目标会跑掉，老年用户容易点空点错。
   本规则与 style.css 的 .card:hover 同特异性（0,2,0），靠本文件更靠后的源码顺序替换其黑色阴影。 */
.card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 4px 16px rgba(106, 90, 224, .22);
}

/* ---- 5.3 手机端：只变色，不下沉不位移 → 与列表滚动零冲突 ---- */
@media (hover: none) {
  .cat-card:active, .card:active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 4px 16px rgba(106, 90, 224, .22);
  }
}

/* ---- 5.6 reduced-motion 关闭块（必须是文件最后一个块） ----
   只关运动（animation），不关 transition：既有 transition 仅产生颜色/阴影渐变，不产生位移。
   本块保留静态变色，故不写 display/visibility 之类会影响状态可见性的声明。 */
@media (prefers-reduced-motion: reduce) {
  .cat-card:hover::after { animation: none; opacity: 0; }
}