fix(frontend): reduced-motion CSS 特异性不足，动画无法禁用

[xiaocheny214]

问题描述

1. CSS 特异性 bug

文件: frontend/src/index.css

第 129-141 行的 @media (prefers-reduced-motion: reduce) 设置了：

.project-pixel-mark i { animation: none; }

但第 254-284 行的更高特异性选择器覆盖了它：

.project-pixel-mark i.is-active  { animation: project-pixel-frame 3.4s ...; }
.project-pixel-mark i.is-handle  { animation: project-pixel-handle 3.8s ...; }
.project-pixel-mark i.is-cursor  { animation: project-pixel-cursor 2.8s ...; }

这些选择器多了 .is-active 等类名，特异性更高，且出现在更后面，因此 animation: none 被覆盖。开启 prefers-reduced-motion 的用户仍然会看到像素网格动画。

2. brand-bird 动画不响应设置切换

文件: frontend/src/pages/home/brand-bird.tsx:58

const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches

在 useEffect([], []) 中一次性读取，没有监听 change 事件。用户在组件挂载期间切换 OS 无障碍设置，canvas 动画不会响应。

建议修复

1. CSS: 在 reduced-motion 媒体查询中使用同等或更高特异性的选择器，如：

@media (prefers-reduced-motion: reduce) {
  .project-pixel-mark i.is-active,
  .project-pixel-mark i.is-handle,
  .project-pixel-mark i.is-cursor {
    animation: none !important;
  }
}

2. brand-bird: 使用 matchMedia.addEventListener('change', ...) 监听设置变化，或使用 useSyncExternalStore 封装。

影响

• 严重程度: Medium
• 无障碍合规问题，影响有前庭功能障碍的用户