/* ============================================================
   proof-motion.css — 統計數字計數與名人榜動態
   部署位置：/Content/css/proof-motion.css（於 site.css 之後；全站載入即可）
   作用對象（皆為既有元素，不改 HTML）：
     .stat-band .stat strong（首頁數字）、.proof-v（「928 筆考取紀錄 →」）、
     .fame-teaser .fame-list li（首頁名人榜）、名人榜頁 .data-table tbody tr 與 .fame-rank.top、
     名人榜頁 .page-lead strong（累計筆數）
   規則：只在 JS 啟用後才有隱藏態；只動 transform／opacity；支援 prefers-reduced-motion。
   ============================================================ */

.pm-num { font-variant-numeric: tabular-nums; }

/* 「$0」蓋章 */
.pm-stamp { display: inline-block; }
.pm-go .pm-stamp { animation: pm-stamp .6s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes pm-stamp { 0% { opacity: 0; transform: scale(1.8) rotate(-8deg); } 100% { opacity: 1; transform: none; } }

/* 依序浮現（首頁名人榜 li、名人榜頁表格列） */
.pm-ready .pm-item { opacity: 0; transform: translateY(12px); }
.pm-ready.pm-go .pm-item { animation: pm-rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--pm-i, 0) * 90ms); }
@keyframes pm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 最新考取徽章（30 天內）：掛在卡片左上角，不佔排版空間 */
.fame-list li.pm-has-new { position: relative; }
.pm-new { position: absolute; top: -10px; left: 14px; padding: 0 8px; border-radius: 999px; background: var(--tw-gold); color: #24180a;
  font-size: 12px; font-weight: 800; line-height: 20px; white-space: nowrap; box-shadow: 0 1px 4px rgba(11,61,145,.18); }
.pm-go .pm-new { animation: pm-pop .45s cubic-bezier(.2,1.5,.4,1) .6s both; }
@keyframes pm-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* 前三名金徽章掃光一次 */
.fame-rank.top.pm-shine { position: relative; overflow: hidden; }
.fame-rank.top.pm-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transform: translateX(0) skewX(-20deg);
  animation: pm-shine .8s ease-in-out both; animation-delay: calc(.4s + var(--pm-i, 0) * 120ms); pointer-events: none; }
@keyframes pm-shine { from { transform: translateX(0) skewX(-20deg); } to { transform: translateX(400%) skewX(-20deg); } }

@media (prefers-reduced-motion: reduce) {
  .pm-ready .pm-item { opacity: 1; transform: none; }
  .pm-ready.pm-go .pm-item, .pm-go .pm-stamp, .pm-go .pm-new { animation: none; }
  .fame-rank.top.pm-shine::after { animation: none; display: none; }
}