/* 按鈕與互動動態：2D、立體版共用。純 CSS，參數取自按鈕圖鑑（motion-dev-animations gallery/presets.json），
   彈簧用 CSS linear() 逐點描出來（scripts 以外的一次性換算：k／c／m → 從 0 到 1 的位移曲線，取樣 16–48 點），
   不支援 linear() 的瀏覽器（iOS 17.1 以前）退回近似的 cubic-bezier。

   用到的編號與調整（原值見圖鑑）：
     #6 Scale Button   圓形工具鈕：按下 0.92（原 0.95，指頭按小圓鈕要更明顯）；滑過放大 1.05 只在有滑鼠的裝置（原本不分裝置）
                       彈回用 #6 的彈簧 stiffness 400／damping 20（原值）
     #2 Snappy         長方形按鈕、分段鈕：按下 0.96（#6 原 0.95，寬按鈕縮 5% 太晃），彈回 500／25／0.8（原值）
     #41 Animated Background（點選）  分頁膠囊、立體版方位鈕、Memo 狀態：深色底塊滑到選的那一格，bounce 0.2、0.3 秒（原值，換算 899／48／1）
     #3 Bouncy         打勾「逛過」那一下：勾勾從 0.35 彈到 1，400／12／1（原值）
     #47 Animated Number  頂欄「已逛」數字用彈簧滾到新值（app.js；彈簧改用 #2，數字不會衝過頭）
     #13 Loading Spinner  儲存 Memo 時按鈕裡的轉圈：1 秒一圈、等速（原值）
     #43 Text Shimmer  下載離線地圖時的進度字：2 秒一輪、光帶寬＝字數 × 2 px（原值）
   系統設定「減少動態效果」時：全部關掉，只留顏色變化。 */
:root {
  --ease-scale: cubic-bezier(.3, 1.5, .5, 1);   --dur-scale: 720ms;   /* #6  400/20/1   ζ=0.50 */
  --ease-snappy: cubic-bezier(.3, 1.3, .5, 1);  --dur-snappy: 480ms;  /* #2  500/25/0.8 ζ=0.62 */
  --ease-tab: cubic-bezier(.25, 1.1, .4, 1);    --dur-tab: 340ms;     /* #41 899/48/1   ζ=0.80 */
  --ease-bouncy: cubic-bezier(.34, 1.9, .5, 1); --dur-bouncy: 1150ms; /* #3  400/12/1   ζ=0.30 */
  --press-fast: 90ms cubic-bezier(.2, 0, .4, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-scale: linear(0, 0.05, 0.174, 0.344, 0.524, 0.696, 0.853, 0.975, 1.065, 1.125, 1.155, 1.162, 1.152, 1.13, 1.103, 1.073, 1.045, 1.021, 1.002, 0.988, 0.979, 0.975, 0.974, 0.976, 0.979, 0.984, 0.989, 0.993, 0.997, 1, 1.002, 1.004, 1.004, 1.004, 1.004, 1.003, 1.002, 1.002, 1.001, 1, 1, 1, 0.999, 1);
    --ease-snappy: linear(0, 0.078, 0.251, 0.457, 0.658, 0.819, 0.939, 1.018, 1.062, 1.078, 1.077, 1.066, 1.049, 1.033, 1.019, 1.008, 1.001, 0.996, 0.994, 0.994, 0.994, 0.996, 0.997, 0.998, 0.999, 1, 1, 1, 1);
    --ease-tab: linear(0, 0.102, 0.304, 0.514, 0.696, 0.826, 0.914, 0.967, 0.997, 1.01, 1.014, 1.013, 1.01, 1.008, 1.005, 1.003, 1.001, 1.001, 1, 1, 1);
    --ease-bouncy: linear(0, 0.101, 0.354, 0.671, 0.973, 1.204, 1.337, 1.371, 1.325, 1.226, 1.107, 0.997, 0.916, 0.871, 0.863, 0.884, 0.922, 0.966, 1.006, 1.034, 1.049, 1.05, 1.042, 1.027, 1.011, 0.996, 0.986, 0.981, 0.981, 0.985, 0.991, 0.997, 1.002, 1.005, 1.007, 1.007, 1.005, 1.003, 1.001, 0.999, 0.998, 0.997, 0.998, 0.998, 0.999, 1, 1, 1.001, 1);
  }
}

button, a.btn, a.tool, .row, .legs li { -webkit-tap-highlight-color: transparent; }

/* ---------- #6 圓形工具鈕 ---------- */
.tool {
  box-shadow: 0 1px 2px rgba(30, 42, 71, .14), 0 4px 12px rgba(30, 42, 71, .14);
  transition: transform var(--dur-scale) var(--ease-scale), background-color .18s, border-color .18s, color .18s, box-shadow .18s;
}
.tool:active { transform: scale(.92); transition: transform var(--press-fast), background-color .18s, border-color .18s, color .18s, box-shadow .18s; box-shadow: 0 1px 2px rgba(30, 42, 71, .2); }
@media (hover: hover) and (pointer: fine) {
  .tool:hover { transform: scale(1.05); box-shadow: 0 2px 4px rgba(30, 42, 71, .14), 0 8px 18px rgba(30, 42, 71, .16); }
  .tool:hover:active { transform: scale(.92); }
}

/* ---------- #2 長方形按鈕 ---------- */
.btn, .row .add, .ref button, .banner button, .memo-bar .btn, .seg button, .tabs button, .compass button, .chk {
  transition: transform var(--dur-snappy) var(--ease-snappy), background-color .18s, border-color .18s, color .18s, box-shadow .18s, opacity .18s;
}
.btn:active:not(:disabled), .row .add:active, .ref button:active, .banner button:active, .seg button:active, .chk:active {
  transform: scale(.96); transition: transform var(--press-fast), background-color .18s, border-color .18s, color .18s, box-shadow .18s, opacity .18s;
}
.btn.primary, .btn.ok { box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 2px 6px rgba(30, 42, 71, .22); }
.btn.primary:active, .btn.ok:active { box-shadow: 0 1px 2px rgba(30, 42, 71, .22); }
@media (hover: hover) and (pointer: fine) {
  .btn:not(.primary):not(.ok):not(:disabled):hover { background: #f5f7fa; border-color: #b6c0cf; }
  .btn.primary:hover { background: #26345a; }
  .btn.ok:hover { background: #2a6248; }
}
/* 清單列按下去的回饋（不縮放，只壓暗） */
.row:active, .legs li:active, .memo-row:active { background-color: rgba(30, 42, 71, .05); }

/* ---------- #41 滑動底塊：分頁膠囊（2D） ---------- */
.tabs { position: relative; }
.tabs .ind { position: absolute; left: 0; top: 4px; bottom: 8px; width: var(--w, 0); transform: translateX(var(--x, 0)); background: var(--ink); border-radius: 999px; opacity: 0; pointer-events: none; z-index: 0; box-shadow: 0 2px 6px rgba(30, 42, 71, .25); }
.tabs.has-ind .ind { opacity: 1; }
.tabs.has-ind.ready .ind { transition: transform var(--dur-tab) var(--ease-tab), width var(--dur-tab) var(--ease-tab), opacity .2s; }
.tabs.has-ind button { position: relative; z-index: 1; }
.tabs.has-ind button.on { background: transparent; }
.tabs button:active { transform: scale(.95); }

/* ---------- #41 滑動底塊：立體版方位分段鈕（直式） ---------- */
.compass { position: relative; display: flex; flex-direction: column; width: 44px; padding: 3px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 1px 2px rgba(30, 42, 71, .14), 0 4px 12px rgba(30, 42, 71, .14); }
.compass .ind { position: absolute; left: 3px; right: 3px; top: 3px; height: 38px; border-radius: 19px; background: var(--ink); transform: translateY(calc(var(--i, 0) * 38px)); transition: transform var(--dur-tab) var(--ease-tab); }
.compass button { position: relative; z-index: 1; height: 38px; border: 0; background: none; padding: 0; border-radius: 19px; font: 700 14px var(--display); color: var(--ink); }
.compass button.on { color: #fff; }
.compass button:active { transform: scale(.9); }

/* ---------- #41 滑動底塊：Memo 狀態 ---------- */
.seg.slide { position: relative; gap: 0; padding: 3px; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--surface); }
.seg.slide .ind { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 999px; transform: translateX(calc(var(--i, 0) * 100%)); transition: transform var(--dur-tab) var(--ease-tab), background-color .2s; background: var(--memo-soft); box-shadow: inset 0 0 0 1.5px var(--memo); }
.seg.slide[data-v=bought] .ind { background: var(--ok-soft); box-shadow: inset 0 0 0 1.5px var(--ok); }
.seg.slide[data-v=dropped] .ind { background: #eef0f3; box-shadow: inset 0 0 0 1.5px var(--muted); }
.seg.slide button, .seg.slide button.on { position: relative; z-index: 1; border-color: transparent; background: transparent; }

/* ---------- #3 打勾彈一下 ---------- */
@keyframes chk-pop { from { transform: scale(.35); } to { transform: scale(1); } }
@keyframes chk-ring { from { box-shadow: 0 0 0 0 rgba(46, 107, 78, .45); } to { box-shadow: 0 0 0 12px rgba(46, 107, 78, 0); } }
.chk.on.pop svg { animation: chk-pop var(--dur-bouncy) var(--ease-bouncy) both; }
.chk.on.pop { animation: chk-ring .55s ease-out; }

/* ---------- #47 數字變動時跳一下（數字滾動在 app.js） ---------- */
@keyframes num-bump { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }
.bump { display: inline-block; animation: num-bump var(--dur-snappy) var(--ease-snappy); }

/* ---------- #13 轉圈 ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 1s linear infinite; flex: 0 0 auto; }

/* ---------- #43 下載中的字：一道光掃過 ---------- */
@keyframes shimmer { from { background-position: 100% center, 0 0; } to { background-position: 0% center, 0 0; } }
.shimmer {
  --spread: 32px; color: transparent;
  background-image: linear-gradient(90deg, transparent calc(50% - var(--spread)), var(--shimmer-hi, #ffffff) 50%, transparent calc(50% + var(--spread))), linear-gradient(var(--shimmer-base, #5c6678), var(--shimmer-base, #5c6678));
  background-size: 250% 100%, auto; background-repeat: no-repeat, padding-box;
  -webkit-background-clip: text; background-clip: text; animation: shimmer 2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tool, .btn, .row .add, .ref button, .banner button, .seg button, .tabs button, .compass button, .chk,
  .tabs .ind, .compass .ind, .seg.slide .ind { transition: background-color .15s, border-color .15s, color .15s !important; }
  .tool:active, .tool:hover, .btn:active, .row .add:active, .seg button:active, .tabs button:active, .compass button:active, .chk:active { transform: none !important; }
  .chk.on.pop svg, .chk.on.pop, .bump { animation: none; }
  .shimmer { animation: none; color: var(--shimmer-base, #5c6678); background: none; }
  .spin { animation-duration: 2.4s; }
}