/* ═══════════════════════════════════════════════════════════
   製圖紙與四段進度點
   ───────────────────────────────────────────────────────────
   兩者都由 scripts/site.js 依 DOM 順序生成，HTML 裡沒有寫死的編號。

   製圖紙是標題那一屏的內容 —— 線稿還沒開始畫的時候，
   左邊放的是「即將被畫上去的那張紙」，而不是提前演一段動畫。

   第一段一起筆，整張紙（連同四角標記）就一起淡出。
   曾經試過讓四角標記留著當所有線稿共用的舞台，但九張圖都畫滿整個
   viewBox，標記會壓在圖上 —— 定位記號穿過節點、切過曲線，反而更亂。
   ═══════════════════════════════════════════════════════════ */

/* 一起淡出：乘 2.5 表示第一段畫到四成時紙已經退乾淨，
   跟剛長出來的線稿有一段乾淨的交接，但不會拖到互相打架。 */
.sheet { opacity: clamp(0, calc(1 - var(--s1, 0) * 2.5), 1); }

.sheet { display: block; overflow: visible; }

.sheet path {
  fill: none;
  stroke: var(--stroke-faint);
  stroke-width: 1;
  stroke-linecap: round;
}

/* 四角與四邊中點的定位標記 */
.sheet__marks path { stroke: var(--stroke-faint); }

/* 鏤空的大編號。
   用無襯線而不是 mono —— mono 的斜線零放大到 112px 再鏤空，
   那條斜槓會變成畫面上最吵的一筆。

   paint-order: stroke 是必要的，不是裝飾：系統字型的某些字（例如 2 的
   斜線與底部橫槓接點）內部有重疊輪廓，純 fill:none + stroke 會把那個
   接點畫成一個小星星。先描邊、再用底色把字身填掉，內側那半條邊連同
   接點一起被蓋住，只剩乾淨的外輪廓。線寬因此要設成想要的兩倍。 */
.sheet__num {
  fill: var(--bg);
  stroke: var(--stroke-faint);
  stroke-width: 2.6;
  paint-order: stroke;
  font-family: var(--font-sans);
  font-size: 112px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-anchor: middle;
}

.sheet__id {
  fill: var(--ink-faint);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* 編號比四角標記再早一步退場：它佔的面積最大，最容易跟線稿糊在一起 */
.sheet__block { opacity: clamp(0, calc(1 - var(--s1, 0) * 4), 1); }

@media (prefers-reduced-motion: reduce) {
  .sheet { opacity: 0; }
}

/* ── 四段進度點 ────────────────────────────────────────
   ●──●──○──○  現在滾到這個專案的第幾拍。
   最後一顆用強調色，跟線稿「結果」那一層是同一個語言。   */
.stage-dots {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.stage-dots span {
  position: relative;
  width: 10px;
  height: 10px;
  flex: none;
  border: 1px solid var(--stroke-dim);
  border-radius: 50%;
}

/* 連接線正好等於 gap 的寬度 */
.stage-dots span::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 1.75rem;
  height: 1px;
  background: var(--stroke-faint);
}
.stage-dots span:last-child::after { content: none; }

/* 由內往外長出來的填滿，直接吃捲動進度，不做轉場才跟得上手感 */
.stage-dots span::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: var(--stroke);
  transform: scale(var(--fill, 0));
}
.stage-dots span:nth-child(1) { --fill: var(--s1, 0); }
.stage-dots span:nth-child(2) { --fill: var(--s2, 0); }
.stage-dots span:nth-child(3) { --fill: var(--s3, 0); }
.stage-dots span:nth-child(4) { --fill: var(--s4, 0); }
.stage-dots span:nth-child(4)::before { background: var(--accent); }
.stage-dots span:nth-child(4) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }