/* =============================================================
   和肽生醫 HelixTide — 基礎樣式（階段 4.5：Apple 設計語言）
   依賴 tokens.css。包含 reset、基礎元素、通用工具類、
   語言字型切換、適度動效原語（.reveal）、按鈕元件。
   ============================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-cn);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ht-text);
  background: var(--ht-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}
img, svg, picture { display: block; max-width: 100%; }
a { color: var(--ht-secondary); text-decoration: none; transition: color var(--dur) var(--ease-out); }
a:hover { color: var(--ht-highlight); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--ht-text); letter-spacing: -0.02em; }

/* ---------- 語言字型切換（§5.1） ---------- */
html[lang="ja"] body { font-family: var(--font-ja); }
html[lang="en"] body { font-family: var(--font-en); }
/* 繁中/簡中預設用 --font-cn（-apple-system / PingFang TC / Noto Sans TC） */

/* ---------- 版面容器 ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--sp-10); }
.section--alt { background: var(--ht-bg-alt); }
.section__title {
  font-size: clamp(2rem, 4.2vw, var(--fs-4xl));
  font-weight: var(--fw-semibold);
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-3);
}
.section__lead { font-size: var(--fs-md); color: var(--ht-muted); max-width: 62ch; line-height: var(--lh-snug); }

/* 小標（eyebrow）：Apple 風 小字引導 */
.eyebrow {
  display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ht-secondary);
  padding: 0.4em 0.9em; border: 1px solid var(--ht-border-strong);
  border-radius: var(--radius-pill); margin-bottom: var(--sp-3);
}
.eyebrow--accent { color: var(--ht-primary-700); border-color: var(--ht-accent); }

/* 強調標題字（v0.9：已改無襯線，token 保留相容） */
.serif { font-family: var(--font-serif); letter-spacing: -0.01em; }

/* 展示體（Bricolage Grotesque + Noto Sans TC 900）：大標、數字、eyebrow 強音 */
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.display-cn { font-family: var(--font-display-cn); font-weight: 900; letter-spacing: -0.01em; line-height: 1.12; }

/* ---------- 按鈕（Apple 膠囊 + 細緻陰影） ---------- */
.ht-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 0.75em 1.6em; border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold); font-size: var(--fs-base);
  /* line-height:1 讓內容盒等於字身框，配合 align-items 才是真正的垂直置中；
     繼承 body 的 1.7 會讓 CJK 字身偏離中心。 */
  line-height: 1; text-align: center;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.ht-btn--primary { background: var(--ht-primary); color: var(--ht-on-primary); box-shadow: var(--shadow-sm); }
.ht-btn--primary:hover { background: var(--ht-primary-600); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ht-btn--primary:active { transform: translateY(0) scale(0.98); }
.ht-btn--ghost { border: 1px solid var(--ht-border-strong); color: var(--ht-text); background: rgba(255,255,255,0.6); }
.ht-btn--ghost:hover { border-color: var(--ht-secondary); box-shadow: var(--shadow-glow); color: var(--ht-secondary); }
.ht-btn--on-dark { background: var(--ht-on-primary); color: var(--ht-primary-700); }
.ht-btn--on-dark:hover { box-shadow: 0 0 0 4px rgba(251,247,242,0.35); }

/* 深底區塊（Footer）文字反白 */
.on-dark { background: var(--ht-primary-700); color: var(--ht-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark .section__title { color: var(--ht-on-dark); }
.on-dark .section__lead, .on-dark .eyebrow { color: var(--ht-surface); }
.on-dark .eyebrow { border-color: rgba(251,247,242,0.4); }
.on-dark a { color: var(--ht-surface); }
.on-dark a:hover { color: #fff; }

/* ---------- 卡片（Apple：近無邊框 + 柔影 + 大圓角） ---------- */
.card {
  background: #fff; border: 1px solid var(--ht-border);
  border-radius: var(--radius-md); padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* ---------- 適度動效原語（IntersectionObserver reveal） ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
/* 逐行上浮 stagger（Hero 用） */
.stagger > * { opacity: 0; transform: translateY(28px); }
.stagger.is-visible > * { animation: ht-rise 820ms var(--ease-out) forwards; }
.stagger.is-visible > *:nth-child(1) { animation-delay: 90ms; }
.stagger.is-visible > *:nth-child(2) { animation-delay: 190ms; }
.stagger.is-visible > *:nth-child(3) { animation-delay: 290ms; }
.stagger.is-visible > *:nth-child(4) { animation-delay: 390ms; }
.stagger.is-visible > *:nth-child(5) { animation-delay: 470ms; }
@keyframes ht-rise { to { opacity: 1; transform: none; } }

/* ---------- 無障礙：關閉動效 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- 響應式 ---------- */
@media (max-width: 768px) {
  .section { padding-block: var(--sp-9); }
  .section__title { font-size: var(--fs-2xl); }
  :root { --fs-4xl: 2.5rem; --fs-5xl: 3rem; }
}