/* ============================================================
   PCM 詳情頁 — 質感 polish 層（可整層移除還原）
   移除方式：拿掉 index.html 裡這支 <link> 與對應的 <script> 即可。

   1) 進場動態（scroll reveal，僅 .has-reveal 下生效 → JS 失敗或關動態時內容照常顯示）
   2) 章節編號（CSS counter，破除每段同公式的重複感）
   3) 數字工藝（等寬數字＋字距，純 CSS，永遠生效）
   4) hero 圖進場＋parallax
   ============================================================ */

/* ---------- 0) 防過捲：關掉手機橡皮筋回彈，讓底部固定列釘死底部（不隨過捲飄動）---------- */
html, body { overscroll-behavior-y: none; }
/* 修底部多餘空白：固定操作列的預留空間從 body 移到 footer，
   讓預留區＝footer 底色（夜間不再出現比 footer 淺的空白帶）。 */
@media (max-width: 768px) {
  body { padding-bottom: 0; }
  footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* ---------- 3) 數字工藝：等寬數字＋字距（純 CSS，連關動態也吃得到）---------- */
.stat-num, .hero-price, .cta-price-big, .spec-val, .stat-unit,
.foot-company, .contact-item-text span {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.hero-price   { letter-spacing: -0.035em; }
.cta-price-big{ letter-spacing: -0.045em; }
.stat-num     { letter-spacing: -0.035em; }

/* ---------- 2) 章節編號：把 4 個一樣的紅小標變成 01 / 02 / 03 / 04 的章節序列 ---------- */
body { counter-reset: pcm-sec; }
.section-eyebrow::before {
  counter-increment: pcm-sec;
  content: counter(pcm-sec, decimal-leading-zero) "  /  ";
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--honda-red);
  letter-spacing: 0.02em;
}

/* ============================================================
   以下動態全部包在 .has-reveal 之下：
   JS 偵測到「非減少動態」才會把 .has-reveal 加到 <html>。
   → 關閉系統動態 / JS 沒跑 = 不隱藏任何東西，內容完整顯示。
   ============================================================ */

/* ---------- 1) 進場動態 ---------- */
.has-reveal .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .72s cubic-bezier(.22,.61,.36,1),
    transform .72s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.has-reveal .reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- 4) hero：進場 ---------- */
.has-reveal .hero-eyebrow,
.has-reveal .hero-title,
.has-reveal .hero-subtitle,
.has-reveal .hero-tagline,
.has-reveal .hero-price-row,
.has-reveal .hero-scroll-cue {
  opacity: 0;
  transform: translateY(22px);
  animation: pcmHeroIn .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.has-reveal .hero-title      { animation-delay: .07s; }
.has-reveal .hero-subtitle   { animation-delay: .15s; }
.has-reveal .hero-tagline    { animation-delay: .23s; }
.has-reveal .hero-price-row  { animation-delay: .31s; }
.has-reveal .hero-scroll-cue { animation-delay: .42s; }
@keyframes pcmHeroIn { to { opacity: 1; transform: none; } }

/* ---------- 4) hero 圖：進場＋parallax（陰影/圓角移到外框，img 預放大避免位移露白）---------- */
.has-reveal .hero-img-wrap {
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 32px 80px rgba(0,0,0,0.14);
}
.has-reveal .hero-img-wrap img {
  border-radius: 0;
  box-shadow: none;
  transform: scale(1.12);
  opacity: 0;
  animation: pcmHeroImg 1.1s cubic-bezier(.22,.61,.36,1) .18s forwards;
}
@keyframes pcmHeroImg { to { opacity: 1; } }

/* ══════════════════════════════════════════════════════════════
   5) PCM 夜幕（pcm-night）：捲動到結尾 CTA → 整頁切「Apple 深空灰」主題
   做法 = 覆寫 surface 變數（--white/--gray-bg/--black/--gray-mid…），讓所有
   用 var() 的區塊與文字一起變色，沒有白／黑接縫。--honda-red 永不覆寫 →
   紅標／紅字／紅按鈕維持紅。詳情頁的 --black 同時當文字色與 trust/footer
   底色，故翻成亮色後再把 trust/footer 重新壓成最深色（錨定段）。
   滑回上方自動還原。reduced-motion / 無 JS = 不切換，維持正常亮色主題。
   ══════════════════════════════════════════════════════════════ */
html.pcm-night {
  --white:    #1D1D1F;                 /* 白色面（stats/gallery/mods/規格表…）→ Apple 深空灰 */
  --gray-bg:  #161617;                 /* 淺灰底（hero/specs/cta）→ 更深一階 */
  --black:    #F5F5F7;                 /* 「黑」≈ 文字色 → 翻亮 */
  --gray-mid: rgba(235,238,242,.62);
  --gray-lt:  rgba(235,238,242,.42);
  --gray-line:rgba(255,255,255,.13);
  background: #1D1D1F;
}
/* --black 翻亮後 trust/footer 底色會跟著變亮 → 重新壓成最深色（錨定段）*/
html.pcm-night section.trust,
html.pcm-night footer { background: #000; }
/* nav 硬寫白底 → 深空灰毛玻璃 */
html.pcm-night nav { background: rgba(22,22,23,.72); border-bottom-color: rgba(255,255,255,.12); }
/* 聯絡白卡（var(--white)=#1d1d1f）抬升一階做層次 */
html.pcm-night .contact-card { background: #2C2C2E; border-color: rgba(255,255,255,.12); }
/* 手機底部操作列（滑到 CTA 會自動收起，這是安全網）*/
html.pcm-night .mobile-actionbar { background: rgba(22,22,23,.9); border-top-color: rgba(255,255,255,.12); }
html.pcm-night .mab-back,
html.pcm-night .mab-share { background: #2C2C2E; color: #fff; border-color: rgba(255,255,255,.16); }
html.pcm-night .mab-back svg,
html.pcm-night .mab-share svg { stroke: #fff; }

/* 年長友善 baseline 把這幾項寫死了深色（§7），夜幕翻深時會看不見 → 夜幕內翻亮。
   （italian-vintage B 主題有自己更具體的 .pcm-ita-b.pcm-night 覆寫，會贏過這裡，不受影響）*/
html.pcm-night .spec-key  { color: rgba(245,245,247,.82); }
html.pcm-night .mod-desc  { color: rgba(245,245,247,.82); }
html.pcm-night .stat-label{ color: rgba(245,245,247,.72); }
html.pcm-night .fs-step p { color: rgba(245,245,247,.82); }

/* 平滑過場：整頁一起淡變、有儀式感（只在 .has-reveal = 允許動態時掛 transition）*/
.has-reveal body, .has-reveal nav,
.has-reveal section.hero, .has-reveal section.stats, .has-reveal section.gallery,
.has-reveal section.mods, .has-reveal section.specs, .has-reveal section.cta,
.has-reveal section.trust, .has-reveal footer,
.has-reveal .contact-card, .has-reveal .mod-card,
.has-reveal .hero-title, .has-reveal .section-title, .has-reveal .stat-num, .has-reveal .stat-label,
.has-reveal .spec-key, .has-reveal .spec-val, .has-reveal .mod-name, .has-reveal .mod-desc,
.has-reveal .cta-title, .has-reveal .cta-subtitle, .has-reveal .contact-item-text span {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease;
}

/* ══════════════════════════════════════════════════════════════
   6) 結尾 CTA：放「該車 hero 大圖」當沉浸背景（跟首頁收尾一樣）
   圖鋪滿 + 深色罩，內容固定亮色 → 無論日夜、無論 JS 都讀得到。
   每台車各自的 media/cover.jpg 會自動帶入（合進產生器後全車適用）。
   ══════════════════════════════════════════════════════════════ */
section.cta { position: relative; overflow: hidden; }
.cta-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cta-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  transform: scale(1.06);
  filter: saturate(.9) brightness(.82);
}
.cta-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(18,18,20,.9) 0%, rgba(20,20,22,.78) 40%,
    rgba(20,20,22,.85) 70%, rgba(12,12,14,.96) 100%);
}
.cta .cta-inner { position: relative; z-index: 1; }

/* CTA 內容固定亮色（圖在底下，日夜＋無 JS 都讀得到）*/
.cta .cta-title { color: #fff; }
.cta .cta-subtitle { color: rgba(255,255,255,.74); }
.cta .cta-disclaimer { color: rgba(255,255,255,.5); }
.cta .contact-card { background: rgba(28,28,30,.86); border-color: rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cta .contact-item-text strong { color: rgba(255,255,255,.62); }
.cta .contact-item-text span { color: #fff; }
.cta .contact-item-icon svg { stroke: #fff; }
.cta .contact-item-icon.contact-icon-line svg { stroke: none; fill: #06C755; }

/* 夜幕開啟時，CTA 罩壓更深與整頁深空灰相融，圖只當隱約氛圍 */
html.pcm-night .cta-bg::after {
  background: linear-gradient(180deg,
    rgba(12,12,14,.92) 0%, rgba(16,16,18,.82) 40%,
    rgba(16,16,18,.88) 70%, rgba(8,8,10,.97) 100%);
}

@media (max-width: 768px){
  /* 手機文字密、欄位窄 → 罩再重，圖只當隱約氛圍 */
  .cta-bg::after { background: linear-gradient(180deg, rgba(16,16,18,.92) 0%, rgba(20,20,22,.82) 45%, rgba(12,12,14,.97) 100%); }
}

/* ════════════════════════════════════════════════════════════
   7) 年長友善 baseline — 所有詳情頁通用（HONDA / Ducati / MV）
   PCM 客群 30-55 歲，含視力衰退長者 → 字體加大、對比加深
   個別主題（pcm-ita-b/d）可再 override
   ════════════════════════════════════════════════════════════ */

/* Stats 區數字下方 unit / label */
.stat-unit {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 6px;
}
.stat-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(29,29,31,.78);   /* 從預設較淺色 → .78 加深 */
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* Mod card 內字 */
.mod-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--black);
}
.mod-desc {
  font-size: 15.5px;
  line-height: 1.75;
  margin-top: 8px;
  color: rgba(29,29,31,.85);   /* 加深 */
  letter-spacing: 0.01em;
}

/* Hero tagline — 三行 value prop 的核心 */
.hero-tagline {
  font-size: 17.5px;
  line-height: 1.85;
  color: var(--black);
  letter-spacing: 0.012em;
}

/* Specs 規格表（年長客人讀規格的重點）*/
.spec-key,
.spec-val {
  font-size: 15px;
  line-height: 1.7;
}
.spec-key {
  font-weight: 700;
  color: rgba(29,29,31,.82);
}
.spec-val {
  color: var(--black);
  font-weight: 500;
}

/* HONDA / Ducati feature-scroll 文字（不是 mods-grid 結構，另設）*/
.fs-step h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.fs-step p {
  font-size: 15.5px;
  line-height: 1.75;
  margin-top: 6px;
  color: rgba(29,29,31,.85);
}

/* CTA 段 subtitle（CTA 是深色底白字，加大不加深）*/
.cta-subtitle {
  font-size: 16.5px;
  line-height: 1.85;
}

/* Trust 段段落 */
.trust-text-block p {
  font-size: 16.5px;
  line-height: 1.85;
}
.trust-badge strong { font-size: 16px; font-weight: 700; }
.trust-badge span { font-size: 14.5px; line-height: 1.7; }

@media (max-width: 768px){
  .stat-unit { font-size: 14.5px; }
  .stat-label { font-size: 13.5px; letter-spacing: 0.04em; }
  .mod-name { font-size: 17px; }
  .mod-desc { font-size: 15px; line-height: 1.7; }
  .hero-tagline { font-size: 16.5px; line-height: 1.75; }
  .spec-key, .spec-val { font-size: 14.5px; }
  .fs-step h3 { font-size: 17px; }
  .fs-step p { font-size: 15px; }
  .cta-subtitle { font-size: 15.5px; }
  .trust-text-block p { font-size: 15.5px; }
  .trust-badge strong { font-size: 15.5px; }
  .trust-badge span { font-size: 14px; }
}
