/* ============================================================
   codudo 墨系統 — 質感特效層 fx.css
   搭配 theme/fx.js。所有 DOM 由 fx.js 自己注入，HTML 不用改。
   要在 codudo.css 之後載入（這裡有幾條要蓋掉它的進場動畫）。

   守則
     顏色只用 :root 的變數。mask 漸層照 alpha 算，不透明端用 var(--paper)，透明端用 transparent。
     圓角只有 var(--r)。字級只有 var(--t-*)。
     動效只動 transform / opacity / mask / stroke-dashoffset，曲線一律 var(--ease)。
   ============================================================ */


/* ============ 1. 游標光圈 ○• ============
   系統游標照樣看得到（長輩要找得到自己的游標），這圈只是陪著走、晚一拍。
   外層 .ink-cursor 的位置由 JS 每格寫 transform，所以外層「不准」加 transform 的 transition。 */
.ink-cursor{position:fixed;left:0;top:0;width:0;height:0;z-index:9999;pointer-events:none;
  opacity:0;transition:opacity .3s var(--ease);will-change:transform;mix-blend-mode:difference}
.ink-cursor.is-on{opacity:1}
.ink-cur-in{position:absolute;left:0;top:0;transition:transform .3s var(--ease)}
.ink-cursor.is-down .ink-cur-in{transform:scale(.88)}

.ink-cur-ring,.ink-cur-big,.ink-cur-dot{position:absolute;display:block;border-radius:var(--r)}
/* 平常：34px 細圈 */
.ink-cur-ring{left:-17px;top:-17px;width:34px;height:34px;border:1px solid var(--line-30);
  transition:transform .5s var(--ease),opacity .35s var(--ease)}
/* 指到能按的東西：換成 56px 白圈。用另一顆圈交叉淡入，邊框才不會被放大成 1.6px 的粗線 */
.ink-cur-big{left:-28px;top:-28px;width:56px;height:56px;border:1px solid var(--paper);
  opacity:0;transform:scale(.607);transition:transform .5s var(--ease),opacity .35s var(--ease)}
/* 右下那一點「嘟」。圈＋點 = 品牌標誌 ○• */
.ink-cur-dot{left:25px;top:17px;width:6px;height:6px;background:var(--paper);
  opacity:0;transform:scale(0);transition:transform .4s var(--ease),opacity .3s var(--ease)}

.ink-cursor.is-hover .ink-cur-ring{opacity:0;transform:scale(1.647)}
.ink-cursor.is-hover .ink-cur-big{opacity:1;transform:none}
.ink-cursor.is-hover .ink-cur-dot{opacity:1;transform:none;transition-delay:.12s}
/* 在輸入框上：整圈收掉，打字時不要干擾 */
.ink-cursor.is-text .ink-cur-ring,
.ink-cursor.is-text .ink-cur-big,
.ink-cursor.is-text .ink-cur-dot{opacity:0;transform:scale(0);transition-delay:0s}


/* ============ 2. 一墨成行的墨線（捲動進度） ============
   左側一條很淡的手繪直線。底線幾乎看不見，進度線照捲動長出來，最前端一顆嘟。 */
.ink-rail{position:fixed;left:20px;top:18vh;width:20px;height:64vh;z-index:40;pointer-events:none;
  opacity:0;transition:opacity .9s var(--ease)}
.ink-rail.is-live{opacity:1}
.ink-rail-svg{display:block;width:20px;height:100%;overflow:visible}
.ink-rail-base{fill:none;stroke:var(--line-soft);stroke-width:1}
.ink-rail-prog{fill:none;stroke:var(--paper-60);stroke-width:1;stroke-linecap:butt}
.ink-rail-head{fill:var(--paper)}
.ink-rail-tick{stroke:var(--paper-60);stroke-width:1;opacity:.28;
  transform-box:fill-box;transform-origin:center;
  transition:opacity .4s var(--ease),transform .5s var(--ease)}
.ink-rail-tick.is-past{opacity:.55}
.ink-rail-tick.is-cur{opacity:1;transform:scaleX(1.5)}
/* 目前段落的小標籤：直書、貼在線的左邊，不跟內文搶位置 */
.ink-rail-tag{position:absolute;top:0;right:19px;writing-mode:vertical-rl;
  font-family:var(--f-mono);font-size:var(--t-tag);line-height:1;letter-spacing:.32em;
  text-transform:uppercase;color:var(--paper-35);white-space:nowrap;
  transition:opacity .3s var(--ease)}
.ink-rail-tag.is-swap{opacity:0}
/* 門檻 1200：min-width 含捲軸寬，Windows 17px 捲軸下內文左緣約在 83px，跟刻度和嘟點（最右 36px）至少隔 47px。
   要跟 fx.js 的 mWide 一致 */
@media (max-width:1199.98px){ .ink-rail{display:none} }


/* ============ 3. 磁吸按鈕 ============
   位移由 fx.js 寫在 inline transform。
   .ink-btn / .go / .ink-hold 原本就有「全屬性 var(--ease)」的 transition，transform 直接吃那一條，
   這裡不另外定義，免得改到原本 hover 的節奏。 */


/* ============ 4. 筆刷顯影大標 ============
   原本的 .ink-up 是「模糊＋上移＋淡入」。大標改成一筆刷過去：只吃遮罩，不吃模糊與位移。 */
@property --ink-p{syntax:'<percentage>';inherits:false;initial-value:-15%}

/* 退路：不支援 @property 的瀏覽器 —— 單純淡入 */
html.js .ink-h2.ink-up{transform:none;filter:none}
html.js .ink-h2.ink-up.on{transition:opacity var(--dur) var(--ease)}

/* 支援時（fx.js 確認後給 <html> 加 .ink-brush） */
html.js.ink-brush .ink-h2.ink-up{opacity:1;transform:none;filter:none;--ink-p:-15%;
  -webkit-mask-image:linear-gradient(90deg,var(--paper) var(--ink-p),transparent calc(var(--ink-p) + 14%));
          mask-image:linear-gradient(90deg,var(--paper) var(--ink-p),transparent calc(var(--ink-p) + 14%))}
html.js.ink-brush .ink-h2.ink-up.on{--ink-p:115%;transition:--ink-p 1.1s var(--ease)}
/* 刷完就把遮罩拿掉，不留一層常駐的合成負擔 */
html.js.ink-brush .ink-h2.ink-up.on.ink-inked{-webkit-mask-image:none;mask-image:none}


/* ============ 5. 術語牆的一筆抹掉 ============
   一條羽化邊緣的筆刷帶從左掃到右，刪除線跟著它走（延遲由 fx.js 量位置算好寫進 --d）。 */
.ink-jargon{position:relative;overflow:hidden}
.ink-sweep{position:absolute;left:0;top:0;bottom:0;width:18%;display:block;pointer-events:none;
  background:var(--paper);opacity:0;transform:translateX(-100%) skewX(-12deg);
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--paper) 40%,var(--paper) 60%,transparent);
          mask-image:linear-gradient(90deg,transparent,var(--paper) 40%,var(--paper) 60%,transparent)}
/* 位移與淡入淡出拆成兩支動畫：位移整段吃 var(--ease)，不被中間的關鍵影格切斷。
   淡入淡出的時間點要對齊位移的 ease-out：照 cubic-bezier(.16,.84,.26,1) 算，
   帶子中心約在 0.38 秒（42%）走到牆的右緣，所以 3%～42% 全亮、42%～60% 收掉，之後全透明。 */
.ink-jargon.on .ink-sweep{animation:ink-sweep-x .9s var(--ease) both,ink-sweep-o .9s var(--ease) both}
@keyframes ink-sweep-x{
  from{transform:translateX(-100%) skewX(-12deg)}
  to{transform:translateX(560%) skewX(-12deg)}
}
@keyframes ink-sweep-o{0%{opacity:0}3%{opacity:.09}42%{opacity:.09}60%{opacity:0}100%{opacity:0}}
/* 蓋掉 codudo.css 的 nth-child 延遲，改成跟著筆刷的位置 */
.ink-jargon.on span::after{transition-delay:var(--d,0s) !important}


/* ============ 關掉動態：直接給最終狀態，內容一個都不少 ============ */
@media (prefers-reduced-motion:reduce){
  html.js .ink-h2.ink-up,
  html.js.ink-brush .ink-h2.ink-up,
  html.js.ink-brush .ink-h2.ink-up.on{opacity:1;transform:none;filter:none;
    -webkit-mask-image:none;mask-image:none;transition:none}
  .ink-sweep{display:none}
  /* 權重要跟上面的 .ink-jargon.on span::after 一樣、寫在後面，延遲才會真的歸零 */
  .ink-jargon span::after,
  .ink-jargon.on span::after{transition:none !important;transition-delay:0s !important}
  .ink-cursor{display:none}
  .ink-rail,.ink-rail-tick,.ink-rail-tag{transition:none}
}

/* 觸控裝置：游標圈不該出現（fx.js 也不會建立它，這裡是第二道保險） */
@media (pointer:coarse){ .ink-cursor{display:none} }
@media print{ .ink-cursor,.ink-rail,.ink-sweep{display:none} }