/* =============================================================
   和肽生醫 HelixTide — 動效與微互動層（v0.10）
   載入順序：… → site.css → contrast.css → motion.css
   原則：
     ① 只動 transform 與 opacity（GPU，不觸發 layout）
     ② 曲線走物理減速（expo／quart／quint），全面停用 bounce／elastic
     ③ 每個動效都要有理由：回饋、狀態、引導、或節奏
     ④ prefers-reduced-motion 一律提供無動態替代
   GSAP 接手時（html.js-motion）本層僅負責靜態外觀，時序交由 motion.js。
   ============================================================= */

/* ---------- 1. 全站動效基準：統一過場曲線與時長 ---------- */
a,
.ht-btn,
.card,
.icon-chip,
.nav__link,
.drawer__link,
.lang-switch button,
.news-item,
.program__card,
.le-pcard,
.le-colorblock img {
  transition-timing-function: var(--ease-out-quart);
}

/* 按壓回饋：120ms 內完成，符合 80ms 感知同步門檻 */
.ht-btn { transition-duration: var(--dur-fast), var(--dur-fast), var(--dur-fast), var(--dur-fast); }
.ht-btn:active { transform: translateY(0) scale(0.97); transition-duration: var(--dur-instant); }

/* ---------- 2. 卡片：紙張浮起的物理感 ---------- */
/* 以「邊框染上品牌色 + 多層冷墨陰影」取代通用陰影，避免 AI 感的卡片模板 */
.card {
  transition: transform var(--dur) var(--ease-out-quart),
              box-shadow var(--dur) var(--ease-out-quart),
              border-color var(--dur) var(--ease-out-quart);
  will-change: auto;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              0 2px 4px rgba(20, 40, 61, 0.06),
              0 12px 28px rgba(20, 40, 61, 0.10),
              0 28px 64px rgba(20, 40, 61, 0.08);
  border-color: rgba(46, 94, 170, 0.22);
}
/* 可點擊卡片：整張可點時才給指標與更明顯的位移 */
a.card, .card[data-href] { cursor: pointer; }
a.card:hover { transform: translateY(-6px); }

/* 圖示晶片：hover 時微幅抬起並染上品牌色 */
.icon-chip { transition: transform var(--dur) var(--ease-out-quint), background var(--dur) var(--ease-out-quart), color var(--dur) var(--ease-out-quart); }
.card:hover .icon-chip { transform: translateY(-2px) scale(1.06); }

/* ---------- 3. 導覽：底線由中心展開 ---------- */
.nav__link { position: relative; }
.nav__link::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 0.1em; height: 1.5px;
  background: currentColor; border-radius: 2px; opacity: 0.85;
  transition: left var(--dur) var(--ease-out-expo), right var(--dur) var(--ease-out-expo);
}
.nav__link:hover::after, .nav__link.is-active::after { left: 0; right: 0; }

/* ---------- 4. 文字連結：底線滑入 ---------- */
.prose a, .section__lead a, .news-item a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur) var(--ease-out-expo);
}
.prose a:hover, .section__lead a:hover, .news-item a:hover { background-size: 100% 1px; }

/* ---------- 5. 表單：聚焦與驗證回饋 ---------- */
.field input, .field textarea, .field select {
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast) var(--ease-out-quart);
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ht-border-strong); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  border-color: var(--ht-primary);
  box-shadow: 0 0 0 3px rgba(46, 94, 170, 0.16);
}
/* 驗證：錯誤抖動一次即停，不無限循環 */
@keyframes ht-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.field.is-invalid input, .field.is-invalid textarea {
  border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
  animation: ht-shake 320ms var(--ease-in-out);
}
.field__error {
  font-size: var(--fs-xs); color: #A93226; margin-top: 2px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart);
}
.field.is-invalid .field__error { opacity: 1; transform: none; }
/* 通過驗證：細微的綠色確認 */
.field.is-valid input, .field.is-valid textarea { border-color: rgba(27, 122, 82, 0.55); }

/* ---------- 6. 捲動進度條（僅桌機，避免佔用手機視野） ---------- */
.ht-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--ht-primary) 0%, var(--ht-secondary) 100%);
  z-index: 120; pointer-events: none; opacity: 0;
  transition: opacity var(--dur) var(--ease-out-quart);
}
html.js-motion .ht-progress { opacity: 1; }

/* ---------- 7. 首頁 hero 雙螺旋簽名：筆畫繪製 ---------- */
/* 初始狀態設在 CSS，避免 GSAP 載入前的閃現；GSAP 接手後改由其驅動。 */
.hero__sig .sig-stroke { stroke-dasharray: 240; stroke-dashoffset: 240; }
html.js-motion .hero__sig .sig-stroke { stroke-dashoffset: 240; }
/* GSAP 不可用時（無 js-motion）直接顯示完整筆畫 */
html:not(.js-motion) .hero__sig .sig-stroke { stroke-dashoffset: 0; }

/* ---------- 8. GSAP 接手時的交接規則 ---------- */
/* 由 JS 驅動的進場：停用 CSS transition，避免與 GSAP 互相搶屬性。 */
html.js-motion .reveal { transition: none; }
html.js-motion .stagger > * { animation: none; }
/* 由 JS 驅動的元素，初始交由 GSAP 設定；此處僅確保未初始化前不閃現 */
html.js-motion .reveal:not(.is-visible) { opacity: 0; }

/* ---------- 9. 細節打磨 ---------- */
::selection { background: rgba(46, 94, 170, 0.18); color: var(--ht-text); }
html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid var(--ht-primary); outline-offset: 3px; border-radius: 4px; }
/* 自訂捲軸（僅 WebKit），低調不搶戲 */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(20, 40, 61, 0.18); border-radius: 99px;
    border: 3px solid transparent; background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(46, 94, 170, 0.42); background-clip: content-box; }
}

/* ---------- 10. 減少動效：提供無位移的替代 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card:hover, a.card:hover { transform: none; }
  .card:hover .icon-chip { transform: none; }
  .nav__link::after { transition: none; }
  .hero__sig .sig-stroke { stroke-dashoffset: 0; }
  .ht-progress { display: none; }
  .field.is-invalid input, .field.is-invalid textarea { animation: none; }
}