/* ==========================================================================
   global.css — 全域基礎樣式
   ========================================================================== */

/* ===== 自訂字體：王漢宗中明加重（Hero 大標題用） =====
   已子集化為 woff2：只保留主題標題會用到的字，原始 9MB → ~214KB，外觀不變。
   原始完整檔 HanWangMingHeavy.ttf 已移除（不再引用）。
   若日後新增標題用到「子集未含」的新中文字，會顯示為系統後備字；
   屆時需用原始字型重新產生子集（可請我重跑 subset）。 */
@font-face {
  font-family: "HanWangMingHeavy";
  src: url("../fonts/HanWangMingHeavy.subset.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-color);
  background-color: var(--bg-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  line-height: var(--line-height-tight);
  color: var(--text-color);
}

/* 預設字級階層（依設計稿：主標題28 / 副標題24 / 小標題20 / 內文16…）。
   元件若用 class 自訂字級會覆蓋此預設；此處僅為內容區與未指定字級的標題提供基準。
   行動版於 responsive.css 等比下調。 */
h1 {
  font-size: var(--font-size-3xl);
} /* 28px */
h2 {
  font-size: var(--font-size-2xl);
} /* 24px */
h3 {
  font-size: var(--font-size-xl);
} /* 20px */
h4 {
  font-size: var(--font-size-lg);
} /* 18px */
h5 {
  font-size: var(--font-size-base);
} /* 16px */
h6 {
  font-size: var(--font-size-sm);
} /* 14px */

p {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--color-primary);
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-accent);
}

/* 容器 */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* 區塊間距：只給顯式標記為 .page-section 的內容區，
   不再用 section[class^="page-"] 屬性匹配（會誤觸 page-hero / page-cases 等內頁包裝 section，
   且 (0,1,1) 的 specificity 會覆蓋頁面 CSS 的 .page-hero (0,1,0)）。
   section-* 共用組件（如 section-case-studies）保留屬性匹配。 */
.page-section,
section[class^="section-"] {
  padding: var(--spacing-3xl) 0;
}

/* 無障礙：僅供螢幕報讀器 */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   滾動進場動畫（淡入 + 微上滑）
   由 scroll-reveal.js 進入視窗時加 .is-revealed 觸發過場。
   防閃現（FOUC）關鍵：下方「預先隱藏清單」用 .has-js + 區塊選擇器，在 JS 跑之前
   （第一個畫面）就先把要進場的區塊藏好，避免「先看到、再隱藏」。
   ⚠️ 此清單必須與 scroll-reveal.js 的 SECTION_SELECTORS 保持一致。
   非 JS 環境（無 .has-js）一律正常顯示。
   ========================================================================== */
.has-js .home-about,
.has-js .home-vehicles,
.has-js .home-locations,
.has-js .home-cases,
.has-js .home-valuation,
.has-js .home-news,
.has-js .about-brand,
.has-js .about-philosophy,
.has-js .section-case-studies,
.has-js .section-reviews,
.has-js .section-faq,
.has-js .section-extended-reading,
.has-js .bottom-cta,
.has-js .contact-cta,
.has-js .page-news .news-grid,
.has-js .page-locations .container > *,
.has-js .page-vehicles .container > *,
.has-js .valuation-flow__step {
  opacity: 0;
  transform: translateY(24px);
}

/* 估車流程步驟：改為從上方滑入（下滑進位） */
.has-js .valuation-flow__step {
  transform: translateY(-28px);
}

/* JS 加上 .reveal 後接管過場樣式（仍為隱藏起點），進入視窗加 .is-revealed 後顯示 */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal--step {
  transform: translateY(-28px);
}

/* 顯示狀態：用 !important 確保一定蓋過上方高特異度的「預先隱藏清單」
   （例如 .has-js .page-locations .container > * 特異度 0,3,1，否則 is-revealed 蓋不過、會卡在隱藏）。
   同時清除 will-change，避免合成層長存佔記憶體。 */
.reveal.is-revealed {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  /* 減少動態：一律顯示、不動畫（涵蓋預先隱藏清單與 .reveal） */
  .reveal,
  .reveal--step,
  .has-js .home-about,
  .has-js .home-vehicles,
  .has-js .home-locations,
  .has-js .home-cases,
  .has-js .home-valuation,
  .has-js .home-news,
  .has-js .about-brand,
  .has-js .about-philosophy,
  .has-js .section-case-studies,
  .has-js .section-reviews,
  .has-js .section-faq,
  .has-js .section-extended-reading,
  .has-js .bottom-cta,
  .has-js .contact-cta,
  .has-js .page-news .news-grid,
  .has-js .page-locations .container > *,
  .has-js .page-vehicles .container > *,
  .has-js .valuation-flow__step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}