/* ============================================================
   PCM 詳情頁 — 義式 Vintage 主題（italian-vintage / pcm-ita-b）
   ──────────────────────────────────────────────────────────────
   只掛在 theme=italian-vintage 的車（目前 MV Brutale 1090R）。
   HONDA / Ducati（apple 主題）完全不受影響。
   1970s Cinelli/Pirelli 賽車海報 + Olivetti 雙字型 + B v2.4 義式深化。

   鐵則保護：
   ① 不整頁重做版型（所有效果掛在現有元素上）
   ⑤ 不覆寫 --honda-red（PCM 紅維持品牌身分）
   ④ 動態包在 .has-reveal 下（reduced-motion 自動退回靜態）
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   方向 B — Cinelli / Pirelli 70s 義式賽車海報復古 ⭐ 主推
   1970s Pirelli Calendar / Cinelli MASH / Italian GP 海報語言
   氣質：復古、熱血、義大利、有故事
   ──────────────────────────────────────────────────────────── */
/* B v2.3 — 義式深化（採納 agent 8 條 critique）
   主訴求：MOTOCICLISMO 雜誌封面氣質、Cinelli 賽車海報、Pirelli 月曆、Olivetti 雙字型語言
   新增變數：burnt umber 皮革色、Pirelli oxide blue、aged strawx 黃 */
html.pcm-ita-b {
  --ita-cream:  #F4EBD3;
  --ita-green:  #008C45;
  --ita-white:  #F4F5F0;
  --ita-red:    #CD212A;
  --ita-ink:    #1A1611;
  --ita-gold:   #B8895A;
  --ita-umber:  #4A2308;   /* P1-5: 加深 oxidised umber（年長眼睛黃化更友善 5.7:1→8.4:1）*/
  --ita-oxide:  #1B3A52;   /* Pirelli 檔案藍 */
  --ita-strawx: #E8D080;   /* aged 米黃強調色 */
}

/* Nav — P0-4: 從 15% 透明拉到 62% 確保 nav-link 在 hero 圖上仍清楚 */
html.pcm-ita-b nav {
  background: rgba(244, 235, 211, 0.62);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: rgba(26, 22, 17, 0.14);
}
html.pcm-ita-b nav .nav-links a {
  color: var(--ita-ink);
  font-weight: 600;
}

/* P1 #4 — 米黃紙底加 SVG 細紙纖維噪點（MOTOCICLISMO offset 印刷感）*/
html.pcm-ita-b body {
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--ita-cream);
}
/* stats / mods 加 halftone 點紋 + 雙色漸層（cream → 微暖黃）*/
/* P0-2 + P2-9: 點密度 4→6px 防 Retina 1.5× moiré；opacity .06→.035 降噪以救 stat-label 對比 */
html.pcm-ita-b section.stats,
html.pcm-ita-b section.mods {
  background:
    radial-gradient(circle at 50% 50%, rgba(26,22,17,.035) 0.4px, transparent 1px) 0 0/6px 6px,
    linear-gradient(180deg, var(--ita-cream) 0%, #EFE3C2 100%);
}

/* P0 #2 — 不對稱 Cinelli 三色條（取代等寬國旗）*/
html.pcm-ita-b section.stats::before,
html.pcm-ita-b section.mods::before,
html.pcm-ita-b section.gallery::before,
html.pcm-ita-b section.specs::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg,
    var(--ita-green) 0    14%,
    var(--ita-ink)   14%  16%,
    var(--ita-cream) 16%  22%,
    var(--ita-ink)   22%  24%,
    var(--ita-red)   24% 100%);
  box-shadow: 0 1px 0 rgba(26,22,17,.18);
}

/* Hero / Section title — Playfair Display 義式斜體 + swash/ligature */
html.pcm-ita-b .hero-title,
html.pcm-ita-b .section-title {
  font-family: "Playfair Display", "Noto Serif TC", serif;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.025em;
  font-feature-settings: "swsh" 1, "salt" 1, "dlig" 1;
  line-height: 0.96;
  color: var(--ita-ink);
  text-wrap: balance;        /* 自動平衡每行字數，避免「你」單字孤立第二行（CJK widow 修正）*/
  word-break: keep-all;      /* 中文不在字中斷，整詞保留 */
}
html.pcm-ita-b .hero-title { font-size: clamp(48px, 7.8vw, 92px); }
/* P1-6: mobile hero title 收 clamp + 放鬆 letter-spacing + 增 line-height（年長眼字符分割友善）*/
@media (max-width: 768px) {
  html.pcm-ita-b .hero-title {
    font-size: clamp(40px, 9.5vw, 56px);
    letter-spacing: -0.015em;
    line-height: 1.05;
  }
  html.pcm-ita-b .hero-title .hch[data-num="1"] {
    letter-spacing: -0.02em;   /* mobile 數字鬆字距，不貼斜體字 */
  }
}
html.pcm-ita-b .section-title em {
  font-style: italic;
  color: var(--ita-red);
}

/* P0 #1 — MOTOCICLISMO 排版：italic 顯示字 + 紅色 roman 數字（拆字後 data-num="1" 切換）*/
html.pcm-ita-b .hero-title .hch[data-num="1"] {
  font-style: normal;
  font-feature-settings: "tnum" 1;
  color: var(--ita-red);
  letter-spacing: -0.04em;
}

/* P1 #3 — Olivetti 雙字型：body 區改 DM Sans / Inter Tight（sans）*/
html.pcm-ita-b .hero-subtitle,
html.pcm-ita-b .hero-tagline,
html.pcm-ita-b .stat-label,
html.pcm-ita-b .stat-unit,
html.pcm-ita-b .mod-desc,
html.pcm-ita-b .spec-key,
html.pcm-ita-b .spec-val {
  font-family: "DM Sans", "Inter Tight", "Noto Sans TC", system-ui, sans-serif;
  font-feature-settings: "ss01" 1;
  letter-spacing: 0.005em;
  font-style: normal;
}
/* stat-unit / stat-label 字體放大（之前 10.5px 中文太小，手機下幾乎讀不到）*/
html.pcm-ita-b .stat-unit {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 6px;
}
html.pcm-ita-b .stat-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 14.5px;           /* P0-2: 13.5→14.5 跨過年長閾值 */
  font-weight: 700;
  color: rgba(26,22,17,.92);   /* P0-2: .78→.92 對 halftone cream 達 8:1+ */
  margin-top: 4px;
}
@media (max-width: 768px) {
  html.pcm-ita-b .stat-unit { font-size: 14.5px; }
  html.pcm-ita-b .stat-label {
    font-size: 13.5px;
    letter-spacing: 0.08em;
  }
}

/* mod-card 內字 — 年長客人友善：放大 + 加深 + 加粗 */
html.pcm-ita-b .mod-name {
  font-size: 18px;             /* 17 → 18 */
  font-weight: 700;
  line-height: 1.45;
  color: var(--ita-ink);       /* 深墨色（最高對比）*/
}
html.pcm-ita-b .mod-desc {
  font-size: 15.5px;           /* 14 → 15.5 */
  line-height: 1.75;
  margin-top: 8px;
  color: rgba(26,22,17,.88);   /* .7 → .88 大幅加深，對 cream 底 WCAG AA 達標 */
  letter-spacing: 0.01em;      /* 中文一點點呼吸 */
}
@media (max-width: 768px) {
  html.pcm-ita-b .mod-name { font-size: 17px; }
  html.pcm-ita-b .mod-desc { font-size: 15px; line-height: 1.7; }
}

/* Hero tagline 順手加深（之前繼承基底色，可能偏淺）*/
/* QW1: 16.5→17.5px（年長友善 free 一階 — value prop 住在這三行 Chinese body）*/
html.pcm-ita-b .hero-tagline {
  color: var(--ita-ink);
  font-size: 17.5px;
  line-height: 1.85;
  letter-spacing: 0.012em;
}
@media (max-width: 768px) {
  html.pcm-ita-b .hero-tagline { font-size: 16.5px; line-height: 1.75; }
}

/* Specs 表格資料行：加大 + 加深（年長客人讀規格表的核心）*/
html.pcm-ita-b .spec-key,
html.pcm-ita-b .spec-val {
  font-size: 15px;
  line-height: 1.65;
}
html.pcm-ita-b .spec-key {
  font-weight: 700;
  color: rgba(26,22,17,.85);
}
html.pcm-ita-b .spec-val {
  color: var(--ita-ink);
  font-weight: 500;
}
@media (max-width: 768px) {
  html.pcm-ita-b .spec-key,
  html.pcm-ita-b .spec-val { font-size: 14.5px; }
}

/* P2 #7 — 章節編號改 Bodoni Italic + 雙陰影（套印錯位 紅+ink = 1970s offset 印刷 artifact） */
/* P2-8: 第二陰影 green→ink，對 deuteranope 紅綠色盲（男性 8%）友善，仍維持套印感 */
html.pcm-ita-b .section-eyebrow::before {
  counter-increment: pcm-sec;
  content: counter(pcm-sec, decimal-leading-zero);
  display: inline-block;
  width: 1.9em;
  height: 1.9em;
  line-height: 1.9em;
  text-align: center;
  background: var(--ita-ink);
  border: none;
  border-radius: 0;
  color: var(--ita-strawx);
  font-family: "Bodoni Moda", "Playfair Display", "Noto Serif TC", serif;
  font-weight: 900;
  font-style: italic;
  font-size: 0.92em;
  letter-spacing: 0;
  margin-right: 0.9em;
  vertical-align: middle;
  box-shadow: 3px 3px 0 var(--ita-red), 6px 6px 0 var(--ita-ink);
  transition: box-shadow 0.28s cubic-bezier(.22,.61,.36,1), transform 0.28s cubic-bezier(.22,.61,.36,1);
}
html.pcm-ita-b .section-eyebrow:hover::before {
  box-shadow: 4px 4px 0 var(--ita-red), 8px 8px 0 var(--ita-ink);
  transform: translate(-1.5px, -1.5px);
}

/* CASCINA 銘牌 — vintage 海關蠟印感（P0-1: 11→13px、字距 0.28→0.18 收緊、padding 加大、旋轉 -2.5°→-1.5° 緩和）*/
html.pcm-ita-b .hero-img-wrap { position: relative; }
html.pcm-ita-b .hero-img-wrap::after {
  content: "MADE IN ITALY · DAL 1945";
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: "Bodoni Moda", "Playfair Display", serif;
  font-variant: small-caps;
  font-style: italic;
  font-size: 13px;             /* 11→13 跨過閾值 */
  font-weight: 700;
  letter-spacing: 0.18em;      /* 0.28→0.18 緩字距，glyph 變回詞形 */
  color: var(--ita-strawx);
  background: var(--ita-umber);
  padding: 10px 16px 9px;      /* 加大 padding 給氣勢 */
  border: 1.5px double var(--ita-strawx);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 2px rgba(26,22,17,.55),
    0 3px 0 rgba(0,0,0,.32),
    0 8px 18px -8px rgba(0,0,0,.55);
  transform: rotate(-1.5deg);  /* -2.5→-1.5 防 sub-pixel 模糊 */
  transform-origin: top right;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 768px) {
  html.pcm-ita-b .hero-img-wrap::after {
    top: 12px;
    right: 12px;
    font-size: 11px;           /* 9→11 跨過 mobile 閾值 */
    padding: 7px 11px 6px;
    letter-spacing: 0.14em;
  }
}

/* Stats 大數字 — Playfair italic（保留）*/
html.pcm-ita-b .stat-num {
  font-family: "Playfair Display", "Noto Serif TC", serif;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.04em;
  color: var(--ita-ink);
}
html.pcm-ita-b .stat-item {
  position: relative;
  padding-bottom: 4px;
}

/* Tachometer ticks — Veglia Borletti 賽車儀表刻度 */
/* P0-3: 加 1.5px 紅 baseline 連起斷 dash，恢復 digit→label 視覺繫帶（年長眼需連續線索）*/
html.pcm-ita-b .stat-num::after {
  content: "";
  display: block;
  width: 56px;
  height: 8px;
  background:
    /* 上層：5 條 dash */
    linear-gradient(90deg,
      var(--ita-red) 0 8%, transparent 8% 18%,
      var(--ita-red) 18% 26%, transparent 26% 38%,
      var(--ita-red) 38% 46%, transparent 46% 58%,
      var(--ita-red) 58% 66%, transparent 66% 78%,
      var(--ita-red) 78% 86%, transparent 86% 100%) 0 0 / 100% 5px no-repeat,
    /* 下層：1.5px solid baseline */
    linear-gradient(var(--ita-red), var(--ita-red)) 0 100% / 100% 1.5px no-repeat;
  margin: 8px auto 0;
}

/* Hero price / CTA price — 義式襯線 */
html.pcm-ita-b .hero-price,
html.pcm-ita-b .cta-price-big {
  font-family: "Playfair Display", serif;
  font-weight: 900;
  font-style: italic;
}

/* eyebrow 義式風小標 — 改 burnt umber 色（皮革座椅感）*/
html.pcm-ita-b .section-eyebrow,
html.pcm-ita-b .hero-eyebrow {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ita-umber);
  font-family: "DM Sans", "Inter Tight", "Noto Sans TC", system-ui, sans-serif;
  font-weight: 600;
}

/* P1 #5 — specs 表頭用 Pirelli oxide blue（檔案藍）*/
html.pcm-ita-b .specs-group-title { color: var(--ita-oxide); }

/* 修正 mods 奇數張孤兒：當總數 % 3 == 1（如 7 張），最後一張撐滿整排 → 變壓軸主打卡 */
/* P1-7: 撐滿時放大 mod-name 22px / mod-desc 17px → 真正的「壓軸主打」視覺信號 */
html.pcm-ita-b .mods-grid > .mod-card:last-child:nth-child(3n-2) {
  grid-column: 1 / -1;
}
html.pcm-ita-b .mods-grid > .mod-card:last-child:nth-child(3n-2) .mod-name {
  font-size: 22px;
  line-height: 1.35;
}
html.pcm-ita-b .mods-grid > .mod-card:last-child:nth-child(3n-2) .mod-desc {
  font-size: 17px;
  line-height: 1.75;
  margin-top: 10px;
}
@media (max-width: 768px) {
  html.pcm-ita-b .mods-grid > .mod-card:last-child:nth-child(3n-2) .mod-name { font-size: 19px; }
  html.pcm-ita-b .mods-grid > .mod-card:last-child:nth-child(3n-2) .mod-desc { font-size: 16px; }
}
/* 當總數 % 3 == 2（如 8 張），最後一張撐 2 格（剩 1 + 大主打 2）*/
html.pcm-ita-b .mods-grid > .mod-card:last-child:nth-child(3n-1) {
  grid-column: span 2;
}

/* mods 卡片左邊條改 umber（皮革感）*/
html.pcm-ita-b .mod-card {
  background: rgba(244, 235, 211, 0.7);
  border-left: 3px solid var(--ita-umber);
}
html.pcm-ita-b .mod-num {
  color: var(--ita-red);
  font-family: "Bodoni Moda", "Playfair Display", serif;
  font-style: italic;
  font-weight: 900;
}
html.pcm-ita-b .mod-name { color: var(--ita-ink); }
html.pcm-ita-b .mod-card {
  transition:
    border-left-width 0.32s cubic-bezier(.22,.61,.36,1),
    transform 0.32s cubic-bezier(.22,.61,.36,1),
    background-color 0.32s ease,
    box-shadow 0.32s ease;
}
html.pcm-ita-b .mod-card:hover {
  border-left-width: 6px;
  transform: translateX(4px);
  background: rgba(244, 235, 211, 0.95);
  box-shadow: 0 8px 24px -10px rgba(107, 52, 16, 0.32);
}

/* 夜幕內方向 B — 米黃 → 深空灰，三色條與蠟印保留（反差視覺亮點）*/
html.pcm-ita-b.pcm-night body { background: #1D1D1F; }
html.pcm-ita-b.pcm-night section.stats,
html.pcm-ita-b.pcm-night section.mods,
html.pcm-ita-b.pcm-night section.hero,
html.pcm-ita-b.pcm-night section.gallery,
html.pcm-ita-b.pcm-night section.specs { background: #161617; }
html.pcm-ita-b.pcm-night section.trust,
html.pcm-ita-b.pcm-night footer { background: #000; }
html.pcm-ita-b.pcm-night .hero-title,
html.pcm-ita-b.pcm-night .section-title { color: var(--ita-cream); }
html.pcm-ita-b.pcm-night .hero-subtitle,
html.pcm-ita-b.pcm-night .hero-tagline,
html.pcm-ita-b.pcm-night .stat-num,
html.pcm-ita-b.pcm-night .mod-name { color: var(--ita-cream); }
html.pcm-ita-b.pcm-night .stat-label { color: rgba(244,235,211,.75); }
/* v2.4 修補：v2.4 把 spec/mod-desc 寫死深墨色 → 夜幕內看不見 → 翻 cream */
html.pcm-ita-b.pcm-night .mod-desc { color: rgba(244,235,211,.78); }
html.pcm-ita-b.pcm-night .spec-key { color: rgba(244,235,211,.7); }
html.pcm-ita-b.pcm-night .spec-val { color: var(--ita-cream); }
html.pcm-ita-b.pcm-night .specs-group-title { color: var(--ita-strawx); }
html.pcm-ita-b.pcm-night .specs-left p { color: rgba(244,235,211,.72); }
html.pcm-ita-b.pcm-night .section-eyebrow { color: var(--ita-strawx); }
html.pcm-ita-b.pcm-night .section-eyebrow::before {
  background: var(--ita-strawx);
  color: var(--ita-ink);
  box-shadow: 3px 3px 0 var(--ita-red), 6px 6px 0 var(--ita-ink);
}
/* nav 夜幕內也覆寫，nav-link 翻 cream + 半透明深背 */
html.pcm-ita-b.pcm-night nav {
  background: rgba(22, 22, 23, 0.78);
  border-bottom-color: rgba(244, 235, 211, 0.1);
}
html.pcm-ita-b.pcm-night nav .nav-links a,
html.pcm-ita-b.pcm-night nav .nav-logo { color: var(--ita-cream); }


/* ════════════════════════════════════════════════════════════
   進場與互動動畫（Framer Motion 風 vanilla 實作，scope = pcm-ita-b）
   全部包在 .has-reveal 下；reduced-motion / 無 JS 自動退回靜態。
   JS（site-detail-italian.js）負責拆字、counter rollup、IO 觸發、
   hero parallax、夜幕窗簾的 class 掛載。
   ════════════════════════════════════════════════════════════ */

/* A1. Hero 圖呼吸（filter 微動，與 JS parallax 的 transform 不衝突）*/
.has-reveal.pcm-ita-b .hero-img-wrap img {
  animation:
    pcmHeroImg 1.1s cubic-bezier(.22,.61,.36,1) .18s forwards,
    pcmHeroBreathe 9s ease-in-out 1.6s infinite;
}
@keyframes pcmHeroBreathe {
  0%, 100% { filter: saturate(0.96) brightness(0.99); }
  50%      { filter: saturate(1.08) brightness(1.04); }
}

/* B8. Hero title 逐字浮現（JS 把 h1 拆成 .hch；數字 .hch[data-num] 仍紅色直體）*/
.has-reveal.pcm-ita-b .hero-title .hch {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  animation: pcmCharIn 0.7s cubic-bezier(.22,.85,.36,1) forwards;
  animation-delay: calc(var(--ch-i, 0) * 50ms + 320ms);
}
@keyframes pcmCharIn { to { opacity: 1; transform: translateY(0); } }

/* B6. 章節編號方塊翻牌進場（只動 rotateX + opacity；B 的紅+ink 雙陰影由自身規則維持）*/
.has-reveal.pcm-ita-b .section-eyebrow.is-flip-in::before {
  animation: pcmStampFlipIn 0.7s cubic-bezier(.22,.85,.36,1) backwards;
  transform-origin: center center;
  animation-delay: var(--flip-d, 0ms);
}
@keyframes pcmStampFlipIn {
  0%   { transform: rotateX(-90deg) translateY(-4px); opacity: 0; }
  60%  { transform: rotateX(14deg)  translateY(0);    opacity: 1; }
  100% { transform: rotateX(0);                       opacity: 1; }
}

/* B7. 不對稱 Cinelli 三色條「左到右掃過」進場（沿用 B 自身的漸層，只動 background-size）*/
.has-reveal.pcm-ita-b section.stats::before,
.has-reveal.pcm-ita-b section.mods::before,
.has-reveal.pcm-ita-b section.gallery::before,
.has-reveal.pcm-ita-b section.specs::before {
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.85s cubic-bezier(.22,.85,.36,1);
}
.has-reveal.pcm-ita-b section.stats.is-bar-in::before,
.has-reveal.pcm-ita-b section.mods.is-bar-in::before,
.has-reveal.pcm-ita-b section.gallery.is-bar-in::before,
.has-reveal.pcm-ita-b section.specs.is-bar-in::before {
  background-size: 100% 100%;
}

/* C11. 夜幕窗簾 — 暖黑幕布由上而下掃下（JS 加 pcm-night-wipe → 0.4s 後加 pcm-night）*/
.pcm-ita-b::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,22,17,.96), rgba(14,11,8,.98));
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-100%);
  transition: transform 0.95s cubic-bezier(.65,.05,.36,1), opacity 0.6s ease;
}
.pcm-ita-b.pcm-night-wipe::before { opacity: 1; transform: translateY(0); }
.pcm-ita-b.pcm-night::before { opacity: 0; transition-delay: 0.55s; }

/* reduced-motion 退場：移除所有動畫/過場，內容完整靜態顯示 */
@media (prefers-reduced-motion: reduce) {
  .pcm-ita-b .hero-img-wrap img,
  .pcm-ita-b .hero-title .hch,
  .pcm-ita-b .section-eyebrow::before,
  .pcm-ita-b section.stats::before,
  .pcm-ita-b section.mods::before,
  .pcm-ita-b section.gallery::before,
  .pcm-ita-b section.specs::before,
  .pcm-ita-b::before {
    animation: none !important;
    transition: none !important;
  }
  .has-reveal.pcm-ita-b section.stats::before,
  .has-reveal.pcm-ita-b section.mods::before,
  .has-reveal.pcm-ita-b section.gallery::before,
  .has-reveal.pcm-ita-b section.specs::before { background-size: 100% 100%; }
  .has-reveal.pcm-ita-b .hero-title .hch { opacity: 1; transform: none; }
}