/* ============================================================
   codudo 墨系統 — 三步（說／看／成）steps.css
   搭配 theme/steps.js。要在 codudo.css、fx.css 之後載入。

   兩種長相
     預設（沒 JS、窄螢幕、關掉動態、觸控矮螢幕）：三個面板直向排，墨字完整。
     .is-pinned（JS 確認後才加）：釘住一屏、橫向推進，巨大墨字照捲動一筆一筆寫出來。
     .is-flow（窄螢幕、有 JS、沒關動態）：直向排，捲到時一次性寫一遍。

   守則
     顏色只用 :root 的變數。遮罩的不透明端用 var(--paper)，透明端用 transparent。
     圓角只有 var(--r)。字級只有 var(--t-*)；巨大墨字用「下限是變數」的 clamp()。
     動效只動 transform / opacity / mask。sticky 的祖先不准有 overflow:hidden，裁切放在 .ink-st-pin 自己身上。
   ============================================================ */


/* ============ 1. 預設：直向三段（沒 JS 也是這個） ============ */
.ink-st-runway{max-width:1080px;margin:var(--s5) auto 0;padding:0 32px}
.ink-st-pin{position:relative}
.ink-st-track{list-style:none;border-top:1px solid var(--line)}
.ink-st-panel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3) var(--s5);
  align-items:center;padding:var(--s5) 0;border-bottom:1px solid var(--line)}

/* 巨大墨字：三層疊在同一格 —— 描線（等著被寫）、濕邊（墨往外滲）、墨（真正的字） */
.ink-st-glyph{position:relative;display:inline-block;justify-self:start;
  font-family:var(--f-serif);font-weight:900;font-size:var(--t-mega-s);
  line-height:1;color:var(--paper);-webkit-user-select:none;user-select:none;
  /* 四道筆的位置。-12% = 還沒落筆（羽化寬 12%，跟 steps.js 的 FEATHER 一致） */
  --st-a:-12%;--st-b:-12%;--st-c:-12%;--st-d:-12%}
/* 上下留一點：襯線字的筆鋒會超出 1em，遮罩只蓋得到盒子裡面 */
.ink-st-glyph > span{display:block;padding:.06em .03em}
.ink-st-ink{position:relative;--st-lead:0%}
.ink-st-ghost,.ink-st-wet{position:absolute;left:0;top:0;width:100%;height:100%;display:none}
.ink-st-wet{color:var(--paper-35);transform:scale(1.02);opacity:0;--st-lead:7%}
.ink-st-ghost{color:transparent;-webkit-text-stroke:1px var(--line);opacity:0;
  transition:opacity .6s var(--ease)}

/* 右半：編號、標題、兩行說明 */
.ink-st-n{display:flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:var(--t-note);
  letter-spacing:.3em;color:var(--paper-35);margin-bottom:var(--s2)}
.ink-st-n::after{content:"";display:block;width:42px;height:1px;background:var(--line)}
.ink-st-t{font-family:var(--f-serif);font-size:var(--t-h2);font-weight:900;line-height:1.3;color:var(--paper)}
.ink-st-p{font-family:var(--f-sans);font-size:var(--t-lead);font-weight:300;line-height:1.85;
  color:var(--paper-60);margin-top:var(--s2);max-width:26em}

/* 底部進度線：只有釘住時才有 */
.ink-st-bar{display:none}


/* ============ 2. 寫字中：多層遮罩疊出筆順 ============
   每一層是一道帶羽化邊的筆刷帶：var(--paper) 是已經寫到的地方，transparent 是還沒寫到的。
   位置由 --st-a ~ --st-d 控制，JS 只寫變數。幾層用 mask-composite 聯集。
   墨（.ink-st-ink）跟濕邊（.ink-st-wet）吃同一套遮罩，濕邊多領先 --st-lead。
   .is-writing 由 JS 在 q < 0.98 時加上；寫完拿掉，遮罩整個不見，字乾乾淨淨。 */
.ink-st-glyph.is-writing > .ink-st-ink,
.ink-st-glyph.is-writing > .ink-st-wet{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-over;mask-composite:add}

/* 說：左邊「言」由上往下 → 右上「兌」的頭由左往右 → 右下兩筆斜著收 → 最後一道斜掃收乾淨 */
.ink-st-g1.is-writing > .ink-st-ink,
.ink-st-g1.is-writing > .ink-st-wet{
  -webkit-mask-image:
    linear-gradient(172deg,var(--paper) calc(var(--st-a) + var(--st-lead)),transparent calc(var(--st-a) + var(--st-lead) + 12%)),
    linear-gradient(100deg,var(--paper) calc(var(--st-b) + var(--st-lead)),transparent calc(var(--st-b) + var(--st-lead) + 12%)),
    linear-gradient(160deg,var(--paper) calc(var(--st-c) + var(--st-lead)),transparent calc(var(--st-c) + var(--st-lead) + 12%)),
    linear-gradient(120deg,var(--paper) calc(var(--st-d) + var(--st-lead)),transparent calc(var(--st-d) + var(--st-lead) + 12%));
          mask-image:
    linear-gradient(172deg,var(--paper) calc(var(--st-a) + var(--st-lead)),transparent calc(var(--st-a) + var(--st-lead) + 12%)),
    linear-gradient(100deg,var(--paper) calc(var(--st-b) + var(--st-lead)),transparent calc(var(--st-b) + var(--st-lead) + 12%)),
    linear-gradient(160deg,var(--paper) calc(var(--st-c) + var(--st-lead)),transparent calc(var(--st-c) + var(--st-lead) + 12%)),
    linear-gradient(120deg,var(--paper) calc(var(--st-d) + var(--st-lead)),transparent calc(var(--st-d) + var(--st-lead) + 12%));
  -webkit-mask-size:46% 100%,66% 48%,66% 62%,100% 100%;mask-size:46% 100%,66% 48%,66% 62%,100% 100%;
  -webkit-mask-position:0 0,100% 0,100% 100%,0 0;mask-position:0 0,100% 0,100% 100%,0 0}

/* 看：上半幾道橫由左往右 → 一道長撇從右上拉到左下 → 下面的「目」由上往下 → 收乾淨 */
.ink-st-g2.is-writing > .ink-st-ink,
.ink-st-g2.is-writing > .ink-st-wet{
  -webkit-mask-image:
    linear-gradient(100deg,var(--paper) calc(var(--st-a) + var(--st-lead)),transparent calc(var(--st-a) + var(--st-lead) + 12%)),
    linear-gradient(225deg,var(--paper) calc(var(--st-b) + var(--st-lead)),transparent calc(var(--st-b) + var(--st-lead) + 12%)),
    linear-gradient(180deg,var(--paper) calc(var(--st-c) + var(--st-lead)),transparent calc(var(--st-c) + var(--st-lead) + 12%)),
    linear-gradient(120deg,var(--paper) calc(var(--st-d) + var(--st-lead)),transparent calc(var(--st-d) + var(--st-lead) + 12%));
          mask-image:
    linear-gradient(100deg,var(--paper) calc(var(--st-a) + var(--st-lead)),transparent calc(var(--st-a) + var(--st-lead) + 12%)),
    linear-gradient(225deg,var(--paper) calc(var(--st-b) + var(--st-lead)),transparent calc(var(--st-b) + var(--st-lead) + 12%)),
    linear-gradient(180deg,var(--paper) calc(var(--st-c) + var(--st-lead)),transparent calc(var(--st-c) + var(--st-lead) + 12%)),
    linear-gradient(120deg,var(--paper) calc(var(--st-d) + var(--st-lead)),transparent calc(var(--st-d) + var(--st-lead) + 12%));
  -webkit-mask-size:100% 52%,100% 100%,66% 56%,100% 100%;mask-size:100% 52%,100% 100%,66% 56%,100% 100%;
  -webkit-mask-position:0 0,0 0,100% 100%,0 0;mask-position:0 0,0 0,100% 100%,0 0}

/* 成：頂上的橫由左往右 → 左邊的撇由上往下 → 斜鉤從中間斜劈到右下 → 收乾淨 */
.ink-st-g3.is-writing > .ink-st-ink,
.ink-st-g3.is-writing > .ink-st-wet{
  -webkit-mask-image:
    linear-gradient(95deg,var(--paper) calc(var(--st-a) + var(--st-lead)),transparent calc(var(--st-a) + var(--st-lead) + 12%)),
    linear-gradient(188deg,var(--paper) calc(var(--st-b) + var(--st-lead)),transparent calc(var(--st-b) + var(--st-lead) + 12%)),
    linear-gradient(140deg,var(--paper) calc(var(--st-c) + var(--st-lead)),transparent calc(var(--st-c) + var(--st-lead) + 12%)),
    linear-gradient(120deg,var(--paper) calc(var(--st-d) + var(--st-lead)),transparent calc(var(--st-d) + var(--st-lead) + 12%));
          mask-image:
    linear-gradient(95deg,var(--paper) calc(var(--st-a) + var(--st-lead)),transparent calc(var(--st-a) + var(--st-lead) + 12%)),
    linear-gradient(188deg,var(--paper) calc(var(--st-b) + var(--st-lead)),transparent calc(var(--st-b) + var(--st-lead) + 12%)),
    linear-gradient(140deg,var(--paper) calc(var(--st-c) + var(--st-lead)),transparent calc(var(--st-c) + var(--st-lead) + 12%)),
    linear-gradient(120deg,var(--paper) calc(var(--st-d) + var(--st-lead)),transparent calc(var(--st-d) + var(--st-lead) + 12%));
  -webkit-mask-size:100% 50%,44% 100%,72% 100%,100% 100%;mask-size:100% 50%,44% 100%,72% 100%,100% 100%;
  -webkit-mask-position:0 0,0 0,100% 0,0 0;mask-position:0 0,0 0,100% 0,0 0}

/* 描線與濕邊只在「會寫字」的兩種模式出現 */
.ink-st.is-pinned .ink-st-ghost,.ink-st.is-pinned .ink-st-wet,
.ink-st.is-flow .ink-st-ghost,.ink-st.is-flow .ink-st-wet{display:block}
/* 還沒寫完：描線淡淡地等著；寫完：描線退場，不在字邊留一圈細框 */
.ink-st-glyph.is-writing > .ink-st-ghost{opacity:1}
/* 寫完的字不留濕邊 */
.ink-st-glyph:not(.is-writing) > .ink-st-wet{visibility:hidden}


/* ============ 3. 釘住、橫向推進 ============
   .is-pinned 只有 steps.js 確認「寬 ≥ 760、沒關動態、不是觸控矮螢幕、支援遮罩」才會加。 */
.ink-st.is-pinned .ink-st-runway{max-width:none;margin-top:var(--s4);padding:0;
  height:320vh;height:320svh}
/* 裁切放在這裡，不放在 section：sticky 的祖先只要有 overflow:hidden 就釘不住。
   用 overflow:clip：一樣裁切，但不是捲動容器，Ctrl+F／#:~:text=／輔助技術都沒辦法把它橫向捲走
   （捲走的位移會跟軌道的 transform 疊在一起，面板錯位）。不支援 clip 的舊瀏覽器退回 hidden，由 steps.js 把 scrollLeft 拉回 0。 */
.ink-st.is-pinned .ink-st-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;overflow:clip}
.ink-st.is-pinned .ink-st-track{display:flex;width:300%;height:100%;border-top:0;will-change:transform}
/* 面板寬 = 釘住區塊寬（軌道的三分之一）。用百分比，位移也用百分比，捲動時不必量寬度 */
.ink-st.is-pinned .ink-st-panel{flex:0 0 33.3333%;width:33.3333%;height:100%;border-bottom:0;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5);
  padding:0 max(48px,calc((100vw - 1180px) / 2))}
.ink-st.is-pinned .ink-st-glyph{justify-self:center;font-size:var(--t-mega);will-change:transform}
.ink-st.is-pinned .ink-st-copy{will-change:transform,opacity}
/* 矮的筆電螢幕：墨字跟著縮，不壓到底部進度線 */
@media (max-height:780px){ .ink-st.is-pinned .ink-st-glyph{font-size:clamp(var(--t-h1),20vw,300px)} }
@media (max-height:600px){ .ink-st.is-pinned .ink-st-glyph{font-size:clamp(var(--t-h1),15vw,220px)} }

/* 底部進度線 ——— • ——— 一條 1px 線，一顆實心的嘟跟著走 */
.ink-st.is-pinned .ink-st-bar{display:block;position:absolute;left:50%;bottom:var(--s5);
  width:min(520px,calc(100% - 96px));height:1px;transform:translateX(-50%)}
.ink-st-line,.ink-st-fill,.ink-st-dotrail{position:absolute;left:0;top:0;width:100%;height:1px;display:block}
.ink-st-line{background:var(--line)}
.ink-st-fill{background:var(--paper-60);transform-origin:left;transform:scaleX(0)}
.ink-st-dot{position:absolute;left:-4px;top:-4px;width:9px;height:9px;display:block;
  border-radius:var(--r);background:var(--paper)}
/* 一個字寫完，點嘟三下，一下比一下小 —— 跟標誌的點同一個脾氣 */
.ink-st-dot.is-dudu{animation:ink-st-dudu .72s var(--ease)}
@keyframes ink-st-dudu{
  0%{transform:scale(1)}18%{transform:scale(1.9)}36%{transform:scale(1)}
  54%{transform:scale(1.5)}70%{transform:scale(1)}84%{transform:scale(1.2)}100%{transform:scale(1)}}
/* 三個刻度，下面標 01 說／02 看／03 成 */
.ink-st-tk{position:absolute;top:0;display:block;transform:translateX(-50%);padding-top:var(--s2);
  font-family:var(--f-mono);font-size:var(--t-note);letter-spacing:.2em;line-height:1;
  color:var(--paper-60);white-space:nowrap;opacity:.45;transition:opacity .4s var(--ease)}
.ink-st-tk::before{content:"";position:absolute;left:50%;top:-4px;width:1px;height:9px;background:var(--line-30)}
.ink-st-tk0{left:0}
.ink-st-tk1{left:50%}
.ink-st-tk2{left:100%}
.ink-st-tk.is-past{opacity:.7}
.ink-st-tk.is-cur{opacity:1}


/* ============ 4. 窄螢幕的一次性書寫 ============ */
.ink-st.is-flow .ink-st-copy{opacity:0;transform:translateY(22px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.ink-st.is-flow .ink-st-panel.on .ink-st-copy{opacity:1;transform:none;transition-delay:.25s}


/* ============ 5. 手機 ============ */
@media (max-width:820px){ .ink-st-runway{padding:0 20px} }
@media (max-width:759.98px){
  .ink-st-panel{grid-template-columns:minmax(0,1fr);gap:var(--s2);padding:var(--s4) 0}
}
@media (max-width:560px){ .ink-st-runway{padding:0 16px} }


/* ============ 關掉動態：直接給最終狀態，內容一個都不少 ============
   steps.js 在這種情況根本不會加 .is-pinned / .is-flow；這裡是第二道保險。 */
@media (prefers-reduced-motion:reduce){
  .ink-st .ink-st-ink,.ink-st .ink-st-wet{-webkit-mask-image:none !important;mask-image:none !important}
  .ink-st .ink-st-ghost,.ink-st .ink-st-wet{display:none !important}
  .ink-st .ink-st-copy{opacity:1 !important;transform:none !important;transition:none !important}
  .ink-st .ink-st-glyph{transform:none !important}
  .ink-st-dot.is-dudu{animation:none}
  .ink-st-tk{transition:none}
}

@media print{
  .ink-st .ink-st-ink{-webkit-mask-image:none !important;mask-image:none !important}
  .ink-st .ink-st-ghost,.ink-st .ink-st-wet,.ink-st .ink-st-bar{display:none !important}
  .ink-st .ink-st-copy{opacity:1 !important;transform:none !important}
}