/* ═══════════════════════════════════════════
   微互動小包 v1（2026-07-20 Lance 拍板）
   哲學：不炫技，讓產品「摸起來」有質感——按下有回饋、對錯有表情、數字會呼吸
   純 CSS 零依賴；尊重系統「減少動態」設定
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* 按下回饋：全站可點的東西按下去都會「陷」一下 */
button,.portal-btn,.prod-btn,.opt,.mode-btn,.hub-btn,.anim-btn,.prac-btn,
.note-go,.tb-go,.gen-btn,.dl-btn,.re-roll,.view-tab,.fold-all-btn,.retry-btn,.srs-btn,.next-btn{
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
button:active,.portal-btn:active,.prod-btn:active,.opt:active,.mode-btn:active,
.hub-btn:active,.prac-btn:active,.gen-btn:active,.dl-btn:active,.tb-go:active,
.note-go:active,.view-tab:active,.retry-btn:active,.next-btn:active{
  transform:scale(.96);
}

/* 動畫原子 */
@keyframes micro-pop{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes micro-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}55%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
@keyframes micro-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* 選擇題：答對彈一下、答錯搖頭 */
.mc-opt.right{animation:micro-pop .3s ease}
.mc-opt.wrong{animation:micro-shake .35s ease}

/* 「✓ 學會了」按下去縮、放開彈回（打卡手感） */
.srs-btn:active{transform:scale(.94)}

/* 進度條：滑順長出來 */
.ch-prog-fill{transition:width .8s cubic-bezier(.22,1,.36,1)}

/* 入口：磁磚數字依序彈出、狀態條數字呼吸 */
.stat-tile b{display:inline-block;animation:micro-pop .5s ease backwards}
.stat-tile:nth-child(2) b{animation-delay:.06s}
.stat-tile:nth-child(3) b{animation-delay:.12s}
.stat-tile:nth-child(4) b{animation-delay:.18s}
.today-bar b{display:inline-block;animation:micro-pop .4s ease}

/* 小卡翻牌前的按壓感 */
.quiz-card{transition:transform .15s ease}
.quiz-card:active{transform:scale(.97)}

/* NPC 導覽對話框登場 */
#tour-box{animation:micro-pop .25s ease}

/* 計畫書區塊逐格浮現 */
#plan .letter,#plan .diag,#plan .tree,#plan .week,#plan .m-goal,#plan .phase,#plan .sign{animation:micro-rise .35s ease backwards}
#plan .diag{animation-delay:.05s}#plan .tree{animation-delay:.1s}#plan .week{animation-delay:.15s}

/* 🧭 NPC 導覽微互動（2026-07-20）——小代書會呼吸、聚光燈會脈動 */
@keyframes npc-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes npc-in{from{opacity:0;transform:translate(-50%,8px) scale(.96)}to{opacity:1}}
@keyframes hole-pulse{0%,100%{outline-color:rgba(217,97,75,.0)}50%{outline-color:rgba(217,97,75,.85)}}
#tour-box .npc-face{animation:npc-bob 2.4s ease-in-out infinite}
#tour-box{animation:npc-in .3s ease}
#tour-hole{outline:2.5px solid rgba(217,97,75,0);outline-offset:2px;animation:hole-pulse 1.8s ease-in-out infinite}
#tour-next{transition:transform .12s ease,box-shadow .2s}
#tour-next:hover{box-shadow:0 4px 14px rgba(217,97,75,.45)}
#tour-text{animation:micro-rise .3s ease}