/* ============================================================
   codudo 墨系統 — 以前／現在：一筆抹掉  scrub.css
   搭配 theme/scrub.js。要在 codudo.css、fx.css 之後載入。

   一支垂直的筆刷把手：左邊是「現在」乾淨的三步，右邊是「以前」塞滿的八步。
   把手往右拖，痛苦被一筆抹掉 —— 這就是「一墨」。

   三種長相
     沒有 JS     ：上下兩塊（現在在上、以前在下、以前全部劃掉），內容一樣多
     .is-live    ：scrub.js 確認可用後才加，變成滑桿版
     關掉動態    ：停在 62%，過渡全關，滑桿照樣能用

   守則
     顏色只用 :root 的變數；mask 不透明端用 var(--paper)、透明端用 transparent。
     圓角只有 0 或 var(--r)。字級只有 var(--t-*)。
     只動 transform / opacity / clip-path。位置由 JS 寫進 --sc-x（百分比）與 --sc-px（像素）。
   ============================================================ */

/* 把手推到 0% 或 100% 時，握把有一半在舞台外面 —— 在段落這層收掉，手機不會長出水平捲軸 */
.ink-sc{overflow:hidden}
@supports (overflow:clip){ .ink-sc{overflow:clip} }

/* ============ 舞台 ============ */
.ink-sc-stage{position:relative;max-width:900px;margin-top:var(--s5);
  border:1px solid var(--line);border-radius:0;background:var(--ink-0)}

/* 左上「現在」、右上「以前」 */
.ink-sc-label{font-family:var(--f-mono);font-size:var(--t-tag);font-weight:400;line-height:1;
  letter-spacing:.42em;text-transform:uppercase;color:var(--paper-35);margin-bottom:var(--s3)}

/* ============ 現在：三步，大字白色，疏朗 ============ */
.ink-sc-now{position:relative;padding:var(--s4) var(--s3)}
.ink-sc-steps{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.ink-sc-steps li{display:block}
.ink-sc-steps i{display:block;font-family:var(--f-mono);font-style:normal;font-size:var(--t-note);
  line-height:1;letter-spacing:.2em;color:var(--paper-35);margin-bottom:10px}
/* keep-all + <wbr>：只在指定的地方換行，「點「對」」不會被拆成兩半 */
.ink-sc-t{display:block;font-family:var(--f-serif);font-weight:900;font-size:var(--t-step);
  line-height:1.25;letter-spacing:-.01em;color:var(--paper);
  word-break:keep-all;overflow-wrap:anywhere}

/* ============ 以前：八步，灰、擠、有點亂 ============ */
.ink-sc-old{position:relative;padding:var(--s4) var(--s3);border-top:1px solid var(--line)}
.ink-sc-mess{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.ink-sc-mess li{position:relative;display:block;max-width:100%;
  font-family:var(--f-sans);font-size:var(--t-body);font-weight:300;line-height:1.5;
  color:var(--paper-35);background:var(--ink-0);border:1px solid var(--line-soft);
  border-radius:0;padding:10px 14px}
.ink-sc-mess i{font-family:var(--f-mono);font-style:normal;font-size:var(--t-note);
  letter-spacing:.1em;margin-right:8px}
/* 刪除線的位置先留好：每一行文字的正中間一條 1px 線（換成兩行就兩條）。
   用 scaleX 從左畫到右，不碰 width。 */
.ink-sc-mess li::after{content:"";position:absolute;left:10px;right:10px;top:10px;bottom:10px;
  pointer-events:none;transform-origin:0 50%;
  background:repeating-linear-gradient(180deg,
    transparent 0 calc(var(--t-body) * .75 - .5px),
    var(--paper-60) 0 calc(var(--t-body) * .75 + .5px),
    transparent 0 calc(var(--t-body) * 1.5))}

/* 下面這些只有滑桿版才有 */
.ink-sc-tangle,.ink-sc-veil,.ink-sc-handle{display:none}


/* ============================================================
   滑桿版（scrub.js 確認可用後才給 section 加 .is-live）
   底下是手機版；821px 以上在檔案後段改成散落的便條。
   ============================================================ */
.ink-sc.is-live .ink-sc-stage{display:grid;grid-template-columns:minmax(0,1fr);min-height:440px;
  touch-action:pan-y pinch-zoom;cursor:col-resize;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent}
.ink-sc.is-live .ink-sc-stage.is-drag{cursor:grabbing}

/* 兩層疊在同一格：舞台高度自動取比較高的那一層，手機自己會變高 */
.ink-sc.is-live .ink-sc-now,
.ink-sc.is-live .ink-sc-old{grid-area:1/1;min-width:0;overflow:hidden}

.ink-sc.is-live .ink-sc-old{z-index:1;border-top:0;display:flex;align-items:center;
  padding:60px var(--s2) var(--s3)}
/* 上層「現在」：不透明的黑紙，只露出把手左邊 */
.ink-sc.is-live .ink-sc-now{z-index:2;display:flex;align-items:center;background:var(--ink-0);
  padding:60px 18px var(--s3);
  -webkit-clip-path:inset(0 calc(100% - var(--sc-x, 62%)) 0 0);
          clip-path:inset(0 calc(100% - var(--sc-x, 62%)) 0 0)}

.ink-sc.is-live .ink-sc-label{position:absolute;top:24px;margin:0}
.ink-sc.is-live .ink-sc-now .ink-sc-label{left:20px}
/* 字距會在最後一個字後面多留一段，往右補回來才會貼齊右邊 */
.ink-sc.is-live .ink-sc-old .ink-sc-label{right:20px;margin-right:-.42em}

/* 手機：三步收在左邊 58% 以內，預設停在 62% 時整句都看得到 */
.ink-sc.is-live .ink-sc-steps{flex:1 1 auto;min-width:0;max-width:58%}
/* 還沒抹到的步驟先暗著，抹過去才依序亮起 */
.ink-sc.is-live .ink-sc-steps li{opacity:.2;transform:translate3d(-12px,0,0);
  transition:opacity .5s var(--ease),transform .8s var(--ease)}
.ink-sc.is-live .ink-sc-steps li.is-lit{opacity:1;transform:none}

/* 手機的「以前」：兩欄擠在一起，每張都歪一點，像塞滿的便條 */
.ink-sc.is-live .ink-sc-mess{flex:1 1 auto;min-width:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:center}
.ink-sc.is-live .ink-sc-mess li:nth-child(1){transform:rotate(-1.2deg)}
.ink-sc.is-live .ink-sc-mess li:nth-child(2){transform:translate3d(0,6px,0) rotate(1deg)}
.ink-sc.is-live .ink-sc-mess li:nth-child(3){transform:translate3d(0,-4px,0) rotate(.8deg)}
.ink-sc.is-live .ink-sc-mess li:nth-child(4){transform:translate3d(0,4px,0) rotate(-1.6deg)}
.ink-sc.is-live .ink-sc-mess li:nth-child(5){transform:rotate(1.4deg)}
.ink-sc.is-live .ink-sc-mess li:nth-child(6){transform:translate3d(0,8px,0) rotate(-.8deg)}
.ink-sc.is-live .ink-sc-mess li:nth-child(7){transform:translate3d(0,-2px,0) rotate(-1deg)}
.ink-sc.is-live .ink-sc-mess li:nth-child(8){transform:translate3d(0,4px,0) rotate(1.6deg)}

/* 把手經過才把刪除線畫出來；退回去就收回 */
.ink-sc.is-live .ink-sc-mess li::after{transform:scaleX(0);transition:transform .5s var(--ease)}
.ink-sc.is-live .ink-sc-mess li.is-wiped::after{transform:scaleX(1)}

/* 墨的邊：把手左側 24px 一道羽化的暈。放在「現在」層裡，跟著被裁，不會跑出舞台 */
.ink-sc.is-live .ink-sc-veil{display:block;position:absolute;left:0;top:0;bottom:0;width:24px;
  pointer-events:none;background:var(--paper);opacity:.07;
  transform:translate3d(calc(var(--sc-px, 0px) - 24px),0,0);
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--paper));
          mask-image:linear-gradient(90deg,transparent,var(--paper))}


/* ============ 把手：一條墨線＋○• 握把 ============ */
/* 整條直線都算把手（可聚焦、帶 data-cursor）。連握把在內全部是 pan-y pinch-zoom：
   直向滑一定能捲頁、兩指一定能放大字；橫向一滑就是在抹（橫向不會被瀏覽器拿走）。 */
.ink-sc.is-live .ink-sc-handle{display:block;position:absolute;z-index:3;top:0;bottom:0;left:-28px;
  width:56px;transform:translate3d(var(--sc-px, 0px),0,0);touch-action:pan-y pinch-zoom;outline:0}
/* 示範前把手還看不見：不讓看不見的握把被點到（Tab 聚焦不受影響） */
.ink-sc.is-live .ink-sc-handle:not(.is-shown){pointer-events:none}

/* 墨線：上下收筆變細、中段加壓。進場時由上往下落一筆 */
.ink-sc-line{position:absolute;left:16px;top:0;display:block;width:24px;height:100%;
  overflow:visible;fill:var(--paper);pointer-events:none;
  -webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);
  transition:-webkit-clip-path 1s var(--ease),clip-path 1s var(--ease)}
.ink-sc-handle.is-shown .ink-sc-line{-webkit-clip-path:inset(0);clip-path:inset(0)}
/* 飛白：旁邊兩縷斷開的細毛 */
.ink-sc-line .ink-sc-bristle{opacity:.45}

/* 握把：可點範圍 56px，比長輩的指尖大 */
.ink-sc-grip{position:absolute;left:0;top:50%;display:block;width:56px;height:56px;margin-top:-28px;
  border-radius:var(--r);touch-action:pan-y pinch-zoom;cursor:grab;transition:transform .45s var(--ease)}
@media (hover:hover){ .ink-sc-handle:hover .ink-sc-grip{transform:scale(1.08)} }
/* 權重要高過上面的 hover：拖的時候滑鼠一定停在握把上，按下去要縮，不是放大 */
.ink-sc-stage.is-drag .ink-sc-handle .ink-sc-grip{transform:scale(.94);cursor:grabbing}

/* 黑底圓片墊在標誌後面，墨線不會穿過圓心 */
.ink-sc-mark{position:absolute;left:0;top:0;width:56px;height:56px;display:block;border-radius:var(--r);
  background:var(--ink-0);opacity:0;transform:scale(.6);
  transition:opacity .4s var(--ease) .3s,transform .7s var(--ease) .3s}
.ink-sc-handle.is-shown .ink-sc-mark{opacity:1;transform:none}
/* ○• 跟品牌標誌同一條路徑。圓心對準墨線（x=28），點坐在右下 */
.ink-sc-mark svg{position:absolute;left:11px;top:11.5px;display:block;width:44px;height:33px;
  fill:var(--paper);overflow:visible}
.ink-sc-dot{transform-box:fill-box;transform-origin:50% 100%}
/* 抹到底：點嘟嘟嘟跳三下 */
.ink-sc-grip.is-dudu .ink-sc-dot{animation:ink-sc-dudu .78s var(--ease)}
@keyframes ink-sc-dudu{
  0%  { transform:none }
  12% { transform:translateY(-62%) scale(.92,1.1) }
  22% { transform:translateY(0) scale(1.22,.8) }
  36% { transform:translateY(-40%) scale(.95,1.06) }
  46% { transform:translateY(0) scale(1.14,.86) }
  60% { transform:translateY(-20%) }
  70% { transform:translateY(0) scale(1.06,.94) }
  100%{ transform:none }
}

/* 鍵盤聚焦：框住握把，不框整條直線。2px var(--paper-60)：對黑底約 6:1，長輩看得出焦點在哪。
   先用 :focus 打底（不支援 :focus-visible 的舊瀏覽器也有框），再把滑鼠點出來的焦點拿掉。
   兩條規則要分開寫：舊瀏覽器看不懂第二條會整條丟掉，第一條照樣有效。 */
.ink-sc.is-live .ink-sc-handle:focus .ink-sc-mark{outline:2px solid var(--paper-60);outline-offset:4px}
.ink-sc.is-live .ink-sc-handle:focus:not(:focus-visible) .ink-sc-mark{outline:0}

/* 「拖拖看」：示範完出現在握把正下方，一碰就收。
   這是唯一的操作說明，字級用內文下限 var(--t-body)。高約 36px，從握把圓心往下 40px 起：不壓到 28px 半徑的握把 */
.ink-sc-hint{position:absolute;left:50%;top:50%;margin-top:40px;display:block;white-space:nowrap;
  font-family:var(--f-sans);font-size:var(--t-body);font-weight:400;line-height:1.4;letter-spacing:.12em;
  color:var(--paper-60);background:var(--ink-0);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 12px 6px 14px;pointer-events:none;
  opacity:0;transform:translate3d(-50%,6px,0);
  transition:opacity .45s var(--ease),transform .6s var(--ease)}
.ink-sc-hint.is-on{opacity:1;transform:translate3d(-50%,0,0)}


/* ============================================================
   821px 以上：大字三步排成往右下的階梯，八張便條散落在整個舞台
   （門檻跟 codudo.css 的手機斷點 820px 對齊）
   ============================================================ */
@media (min-width:821px){
  .ink-sc-t{font-size:var(--t-h2)}
  .ink-sc-now{padding:var(--s5) var(--s4) var(--s4)}
  .ink-sc-old{padding:var(--s4)}

  .ink-sc.is-live .ink-sc-now{padding:64px 48px 40px}
  .ink-sc.is-live .ink-sc-now .ink-sc-label{left:24px}
  .ink-sc.is-live .ink-sc-old .ink-sc-label{right:24px}
  .ink-sc.is-live .ink-sc-steps{max-width:none}
  .ink-sc.is-live .ink-sc-steps li:nth-child(2){margin-left:6%}
  .ink-sc.is-live .ink-sc-steps li:nth-child(3){margin-left:12%}

  .ink-sc.is-live .ink-sc-old{display:block;padding:0}
  .ink-sc.is-live .ink-sc-mess{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
  .ink-sc.is-live .ink-sc-mess li{position:absolute;white-space:nowrap}
  /* 左半邊用 left、右半邊用 right 錨定：舞台再窄也不會頂出右框 */
  .ink-sc.is-live .ink-sc-mess li:nth-child(1){left:4%;top:84px;transform:rotate(-1.8deg)}
  .ink-sc.is-live .ink-sc-mess li:nth-child(2){left:34%;top:70px;transform:rotate(1.2deg)}
  .ink-sc.is-live .ink-sc-mess li:nth-child(3){right:3%;top:96px;transform:rotate(-1deg)}
  .ink-sc.is-live .ink-sc-mess li:nth-child(4){left:12%;top:196px;transform:rotate(1.6deg)}
  .ink-sc.is-live .ink-sc-mess li:nth-child(5){left:48%;top:178px;transform:rotate(-2.2deg)}
  .ink-sc.is-live .ink-sc-mess li:nth-child(6){right:6%;top:214px;transform:rotate(2deg)}
  .ink-sc.is-live .ink-sc-mess li:nth-child(7){left:22%;top:318px;transform:rotate(-1deg)}
  .ink-sc.is-live .ink-sc-mess li:nth-child(8){right:10%;top:300px;transform:rotate(1.4deg)}

  /* 便條之間一條繞來繞去、最後繞回第一步的細線：「從頭再來一次」 */
  .ink-sc.is-live .ink-sc-tangle{display:block;position:absolute;left:0;top:0;width:100%;height:100%;
    overflow:visible;pointer-events:none}
  .ink-sc-tangle path{fill:none;stroke:var(--line-22);stroke-width:1}
}


/* ============ 關掉動態：直接給最終狀態，滑桿照樣能用 ============ */
@media (prefers-reduced-motion:reduce){
  .ink-sc-stage *,
  .ink-sc-stage *::before,
  .ink-sc-stage *::after{transition:none !important;animation:none !important}
  .ink-sc-handle .ink-sc-line{-webkit-clip-path:none;clip-path:none}
  .ink-sc-handle .ink-sc-mark{opacity:1;transform:none}
}