/* AeroPacer 精修層（共用，2026-09-30）
 * 首頁、引擎頁先做出來的那一套（design.md「首頁精修層」），抽成共用檔給方案、賽道排行、使用說明、文章列表與文章內頁用。
 * 引用：<head> 裡在頁面樣式之後
 *   <link rel="stylesheet" href="/assets/polish.css?v=…">
 *   <script>document.documentElement.classList.add("pl-js")</script>
 *   <script src="/assets/polish.js?v=…" defer></script>
 * 頁面只用 class／屬性表態要哪些效果，不寫 JS：
 *   data-split   首屏主標逐字（拉丁語系逐詞）浮上，等字型到齊才播
 *   data-rv      捲進畫面時浮上；data-rv-group 的直接子元素依序浮上（每個晚 90ms，最多排到第 7 個）
 *   .pl-card     滑鼠滑過浮起 3px＋游標位置的強調色聚光
 *   .pl-magnet   主按鈕磁吸
 *   .pl-prose    段落裡的連結加底線（WCAG：不能只靠顏色跟內文區分）
 *   .pl-faq      裡面的 <details>（或 <details class="pl-faq"> 自己）展開收合有高度動畫（支援 interpolate-size 的瀏覽器）
 *   .wordmark    頁尾大字標（JS 複製導覽列 logo）
 * 原則：只增強不依賴。沒有 JS、JS 沒載到、不支援新 CSS、或開了減少動態，頁面都完整、靜止、可讀。 */

html{scroll-padding-top:72px}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
::selection{background:rgba(var(--accent-rgb),.24)}

/* ── 首屏主標逐字 ── */
@media (prefers-reduced-motion:no-preference){
  /* polish.js 拆字前先藏起來（避免先看到整行再重播）；JS 沒跑到的保底：2 秒後自己出現 */
  html.pl-js [data-split]:not(.split){opacity:0;animation:plShow 0s linear 2s forwards}
  @keyframes plShow{to{opacity:1}}
  @keyframes plCh{from{opacity:0;translate:0 .45em;filter:blur(8px)}}
  [data-split].split .ch{display:inline-block;animation:plCh .95s var(--ease-out) calc(.08s + var(--c) * 36ms) backwards}
  [data-split].split.wait .ch{animation-play-state:paused}
  /* 主標下面緊接的那一段（副標）跟在字後面淡入；字型沒到一樣停在第一格 */
  @keyframes plUp{from{opacity:0;translate:0 14px}}
  [data-split].split + *{animation:plUp .9s var(--ease-out) .42s backwards}
  [data-split].split.wait + *{animation-play-state:paused}
}

/* ── 捲動進場 ── */
@media (prefers-reduced-motion:no-preference){
  html.pl-anim [data-rv],html.pl-anim [data-rv-group] > *{opacity:0;translate:0 28px;
    transition:opacity .9s var(--ease-out) calc(var(--i,0) * 90ms),translate .9s var(--ease-out) calc(var(--i,0) * 90ms)}
  html.pl-anim [data-rv].in,html.pl-anim [data-rv-group].in > *{opacity:1;translate:none}
  @media print{ html.pl-anim [data-rv],html.pl-anim [data-rv-group] > *{opacity:1;translate:none} }
}

/* ── 卡片：浮起＋聚光（--glow 用 @property 註冊才能淡入淡出；JS 只寫 --mx／--my） ── */
@property --glow{syntax:"<number>";inherits:false;initial-value:0}
/* 浮起用 transform（進場用的是 translate 屬性），兩個動作互不干擾；卡片同時在進場群組裡時，transition 清單要把兩邊都列上 */
.pl-card{transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),
  transform var(--dur-2) var(--ease-out),--glow .5s var(--ease-out)}
@media (prefers-reduced-motion:no-preference){
  html.pl-anim [data-rv-group] > .pl-card,html.pl-anim .pl-card[data-rv]{
    transition:opacity .9s var(--ease-out) calc(var(--i,0) * 90ms),translate .9s var(--ease-out) calc(var(--i,0) * 90ms),
      border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),--glow .5s var(--ease-out)}
}
@media (hover:hover) and (pointer:fine){
  .pl-card{background-image:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(var(--accent-rgb),calc(.085 * var(--glow))),transparent 62%)}
  .pl-card:hover{--glow:1;border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:var(--sh-pop);transform:translateY(-3px)}
}

/* ── 主按鈕磁吸（用 translate 屬性，不跟 :active 的 transform 打架） ── */
.pl-magnet{transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),translate .45s var(--ease-out)}

/* ── 段落連結底線 ── */
.pl-prose p a,.pl-prose li a,.pl-prose td a,.pl-prose dd a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ── FAQ 展開收合動畫（Chrome 131+；其他瀏覽器照原本瞬間開合） ── */
@media (prefers-reduced-motion:no-preference){
  @supports (interpolate-size:allow-keywords){
    .pl-faq{interpolate-size:allow-keywords}
    .pl-faq details::details-content,details.pl-faq::details-content{height:0;overflow:clip;
      transition:height var(--dur-2) var(--ease-out),content-visibility var(--dur-2) allow-discrete}
    .pl-faq details[open]::details-content,details.pl-faq[open]::details-content{height:auto}
  }
}

/* ── 頁尾大字標 ── */
.wordmark{margin:36px auto 0;overflow:hidden}   /* 放在 </footer> 之後（dock.js 會把頁尾改成並排 flex）；overflow 讓升起動畫從下緣冒出 */
.wordmark:empty{display:none}
.wordmark svg{display:block;width:100%;height:auto;margin-bottom:28px}
.wordmark [fill="var(--ink)"]{fill:color-mix(in srgb,var(--ink) 8%,transparent)}
.wordmark [stroke="var(--ink)"]{stroke:color-mix(in srgb,var(--ink) 8%,transparent)}
.wordmark [fill="var(--accent)"]{fill:color-mix(in srgb,var(--accent) 22%,transparent)}
.wordmark [stroke="var(--accent)"]{stroke:color-mix(in srgb,var(--accent) 45%,transparent)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes plWm{from{translate:0 45%;opacity:.2}}
    .wordmark svg{animation:plWm linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}

/* ── 結尾色帶打光（頁面的強調色帶加 .pl-band） ── */
.pl-band{position:relative;overflow:hidden;isolation:isolate}
.pl-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%,rgba(255,255,255,.22),transparent 60%),
             radial-gradient(80% 60% at 50% 120%,rgba(0,0,0,.16),transparent 70%)}