/* ============================================================
   codudo 首頁「一筆到底」story.css（搭配 story.js，DESIGN.md 第 18 章）
   一筆墨從首屏的 SCROLL 開始，沿著左右的邊往下寫，經過每一段就變成那一段的東西，最後落進結尾的 ○•。
   - 文件上的筆畫放在 .ink-story（墊在最上面一層、不擋點擊）；釘住的段落裡的筆畫放在那個舞台裡（z-index:-1：在字跟圖的下面）
   - 只動 stroke-dashoffset（遮罩那條中線）跟筆尖那一點的位置；寫完的那段拿掉遮罩
   - 只有黑白灰：筆＝var(--paper)，靠整組的透明度退到背景；圓角只有 0 或 var(--r)
   沒有 JS：story.js 不建立任何東西。關掉動態、列印：不畫（內容本來就全部在）。
   ============================================================ */

.ink-story{position:absolute;left:0;top:0;width:100%;height:0;z-index:1;pointer-events:none;overflow-x:clip}   /* 右邊那條筆的暈不能把手機頁面撐寬（量過：375 變 385） */
.ink-story-leg{position:absolute;display:block;overflow:visible;pointer-events:none;z-index:-1}
.ink-story .ink-story-leg{z-index:auto}

/* 墨身：退到背景（一屏一個主角，這一筆是串場，不是主角） */
.ink-story-leg .k{opacity:.58}
.ink-story-leg .b{fill:var(--paper)}
.ink-story-leg .e{fill:var(--paper);opacity:.28}          /* 濕邊：外擴不到一個像素，很淡（不是外圈的光） */
.ink-story-leg .m{fill:none;stroke:var(--paper);stroke-linecap:round;stroke-linejoin:round}   /* 遮罩裡那條線：只拿它的形狀，畫面上看不到 */
/* 收筆那一段：越寫越淡，落進結尾那個淡淡的大圓相 */
.ink-story-leg .k.is-fade .b,.ink-story-leg .k.is-fade .e{fill:inherit}
.ink-story-leg .s0{stop-color:var(--paper);stop-opacity:1}
.ink-story-leg .s1{stop-color:var(--paper);stop-opacity:.3}
/* 筆尖：一點（嘟） */
.ink-story-leg .h{fill:var(--paper);opacity:0}

/* 段落之間的留白收一點：捲動敘事裡每一屏都要有東西（DESIGN 第 18 章：任何位置空著的不超過半屏）；
   打字機那段的舞台底下本來就有一截空的，後面那段再收一點 */
html.cd-story .ink-section{padding-top:var(--s6);padding-bottom:var(--s6)}
html.cd-story .ink-film.is-live + .ink-section{padding-top:var(--s5)}

/* 三步的進度線：那一筆就是進度線，原本的 1px 填色收起來（底線、刻度、點都留著） */
html.cd-story .ink-st.is-pinned .ink-st-fill{opacity:0}

/* 「找真人聊聊」：後台沒有給連結時不出現（.ink-btn 的 display 會蓋過 hidden） */
.ink-btn[hidden]{display:none}

@media (prefers-reduced-motion:reduce){ .ink-story{display:none} }
@media print{ .ink-story,.ink-story-leg{display:none!important} }