/* Chuan Works 動畫（2026-10-08 拍板：A 淡入上浮＋C 流程亮起＋E 卡片懸停）
   原則：只動 opacity／transform；每個只播一次；不支援就直接顯示；減少動態時全關。 */

/* 首屏標題：載入時淡入一次（完整句子，不逐字） */
.hero { animation: cw-up .6s cubic-bezier(.2,.7,.2,1) both; }

@supports (animation-timeline: view()) {
  /* A 淡入上浮：捲到才播 */
  .card, .case, .how-row, .shots figure, .status-list > div, .digest-stats > div,
  .inc, .stats > div {
    animation: cw-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  /* C 流程依序亮起：How it works、Daily Digest 流程列 */
  .steps > span, .pipeline > span {
    animation: cw-on linear both;
    animation-timeline: view();
  }
  .steps > span:nth-of-type(1), .pipeline > span:nth-of-type(1) { animation-range: entry 10% entry 45%; }
  .steps > span:nth-of-type(2), .pipeline > span:nth-of-type(2) { animation-range: entry 20% entry 55%; }
  .steps > span:nth-of-type(3), .pipeline > span:nth-of-type(3) { animation-range: entry 30% entry 65%; }
  .steps > span:nth-of-type(4), .pipeline > span:nth-of-type(4) { animation-range: entry 40% entry 75%; }
  .steps > span:nth-of-type(5), .pipeline > span:nth-of-type(5) { animation-range: entry 50% entry 85%; }
}

/* 用獨立的 translate 屬性：fill-mode both 不會蓋掉 E 懸停用的 transform */
@keyframes cw-up { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: none; } }
@keyframes cw-on { from { opacity: .35; } to { opacity: 1; } }

/* E 卡片懸停（只在有滑鼠的裝置） */
.card, .case, .how-row, .shots figure, .inc { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.case figure, .inc figure { overflow: hidden; border-radius: 10px; }
.card img, .case img, .shots img, .inc img { transition: transform .5s ease; }
@media (hover: hover) {
  .card:hover, .case:hover, .how-row:hover, .shots figure:hover, .inc:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    border-color: #0f766e;
  }
  .case:hover img, .inc:hover img, .shots figure:hover img { transform: scale(1.02); }
}
.card:focus-within, .case:focus-within, .inc:focus-within { border-color: #0f766e; }

/* 減少動態：全部關閉 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}