/* ─────────────────────────────────────────────────────────────
   首頁的「節奏」（2026-10-01，Frank 批准的改版）
   診斷：每一段都是同一個模板（暖底、左標題、右文或圖、淡入）⇒ 讀起來像同一段重複。
   ⇒ 內容不動，每一段換一種處理：
     hero  方向 A（hero.css）
     01    超大字、逐行遮罩顯現、球場線稿
     ──    跑馬燈（運動與城市）
     02    滾動敘事：手機釘住，三步往上捲過去、換畫面
     03    整條深色帶：比數用巨大的數字，跟著捲動跑上來
     04    三張自製頁隨捲動錯開滑入（暖色底）
     之後  回到暖白
   動態一律用原生 CSS scroll-driven animations（animation-timeline: view()／scroll()），
   包在 @supports ＋ prefers-reduced-motion: no-preference 裡。
   🔑 不支援的瀏覽器、或要求減少動態 ⇒ 看到的是【最終的靜態樣子】，不是 JS 補位。
   只動 transform／opacity／clip-path（頂部導覽列的玻璃除外：它本來就是那一條的外觀）。
   不綁架捲動：sticky 可以，但不攔滾輪、不控制捲動速度。
   ───────────────────────────────────────────────────────────── */

/* 🔴 裁切一律用 overflow: clip，不用 hidden：overflow:hidden 的元素【是 scroll container】（即使它不會捲），
   而 view() / view-timeline 追蹤的是「最近的 scroll container」⇒ 包在 hidden 裡的元素會對著一個不會動的框量進度，
   動畫凍結在某個固定值（實測：03 比數永遠 64:61、01 第三句停在一半）。clip 只裁切、不建立 scroll container。
   hidden 留在前面當不支援 clip 的退路（那些瀏覽器本來也不支援 scroll timeline）。 */

/* 共用：逐行的外框（遮罩） */
.ln { display: block; overflow: hidden; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.ln > span { display: block; }

/* 標誌：原圖是黑底白字、靠 invert＋multiply 疊在奶油底上；頂欄變成玻璃（backdrop-filter 會隔離混合）後
   multiply 對著半透明的頂欄 ⇒ 露出一個淡色方框。改用透明底的版本（logo-wordmark-ink.png，由原圖亮度轉成 alpha），不再混合。 */
.brand img.logo-ink, .footer-brand img.logo-ink { filter: none; mix-blend-mode: normal; }

/* 閱讀進度條：只在支援 scroll() 時出現 */
.r-progress { display: none; }

/* ── 01 超大字 ─────────────────────────────────────────────────── */
.r-ops { position: relative; overflow: hidden; overflow: clip; background: var(--surface); }
.r-ops > .shell { position: relative; }
.r-court {
  position: absolute;
  right: -140px;
  top: 56px;
  width: min(780px, 72vw);
  height: auto;
  fill: none;
  stroke: var(--line);
  stroke-width: 1.4;
  pointer-events: none;
}
.r-mega {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(34px, 9vw, 128px); /* 手機：9 個字一行放得下（44px 最小值在 390 斷成「動。」孤字） */
  line-height: 1.12;
  margin: 22px 0 28px;
}
.r-ops-sub { max-width: 40ch; margin: 0 0 var(--space-5); font-size: 17px; line-height: 1.9; color: var(--muted); }
.r-ops .problem { font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.35; } /* 2.5vw 時第三句在 1440 斷成「你。」孤字 */

/* ── 跑馬燈 ────────────────────────────────────────────────────── */
.r-marquee { overflow: hidden; padding: 18px 0; background: var(--ink); color: var(--cream); }
.r-marquee-track { display: flex; width: max-content; }
.r-marquee-set {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 34px);
  white-space: nowrap;
}
.r-marquee-set i { width: 9px; height: 9px; border-radius: 50%; background: var(--mustard); }

/* ── 02 三步（不支援時：三欄／手機一欄，每一步帶自己的畫面） ───────── */
.r-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; }
.r-step .number { font: 400 12px/1.6 var(--mono); color: var(--muted); }
.r-step h3 { margin: 8px 0 10px; font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3vw, 40px); }
.r-step p { max-width: 38ch; margin: 0; font-size: 16px; line-height: 1.85; color: var(--muted); }
.r-step-shot { margin: 24px 0 0; }
.r-step-shot .shot-stage { max-width: 320px; }
.r-pin { display: none; }
@media (min-width: 901px) {
  .r-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}

/* ── 03 深色帶 ─────────────────────────────────────────────────── */
.r-dark { position: relative; overflow: hidden; overflow: clip; background: var(--ink); color: var(--cream); }
.r-dark > .shell { position: relative; }
.r-dark .chapter, .r-dark .sub, .r-dark .flow-note { color: #b9bcc2; }
.r-arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(220, 174, 108, .22);
  stroke-width: 1.5;
  pointer-events: none;
}
.r-scoreboard { margin: var(--space-4) auto var(--space-5); max-width: 980px; text-align: center; }
.r-score-teams { display: flex; justify-content: space-between; margin: 0; font-size: 14px; color: #b9bcc2; }
.r-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .12em;
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(96px, 19vw, 260px);
  line-height: .95;
  font-variant-numeric: tabular-nums;
}
/* 兩位數固定寬、靠左：數字跑的時候字串起點不動（置中的話 0→13→64 起點會移，量得到版面位移 CLS） */
.r-n { display: inline-block; min-width: 1.25em; text-align: left; }
.r-n-b { color: #8d9199; }
.r-colon { font-size: .5em; color: #8d9199; }
.r-win {
  display: inline-block;
  margin: 12px 0 0;
  padding: 4px 16px;
  border-radius: var(--pill);
  background: rgba(34, 197, 94, .18);
  color: #4ADE80;
  font-size: 18px;
  font-weight: 800;
}
.r-dark .flow-step { color: var(--cream); border-color: rgba(249, 246, 240, .16); }
.r-dark .flow-step:hover { background: rgba(249, 246, 240, .05); }
.r-dark .flow-step[aria-current="step"] { background: rgba(249, 246, 240, .08); border-color: rgba(249, 246, 240, .6); box-shadow: none; }
.r-dark .flow-step:focus-visible { outline-color: var(--cream); }
.r-dark .flow-num, .r-dark .flow-text small { color: #b9bcc2; }
.r-dark .flow-phone { background: #15171b; box-shadow: 0 34px 70px -34px #000; }

/* ── 04 暖色底 ─────────────────────────────────────────────────── */
.r-warm { background: #F3E9DA; }

/* ══ 動態（原生 scroll-driven）════════════════════════════════════ */
@property --n-a { syntax: '<integer>'; inherits: true; initial-value: 64; }
@property --n-b { syntax: '<integer>'; inherits: true; initial-value: 61; }

@keyframes r-line { from { transform: translate3d(0, 105%, 0); } to { transform: none; } }
@keyframes r-rise { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
@keyframes r-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes r-marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes r-focus { 0% { opacity: .32; } 30%, 66% { opacity: 1; } 100% { opacity: .32; } }
@keyframes r-shot-first { 0%, 62% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes r-shot-mid { 0%, 18% { opacity: 0; } 28%, 62% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes r-shot-last { 0%, 18% { opacity: 0; } 28%, 100% { opacity: 1; } }
@keyframes r-count-a { from { --n-a: 0; } to { --n-a: 64; } }
@keyframes r-count-b { from { --n-b: 0; } to { --n-b: 61; } }
@keyframes r-win { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes r-slide { from { opacity: .15; transform: translate3d(0, var(--dy, 80px), 0); } to { opacity: 1; transform: none; } }
@keyframes r-glass {
  from { background-color: rgba(249, 246, 240, 1); }
  to {
    background-color: rgba(249, 246, 240, .72);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    backdrop-filter: saturate(1.4) blur(16px);
  }
}

/* 跑馬燈只是時間動畫，不需要 scroll timeline */
@media (prefers-reduced-motion: no-preference) {
  .r-marquee-track { animation: r-marquee 52s linear infinite; }
  .r-marquee:hover .r-marquee-track { animation-play-state: paused; }
}

/* 頂部導覽列的玻璃：捲下去之後才出現（唯一的玻璃）。不是「動態」，減少動態時也照樣。 */
@supports (animation-timeline: scroll()) {
  .site-header { animation: r-glass linear both; animation-timeline: scroll(root block); animation-range: 0px 120px; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* 閱讀進度 */
    .r-progress {
      display: block;
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 3px;
      z-index: 60;
      background: var(--mustard);
      transform-origin: 0 50%;
      animation: r-progress linear both;
      animation-timeline: scroll(root block);
    }

    /* 標題：一行一行從遮罩底下推上來（每一行用自己的 view timeline ⇒ 自然有先後） */
    .ln { view-timeline: --ln block; }
    .ln > span { animation: r-line linear both; animation-timeline: --ln; animation-range: entry 0% cover 30%; }

    /* 其他「整塊」的顯現（03 的流程） */
    [data-reveal] { animation: r-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }

    /* 03：比數跟著捲動跑上來；「勝」只在數字跑完的那一刻之後出現（同一條 timeline，結構上不可能先出） */
    .r-scoreboard { view-timeline: --score block; }
    .r-n-static { display: none; }
    .r-n-a { animation: r-count-a linear both; animation-timeline: --score; animation-range: entry 20% cover 42%; }
    .r-n-b { animation: r-count-b linear both; animation-timeline: --score; animation-range: entry 20% cover 42%; }
    .r-n-a::after { counter-reset: na var(--n-a); content: counter(na, decimal-leading-zero); }
    .r-n-b::after { counter-reset: nb var(--n-b); content: counter(nb, decimal-leading-zero); }
    .r-win { animation: r-win linear both; animation-timeline: --score; animation-range: cover 42% cover 47%; }
  }
}

/* 02 滾動敘事＋04 錯開：只在寬螢幕、支援 timeline-scope 時（手機維持一欄帶圖，不釘住） */
@supports (animation-timeline: view()) and (timeline-scope: none) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
    .r-story { timeline-scope: --rs1, --rs2, --rs3; }
    .r-story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 8%; }
    .r-steps { grid-template-columns: 1fr; gap: 0; }
    .r-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; animation: r-focus linear both; animation-timeline: view(); }
    .r-step:nth-child(1) { view-timeline: --rs1 block; }
    .r-step:nth-child(2) { view-timeline: --rs2 block; }
    .r-step:nth-child(3) { view-timeline: --rs3 block; }
    .r-step-shot .shot-stage { display: none; } /* 圖改由右邊釘住的手機顯示；圖說留著 */
    .r-step-shot { max-width: 44ch; }
    .r-pin { display: block; position: sticky; top: calc(50vh - 320px); align-self: start; }
    .r-phone {
      position: relative;
      width: 100%;
      aspect-ratio: 603 / 1311;
      max-height: 640px;
      padding: 8px;
      border-radius: 42px;
      background: #1b1d22;
      box-shadow: 0 40px 80px -34px rgba(0, 0, 0, .55);
    }
    .r-pshot { position: absolute; inset: 8px; overflow: hidden; border-radius: 34px; opacity: 0; }
    .r-pshot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
    .r-pshot:nth-child(1) { animation: r-shot-first linear both; animation-timeline: --rs1; }
    .r-pshot:nth-child(2) { animation: r-shot-mid linear both; animation-timeline: --rs2; }
    .r-pshot:nth-child(3) { animation: r-shot-last linear both; animation-timeline: --rs3; }

    /* 04：三張自製頁隨捲動錯開滑入 */
    .identity-card { animation: r-slide linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .identity-card:nth-child(1) { --dy: 40px; }
    .identity-card:nth-child(2) { --dy: 110px; }
    .identity-card:nth-child(3) { --dy: 180px; }
  }
}