상호작용 모션 — 전부 피드백 목적으로만

모션은 이유가 있어야 붙인다. 여기 넣은 것은 전부 '지금 이걸 보고 있다'
또는 '이건 눌린다'를 말한다. 장식 목적 애니메이션은 넣지 않았다.

- 유리 카드 29곳: 커서 아래에서 3px 떠오르고 그림자가 깊어진다
- 링크 2곳: 밑줄이 왼쪽에서 자란다
- 쇼케이스 판 2곳: 1.2% 다가온다
- 스파인 정거장: 마커가 커지고 인용선이 밝아진다

전부 transform 과 opacity 만 움직인다(하드 게이트 8).
prefers-reduced-motion 안에 넣어 모션을 줄이는 설정에서는 전부 사라진다.

apps/site/src/components/Metrics.astro

@@ -16,7 +16,7 @@ const rest = c.items.filter((m) => !m.feature);
   <div class="full bento">
     {
       feature.map((m, i) => (
-        <div class="cell cell-lg glass glass-2 reveal" style={`--reveal-delay:${i * 70}ms`}>
+        <div class="cell cell-lg glass glass-2 lift reveal" style={`--reveal-delay:${i * 70}ms`}>
           <span class="cell-value nums">{m.value}</span>
           <span class="cell-label">{m.label}</span>
           <span class="cell-note muted">{m.note}</span>
@@ -25,7 +25,7 @@ const rest = c.items.filter((m) => !m.feature);
     }
     {
       rest.map((m, i) => (
-        <div class="cell glass reveal" style={`--reveal-delay:${(i + 2) * 70}ms`}>
+        <div class="cell glass lift reveal" style={`--reveal-delay:${(i + 2) * 70}ms`}>
           <span class="cell-value nums">{m.value}</span>
           <span class="cell-label">{m.label}</span>
           <span class="cell-note muted">{m.note}</span>