/* chai.css — 財犬 AI 行銷站共用樣式
 *
 * 設計來源：claude.ai/design「財犬 AI 設計交付物」（Design Tokens 稿 + A/B 稿，2026-08 改版）。
 * 設計稿的規則是「全部樣式以 inline CSS 實作，無 class、無 Tailwind」，所以版面、間距、色彩一律
 * 寫在各頁的 style="" 裡；本檔只收 inline style 表達不了的四類東西：
 *   1. @keyframes
 *   2. hover / focus 等偽類（設計稿以 style-hover="" 標註，落地時只能靠 class）
 *   3. 響應式斷點（設計稿用 JS 量 innerWidth 切 display，靜態站改用 media query，免 JS 也能正確排版）
 *   4. prefers-reduced-motion 降級
 * 無 Tailwind、無 build step、無 npm 套件（硬規則 1）。
 *
 * Design token 速查（詳見設計稿 Design Tokens）：
 *   主色 #4F46E5 / hover #4338CA / 淺底 #EEF2FF / 邊框 #C7D2FE
 *   成功 #0D9488（底 #F0FDFA）· 警告 #B45309（底 #FFFBEB）· 危險 #E11D48（底 #FFF1F2）
 *   文字 #111827（標題）/ #374151（正文）/ #6B7280（輔助）· 邊框 #E5E7EB · 分隔 #F3F4F6
 *   字重只用 400 / 700 / 900；按鈕與可點區塊最小 44px。
 */

/* ── 1. 基礎 ─────────────────────────────────────────────── */

body {
  margin: 0;
  background: #ffffff;
  font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  color: #111827;
}
a { color: #4F46E5; text-decoration: none; }
a:hover { color: #4338CA; }

/* ── 2. Keyframes ───────────────────────────────────────── */

@keyframes chaiFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chaiFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes chaiBlobA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -40px) scale(1.12); } }
@keyframes chaiBlobB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.08); } }
@keyframes chaiGridDrift { from { background-position: 0 0; } to { background-position: 48px 48px; } }
@keyframes chaiBarRise { from { transform: scaleY(0.82); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
@keyframes chaiSweep { 0% { transform: translateX(-120%) skewX(-12deg); } 55%, 100% { transform: translateX(280%) skewX(-12deg); } }
@keyframes chaiCtaPulse { 0%, 100% { box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28); } 50% { box-shadow: 0 10px 30px rgba(79, 70, 229, 0.5); } }
@keyframes chaiCardCycle {
  0%   { opacity: 0; transform: translateY(28px) scale(0.96); }
  6%   { opacity: 1; transform: translateY(0) scale(1); }
  20%  { opacity: 1; transform: translateY(0) scale(1); }
  26%  { opacity: 0; transform: translateY(-28px) scale(0.96); }
  100% { opacity: 0; transform: translateY(28px) scale(0.96); }
}
@keyframes chaiDot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-6px); } }
@keyframes chaiPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.35; } }

/* ── 3. Hover / focus（設計稿 style-hover 的落地） ─────────── */

/* 主要 CTA：彈性回饋 + 陰影加深；hover 時停掉呼吸動畫，避免兩組 box-shadow 打架 */
.chai-cta { transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.chai-cta:hover {
  background: #4338CA !important;
  color: #fff;
  transform: scale(1.045);
  box-shadow: 0 12px 28px rgba(79, 70, 229, 0.38);
  animation: none;
}

/* 次要按鈕：邊框轉主色淺階、文字轉主色 */
.chai-btn2 { transition: all 0.28s ease; }
.chai-btn2:hover { background: #F9FAFB; border-color: #C7D2FE !important; color: #4F46E5; }

/* 文字連結轉主色 */
.chai-link { transition: color 0.3s ease; }
.chai-link:hover { color: #4F46E5; }

/* 尾隨箭頭：hover 時往右滑並放大（設計稿的「持續提示」角色） */
.chai-arrow { display: inline-flex; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.chai-cta:hover .chai-arrow,
.chai-link:hover .chai-arrow { transform: translateX(7px) scale(1.12); }

/* 首頁 Hero 面板：五頁疊在同一個容器裡，預設只露出第一頁。
   沒有這條的話，JS 還沒跑之前五頁會全部疊著顯示。JS 之後改寫 inline opacity 接手。 */
.chai-pane { opacity: 0; }
.chai-pane:first-of-type { opacity: 1; }

/* 卡片抬升。強調色用 --hc 帶入，各卡片自己在 inline style 設 */
.chai-card { transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.35s ease, border-color 0.3s ease; }
.chai-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(30, 20, 80, 0.10);
  border-color: var(--hc, #4F46E5) !important;
}

/* 深色底的數據卡：只換邊框與光暈，不位移（避免深色區塊跳動） */
.chai-stat { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1), border-color 0.3s ease, box-shadow 0.3s ease; }
.chai-stat:hover { border-color: var(--hc, #818CF8) !important; box-shadow: 0 18px 40px var(--hs, rgba(129, 140, 248, 0.28)); }

/* 目錄／清單列：hover 往右推一點 */
.chai-toc { transition: transform 0.25s ease; }
.chai-toc:hover { transform: translateX(4px); }

/* Mega menu 內的功能列 */
.chai-menu-item { transition: background 0.25s ease; }
.chai-menu-item:hover { background: #F9FAFB; }

/* ── 3b. 狀態驅動的演示樣式 ─────────────────────────────── */

/* 功能頁（features.html）每個區塊有一個開關，打開後右側示意圖跟著動。
   設計稿是 React state 換 inline style；這裡改成「JS 只加一個 .on，樣式全部走 CSS」——
   轉場宣告寫在元素自己的 inline style 裡（設計稿原樣），這裡只負責兩個狀態的目標值。
   個別高度／寬度差異用 --h 由 inline style 帶入。 */

/* 切換開關 */
.chai-sw { background: #D1D5DB; transition: background 0.3s ease; }
.chai-feat.on .chai-sw { background: #4F46E5; }
.chai-sw-thumb { left: 4px; transition: left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.chai-feat.on .chai-sw-thumb { left: 26px; }

/* 進度條 0 → 滿 */
.f-bar { width: 0; }
.chai-feat.on .f-bar { width: 100%; }

/* 成對淡入淡出（關閉時顯示 .f-off，打開時顯示 .f-on） */
.f-off { opacity: 1; }
.f-on { opacity: 0; }
.chai-feat.on .f-off { opacity: 0; }
.chai-feat.on .f-on { opacity: 1; }

/* 展開收合，高度由 --h 帶入 */
.f-exp { max-height: 0; opacity: 0; }
.chai-feat.on .f-exp { max-height: var(--h, 160px); opacity: 1; }
/* 反向：預設展開，打開開關後收起（例：核准前的操作按鈕，核准後就不該再出現） */
.f-exp-out { max-height: var(--h, 60px); opacity: 1; }
.chai-feat.on .f-exp-out { max-height: 0; opacity: 0; }

/* 橫向展開（醫療合規的刪節線／安全句對調） */
.f-wipe-out { max-width: var(--w, 260px); opacity: 1; }
.f-wipe-in { max-width: 0; opacity: 0; }
.chai-feat.on .f-wipe-out { max-width: 0; opacity: 0; }
.chai-feat.on .f-wipe-in { max-width: var(--w, 260px); opacity: 1; }

/* 位移歸位（散落的分店卡收攏成一份清單） */
.f-settle { transform: var(--tf, none); }
.chai-feat.on .f-settle { transform: translate(0, 0) rotate(0deg); }
.f-lift { box-shadow: 0 10px 22px rgba(30, 20, 80, 0.12); }
.chai-feat.on .f-lift { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }

/* 由下浮現 */
.f-rise { opacity: 0; transform: translateY(10px); }
.chai-feat.on .f-rise { opacity: 1; transform: translateY(0); }

/* 長條圖：關閉時全部壓平，打開時長到 --h */
.f-col { height: 4px; }
.chai-feat.on .f-col { height: var(--h, 60px); }

/* 醫療合規的盾牌圖示與標籤 */
.f-shield { background: #F0F9FF; color: #0284C7; transform: scale(1) rotate(-6deg); }
.chai-feat.on .f-shield { background: #0284C7; color: #ffffff; transform: scale(1.06) rotate(0deg); }
.f-chip { background: #F3F4F6; color: #9CA3AF; }
.chai-feat.on .f-chip { background: #F0F9FF; color: #0284C7; }

/* 待審卡：外框與徽章由「待審」的琥珀轉成「已核准」的teal */
.f-queue { border-color: #F59E0B; }
.chai-feat.on .f-queue { border-color: #0D9488; }
.f-badge-off { background: #FFFBEB; color: #B45309; }
.f-badge-on { background: #F0FDFA; color: #0D9488; }

/* 鈴鐺：打開通知才搖 */
.chai-feat.on .f-bell { animation: chaiSwing 1.4s ease-in-out infinite; }
@keyframes chaiSwing { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }

/* 功能區塊本身 hover 才浮出邊框，避免整頁都是框線 */
.chai-feat { border: 1px solid transparent; transition: all 0.3s ease; }
.chai-feat:hover { border-color: #E5E7EB; background: #FAFAFB; box-shadow: 0 10px 30px rgba(30, 20, 80, 0.06); }
/* 放在灰底區塊裡的功能卡，hover 要往白色走才有浮起來的對比 */
.chai-feat.gray:hover { background: #fff; }

/* 捲動進場（快速上手的四步驟卡）。stagger 用各自 inline 的 transition-delay。 */
/* --d 只延遲「進場」，hover 的陰影與邊框不跟著延遲，否則最後一張卡 hover 會慢半拍 */
.chai-reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s var(--d, 0s) ease, transform 0.7s var(--d, 0s) cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease; }
.chai-reveal.in { opacity: 1; transform: translateY(0); }
.chai-step { box-shadow: 0 2px 6px rgba(30, 20, 80, 0.04); }
.chai-step:hover { box-shadow: 0 18px 38px rgba(30, 20, 80, 0.12); border-color: #C7D2FE; }

/* 運作方式頁：頂部流程圖會自己走 STEP 1→2→3（chai-how.js 換 .active / .lit），
   .lit 表示「已走過」，讓進度條與顏色留在後面，看得出流程方向。強調色由 --c 帶入。 */
.hw-flow { background: #fff; transform: translateY(0); transition: background 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1); }
.hw-flow.active { background: #EEF2FF; transform: translateY(-4px); }
.hw-bar { width: 0; background: var(--c, #4F46E5); transition: width 0.6s ease; }
.hw-flow.lit .hw-bar { width: 100%; }
.hw-dot { background: #9CA3AF; transition: background 0.4s ease; }
.hw-flow.lit .hw-dot { background: var(--c, #4F46E5); }
.hw-label { color: #9CA3AF; transition: color 0.4s ease; }
.hw-flow.lit .hw-label { color: var(--c, #4F46E5); }
.hw-flow.active .hw-dot { animation: chaiPulse 1.4s ease-in-out infinite; }

/* 運作方式頁：三大段落捲到畫面內才依序演出（#chai-steps 加 .in）。
   每個元素的 transition-delay 寫在自己的 inline style，維持設計稿的節奏。 */
.hw-step { opacity: 0; transform: translateY(34px); }
.in .hw-step { opacity: 1; transform: translateY(0); }
.hw-num { transform: scale(0.4) rotate(-25deg); }
.in .hw-num { transform: scale(1) rotate(0deg); }
.hw-review { opacity: 0; transform: translateX(-24px); }
.in .hw-review { opacity: 1; transform: translateX(0); }
.hw-draft { max-height: 0; opacity: 0; }
.in .hw-draft { max-height: 140px; opacity: 1; }
.hw-btns { max-height: 0; opacity: 0; }
.in .hw-btns { max-height: 44px; opacity: 1; }
.hw-route-off { opacity: 1; }
.hw-route-on { opacity: 0; }
.in .hw-route-off { opacity: 0; }
.in .hw-route-on { opacity: 1; }
.hw-ok { opacity: 0; transform: translateY(12px); }
.in .hw-ok { opacity: 1; transform: translateY(0); }
.hw-prog { width: 0; }
.in .hw-prog { width: 100%; }
.hw-fade { opacity: 0; }
.in .hw-fade { opacity: 1; }

/* 定價頁常見問題用原生 <details>：不靠 JS 就能展開，對 SEO 與無障礙都比較穩。
   （快速上手頁的問答需要「同組只開一項」與高度動畫，才另外用下面的 .chai-acc。） */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chai-chevron { transform: rotate(180deg); }
.chai-chevron { transition: transform 0.2s ease; }

/* 手風琴（快速上手頁的常見問題） */
.chai-acc { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.chai-acc.open { border-color: #C7D2FE; box-shadow: 0 12px 28px rgba(30, 20, 80, 0.08); }
.chai-acc-body { overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.3s ease; }
.chai-acc.open .chai-acc-body { max-height: var(--h, 260px); opacity: 1; margin-top: 12px; }
.chai-acc-icon { transition: transform 0.4s cubic-bezier(0.34, 1.5, 0.64, 1); }
.chai-acc.open .chai-acc-icon { transform: rotate(135deg); }

/* ── 4. Header ──────────────────────────────────────────── */

/* 捲動時的陰影與「往下捲收起」由 chai-site.js 加上這兩個 class */
.chai-header { transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; }
.chai-header.chai-scrolled { box-shadow: 0 6px 20px rgba(17, 24, 39, 0.08); }
.chai-header.chai-hidden { transform: translateY(-100%); }

/* logo：hover 微轉 + 文字位移 */
.chai-logo img { transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease; }
.chai-logo span { transition: color 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.chai-logo:hover img { transform: rotate(-12deg) scale(1.1); box-shadow: 0 6px 18px rgba(79, 70, 229, 0.28); }
.chai-logo:hover span { color: #4F46E5; transform: translateX(3px); }

/* 導覽 hover 膠囊（位置由 chai-site.js 量測後寫 inline style） */
.chai-pill {
  position: absolute; top: 50%; left: 0; height: 38px; margin-top: -19px;
  border-radius: 9999px; background: #EEF2FF; pointer-events: none; width: 0; opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), width 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.25s ease;
}

/* Mega menu：純 CSS hover 展開。border-top 透明條當滑鼠橋樑，游標移到面板途中不會關閉 */
.chai-mega { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-top: 12px solid transparent; background-clip: padding-box; z-index: 60; }
.chai-mega-wrap:hover .chai-mega, .chai-mega-wrap:focus-within .chai-mega { display: block; }

/* 手機抽屜 */
.chai-drawer { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; }
.chai-drawer.open { max-height: 460px; opacity: 1; }
.chai-burger span { transition: transform 0.35s cubic-bezier(0.34, 1.5, 0.64, 1), opacity 0.25s ease; }
.chai-burger.open { background: #EEF2FF; }
.chai-burger.open .chai-bar1 { transform: translateY(7px) rotate(45deg); }
.chai-burger.open .chai-bar2 { opacity: 0; }
.chai-burger.open .chai-bar3 { transform: translateY(-7px) rotate(-45deg); }

/* ── 5. 響應式斷點 ──────────────────────────────────────── */

/* 導覽切換點 900px（設計稿 Design Tokens 第 6 節）。
   設計稿是用 JS 量 innerWidth 換 display，這裡改 media query：免 JS 也能正確排版，
   且不會有「載入瞬間先畫桌機版再跳成手機版」的閃動。 */
.chai-desk { display: flex; }
.chai-burger { display: none; }
.chai-drawer { display: block; }
@media (max-width: 899px) {
  .chai-desk { display: none; }
  .chai-burger { display: flex; }
}
@media (min-width: 900px) {
  .chai-drawer { display: none; }
}

/* ── 5b. 法務頁語言切換 ─────────────────────────────────── */

/* 兩種語言的內容各自完整寫在 [data-lang] 區塊裡，純顯示/隱藏切換，無範本引擎（硬規則 1）。
   用 class 而非 hidden 屬性：這些區塊本身有 inline 的 display:flex，hidden 屬性會被蓋掉。 */
.chai-hide { display: none !important; }

/* ── 6. Footer ──────────────────────────────────────────── */

.chai-footer a { color: #C7D2FE; }
.chai-footer a:hover { color: #fff; }

/* ── 7. 動效降級 ────────────────────────────────────────── */

/* 依 WCAG 2.3.3：使用者關閉動效時，所有裝飾性動畫停用（含捲動進場、計數器進場、
   輪播卡片）。JS 端另有對應處理：計數器直接寫上終值、輪播不啟動。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .chai-cta:hover, .chai-card:hover { transform: none; }
}