/* ============================================================
   PCM 首頁 — 質感 polish 層（DEMO，可整層移除還原）
   移除：拿掉 index-demo.html 的這支 <link> 與對應 <script> 即可。

   ※ 首頁本來就有 .reveal 進場系統 / 卡片 hover 放大 / 品牌跑馬燈 / reduced-motion，
     這層「不重做」那些，只補首頁缺的幾個精修：
     1) kicker 紅短線（編輯級記號，純 CSS）
     2) 數字工藝（價格/里程/編號 等寬數字＋字距，純 CSS）
     3) hero 載入入場（由 JS 加 .pcm-hero-in 觸發；reduced-motion / 無 JS = 直接顯示）
     4) hero 大圖淡入（transform 交給 JS 做極輕 parallax）
     5) 結尾 CTA：滿版底圖＋雙按鈕，滑到底「整頁切深藍夜色」（含 nav/FAQ/所有區塊一起變）
   ============================================================ */

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

/* ---------- 1) kicker 紅短線 ---------- */
.section-kicker::before,
.hero-kicker::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 12px;
  position: relative;
  top: -2px;
}

/* ---------- 2) 數字工藝：等寬數字＋收緊字距 ---------- */
.card-price, .card-meta, .sp-num, .foot-company {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.card-price { letter-spacing: -0.02em; }

/* ============================================================
   入場：只在 <html class="pcm-hero-in"> 下生效
   （JS 偵測「非減少動態」才加 → reduced-motion / 無 JS = hero 正常完整顯示）
   ============================================================ */

/* ---------- 3) HERO 文字依序浮現 ---------- */
.pcm-hero-in .hero-kicker,
.pcm-hero-in .hero h1,
.pcm-hero-in .hero-lead,
.pcm-hero-in .hero-actions {
  opacity: 0;
  transform: translateY(24px);
  animation: pcmHeroIn .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.pcm-hero-in .hero-kicker  { animation-delay: .05s; }
.pcm-hero-in .hero h1      { animation-delay: .13s; }
.pcm-hero-in .hero-lead    { animation-delay: .24s; }
.pcm-hero-in .hero-actions { animation-delay: .34s; }
@keyframes pcmHeroIn { to { opacity: 1; transform: none; } }

/* ---------- 4) HERO 大圖淡入（transform 留給 JS parallax，故 keyframe 只動 opacity）---------- */
.pcm-hero-in .hero-media img {
  transform: scale(1.06);
  opacity: 0;
  animation: pcmHeroImg 1.2s cubic-bezier(.22,.61,.36,1) .1s forwards;
}
@keyframes pcmHeroImg { to { opacity: 1; } }

/* ============================================================
   5) 結尾 CTA：滿版底圖＋雙按鈕（LINE 綠／電話白）
   ============================================================ */
:root {
  --pcm-night:      #0A1A2E;   /* 深藍灣夜色：主夜色 */
  --pcm-night-deep: #06121F;   /* 更深一階：footer 落地用 */
  --pcm-night-panel:#11283F;   /* 夜間抬升面板（卡片）*/
}
.final-cta.has-bg {
  position: relative;
  overflow: hidden;
  background: var(--pcm-night);
  color: #fff;
  min-height: 100vh;
  min-height: 100dvh;         /* 全螢幕沉浸收尾；dvh＝手機動態視窗高，避免 iOS 工具列造成過捲爆高 */
  display: flex;
  align-items: center;
  padding-top: clamp(80px, 11vw, 150px);
  padding-bottom: clamp(80px, 11vw, 150px);
}
.final-cta-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.final-cta-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 52%;
  transform: scale(1.12);
  filter: saturate(.9) brightness(.92) hue-rotate(-6deg);
}
.final-cta-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(95deg, rgba(10,26,46,.9) 0%, rgba(10,26,46,.7) 40%, rgba(10,26,46,.4) 70%, rgba(10,26,46,.24) 100%),
    linear-gradient(0deg, rgba(6,18,31,.6) 0%, rgba(6,18,31,0) 42%);
}

/* ── 結尾背景＝PCM LOGO 淡浮水印（p2 精簡版，反白純白、極淡，文字為主角）── */
.final-cta-bg.is-logo { display: flex; align-items: center; justify-content: center; }
.final-cta-bg.is-logo img {
  width: auto; height: auto;
  max-width: min(680px, 64%); max-height: 60%;
  object-fit: contain;
  transform: none;
  filter: brightness(0) invert(1);   /* 純黑去背 PNG → 純白 */
  opacity: .05;                       /* 極淡浮水印，只當隱約品牌氛圍 */
}
.final-cta-bg.is-logo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(10,26,46,.4) 0%, rgba(10,26,46,.12) 50%, rgba(10,26,46,.4) 100%);
}
/* 浮水印跟著夜幕淡入（.pcm-anim 才掛；reduced-motion 直接顯示）*/
.pcm-anim .final-cta-bg.is-logo img { opacity: 0; transition: opacity 1.2s ease .2s; }
.pcm-anim .final-cta.fcta-in .final-cta-bg.is-logo img { opacity: .05; }
.final-cta.has-bg .final-cta-inner {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(32px, 5vw, 72px); flex-wrap: wrap;
}
.final-cta.has-bg .final-cta-copy { max-width: 600px; }
.final-cta.has-bg .section-kicker { color: #fff; }
.final-cta.has-bg h2 {
  color: #fff;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.12;
}
.final-cta.has-bg .final-cta-copy p {
  color: rgba(255,255,255,.72);
  margin-top: 18px; font-size: 17px; line-height: 1.8; max-width: 520px;
  font-family: 'Noto Sans TC', sans-serif;
}
.final-cta-actions { display: flex; flex-direction: column; gap: 14px; flex: 0 0 auto; }
.fcta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 30px; border-radius: 999px; min-width: 262px;
  font-size: 16px; font-weight: 700; text-decoration: none;
  font-variant-numeric: tabular-nums;
  font-family: 'Noto Sans TC', 'Manrope', sans-serif;
  transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.fcta-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.fcta-line { background: #06C755; color: #fff; box-shadow: 0 16px 34px -14px rgba(6,199,85,.7); }
.fcta-line svg { fill: #fff; }
.fcta-tel { background: #fff; color: #141414; box-shadow: 0 16px 34px -14px rgba(0,0,0,.55); }
.fcta-tel svg { fill: none; stroke: #141414; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fcta-btn:hover { transform: translateY(-2px); opacity: .95; }

/* 底圖進場（.pcm-anim 才隱藏 → reduced-motion / 無 JS = 底圖直接顯示，不會空白）*/
.pcm-anim .final-cta-bg img { opacity: 0; transition: opacity 1.1s ease; }
.pcm-anim .final-cta.fcta-in .final-cta-bg img { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   夜間模式：滑到結尾時「整個頁面」一起轉深藍夜色（含 FAQ、上方所有區塊、nav）
   做法 = 覆寫設計變數（--ink/--paper/--soft/--line/--muted）→ 凡是用 var() 的
   區塊與文字一起變，沒有白／黑接縫。再補硬寫 #fff 的卡片面。
   滑回上方自動還原。PCM 紅（--accent）永遠不覆寫 → logo／紅標維持紅。
   ══════════════════════════════════════════════════════════════ */
html.pcm-night {
  --ink:   #EAF1FA;                 /* 主文字 → 亮 */
  --muted: rgba(212,224,240,.62);  /* 次文字 → 亮灰 */
  --paper: var(--pcm-night);        /* 頁底（body / authority） → 深藍 */
  --soft:  #0E2438;                 /* 淡面板（standards-band / 圖底） → 深藍微亮 */
  --line:  rgba(255,255,255,.12);   /* 邊線 → 淡白 */
  --white: var(--pcm-night-panel);  /* 硬寫 var(--white) 的面 → 抬升深藍 */
  background: var(--pcm-night);
}
html.pcm-night body { background: var(--pcm-night); }

/* 平滑過場（只在 polish 啟用 = .pcm-anim 掛 transition），讓整頁一起淡變、有儀式感 */
.pcm-anim body,
.pcm-anim .nav, .pcm-anim .brand-lockup span, .pcm-anim .nav-links a,
.pcm-anim .faq, .pcm-anim .faq-item h3, .pcm-anim .faq-item p,
.pcm-anim .standards-band, .pcm-anim .authority, .pcm-anim .feature-bike, .pcm-anim .showroom,
.pcm-anim .standards-points, .pcm-anim .feature-bike-card, .pcm-anim .card,
.pcm-anim .standards-points h3, .pcm-anim .standards-points li p,
.pcm-anim .card-name, .pcm-anim .card-price, .pcm-anim .card-meta,
.pcm-anim .feature-bike-body h3, .pcm-anim .feature-bike-body p, .pcm-anim .feature-bike-body li strong,
.pcm-anim .authority-head h2, .pcm-anim .standards-lead h2,
.pcm-anim .section-copy h2, .pcm-anim .section-copy p, .pcm-anim .text-link,
.pcm-anim .chip, .pcm-anim .sort, .pcm-anim .hero-floor, .pcm-anim .hero-floor p, .pcm-anim .hero-floor strong {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease;
}

/* 硬寫 #fff 的卡片面（變數覆寫吃不到 #fff）：夜間改成抬升深藍面 */
html.pcm-night .standards-points,
html.pcm-night .feature-bike-card,
html.pcm-night .card,
html.pcm-night .chip,
html.pcm-night .sort,
html.pcm-night .pill,
html.pcm-night .hero-floor { background: var(--pcm-night-panel); }

/* card 圖片底（佔位灰）夜間壓深，避免亮灰塊 */
html.pcm-night .card-imgwrap { background: #0E2438; }

/* nav 夜間（半透明深藍，維持毛玻璃）*/
html.pcm-night .nav { background: rgba(10,26,46,.62); border-bottom-color: rgba(255,255,255,.12); }
html.pcm-night .brand-lockup span { color: #fff; }
html.pcm-night .nav-links a { color: rgba(255,255,255,.8); }
html.pcm-night .nav-links a:hover { color: #fff; }

/* footer 落地：比夜色再深一階 */
html.pcm-night .footer { background: var(--pcm-night-deep); }

/* 安全網：卡片上淺色「上架中」徽章維持深字（夜間 --ink 變亮會在淺底看不清）*/
html.pcm-night .badge { color: #15212e; }

@media (max-width: 768px) {
  .final-cta.has-bg { min-height: auto; }
  .final-cta.has-bg .final-cta-inner { flex-direction: column; align-items: center; text-align: center; }
  .final-cta.has-bg h2 { font-size: clamp(30px, 8vw, 42px); }
  .final-cta-actions { width: 100%; }
  .fcta-btn { width: 100%; min-width: 0; }
  .final-cta.is-logocta .final-cta-actions { flex-direction: column; }
  .final-cta-logo { max-width: 220px; margin-bottom: 30px; }
  .final-cta-bg::after {
    background: linear-gradient(180deg, rgba(10,26,46,.9) 0%, rgba(10,26,46,.78) 55%, rgba(10,26,46,.64) 100%);
  }
}

/* ════════════════════════════════════════════════════════════
   年長友善 baseline — 首頁
   字體加大 + 對比加深，讓 30-55 歲含視力衰退長者好讀
   ════════════════════════════════════════════════════════════ */

/* Hero lead — 首頁價值主張 */
.hero-lead {
  font-size: 21px;
  line-height: 1.85;
  color: rgba(29,29,31,.82);
}

/* Section copy 段落 */
.section-copy p,
.standards-lead p {
  font-size: 19px;
  line-height: 1.95;
  color: rgba(29,29,31,.78);
}

/* Standards 4 點清單 */
.standards-points h3 {
  font-size: 18px;
  font-weight: 700;
}
.standards-points li p {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(29,29,31,.78);
}

/* Feature bike body */
.feature-bike-body h3 { font-size: 34px; }
.feature-bike-body p {
  font-size: 16px;
  line-height: 1.9;
  color: rgba(29,29,31,.82);
}
.feature-bike-body li { font-size: 15px; }
.feature-bike-body li span { color: rgba(29,29,31,.7); }
.feature-bike-body li strong { color: var(--ink); font-weight: 600; }

/* 車卡 mods 一行 */
.card-name { font-size: 23px; }
.card-meta { font-size: 15px; color: rgba(29,29,31,.7); }
.card-mods {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(29,29,31,.78);
}
.card-price { font-size: 21px; }

/* FAQ 區 */
.faq-item h3 { font-size: 20px; }
.faq-item p {
  font-size: 16px;
  line-height: 1.95;
  color: rgba(29,29,31,.82);
}

/* Final CTA 副文 */
.final-cta-copy p { font-size: 19px; line-height: 1.9; }

/* Footer 公司資訊 — 一定要讀得到 */
.foot-company {
  font-size: 13.5px;
  color: rgba(255,255,255,.62);     /* .45 → .62 加深 */
  line-height: 2;
}

@media (max-width: 980px){
  .hero-lead { font-size: 18px; }
  .section-copy p, .standards-lead p { font-size: 17px; line-height: 1.85; }
}
/* 展間滑動箭頭（rail-arrow）全域基底：預設隱藏；只有手機可橫捲時才於下方 640 區開啟 */
.grid-rail{ position:relative; }
.grid-rail .rail-arrow{ display:none; }
@media (max-width: 640px){
  .hero-lead { font-size: 17px; line-height: 1.8; }
  .section-copy p { font-size: 16px; }
  .standards-points li p { font-size: 14px; }
  .feature-bike-body p { font-size: 15px; }
  .card-name { font-size: 19px; }
  .card-price { font-size: 18px; }
  .card-meta { font-size: 13px; }
  .faq-item h3 { font-size: 18px; }
  .faq-item p { font-size: 15px; }
  .final-cta-copy p { font-size: 17px; }

  /* ── 手機底部篩選列：移除排序下拉，品牌 chips 佔滿整列寬 ── */
  /* （排序下拉會把列「封口」，讓人以為沒有更多品牌；移掉後 chips 一目了然可滑） */
  .filterbar .sortwrap { display: none !important; }
  .filterbar .chips { flex: 1; padding-right: 4px; }
  /* chip 加大、提升點擊區（年長友善 + 更明顯可點）*/
  .filterbar .chip { height: 40px; padding: 0 18px; font-size: 14px; }
  /* 只有「chips 真的超出寬度」時（JS 加 .chips-scrollable）才顯示右緣漸層＋箭頭，
     避免品牌少時出現假的「可滑」暗示 */
  .filterbar.chips-scrollable::after {
    content: "›";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 46px;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 14px;
    font-size: 24px; font-weight: 800; line-height: 1;
    color: var(--accent);
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.96) 55%);
    animation: pcmChipNudge 1.5s ease-in-out infinite;
  }
  @keyframes pcmChipNudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-4px)} }

  /* ── 展間卡片左右滑動提示：浮動紅箭頭（rail-arrow）— 比照上方 chips 箭頭慣例 ──
     JS 偵測 .grid 真的可橫捲時才加 .rail-left / .rail-right；車少不出現假可滑暗示。
     桌機/平板是 grid 不會橫捲 → 永不顯示。整段可移除。 */
  .grid-rail .rail-arrow{
    position:absolute; top:26%; transform:translateY(-50%); z-index:5;
    width:34px; height:34px; align-items:center; justify-content:center;
    border:0; padding:0; border-radius:50%; cursor:pointer;
    background:rgba(255,255,255,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    box-shadow:0 4px 14px rgba(0,0,0,.16); -webkit-tap-highlight-color:transparent;
  }
  .grid-rail .rail-arrow svg{ width:17px; height:17px; stroke:var(--accent); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .rail-arrow-left{ left:6px; }
  .rail-arrow-right{ right:6px; }
  .grid-rail.rail-left .rail-arrow-left{ display:flex; animation:pcmRailNudgeL 1.5s ease-in-out infinite; }
  .grid-rail.rail-right .rail-arrow-right{ display:flex; animation:pcmRailNudgeR 1.5s ease-in-out infinite; }
  @keyframes pcmRailNudgeR{ 0%,100%{transform:translateY(-50%) translateX(0)} 50%{transform:translateY(-50%) translateX(4px)} }
  @keyframes pcmRailNudgeL{ 0%,100%{transform:translateY(-50%) translateX(0)} 50%{transform:translateY(-50%) translateX(-4px)} }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce){
  .filterbar.chips-scrollable::after { animation: none; }
  .grid-rail .rail-arrow{ animation: none !important; }
}
