/* ============================================================
codudo 標誌 ○• v3.0
○ 圓相：一筆墨畫成的圓。起筆鈍、中段兩次加壓、收筆飛細，右上留一個缺口。
• 嘟：一次按鍵。坐在圓的右下、貼著底線，像一個句點。
codudo = coding + 嘟嘟嘟，所以這個點會跳 —— 滑過時跳三下，辦事中一直跳。
全站沒有轉圈的讀取動畫，因為標誌本身就是。
結構（每個用到標誌的地方都長這樣）：
codudo
靜態優先：沒有 CSS 動畫、沒有 JS、關掉動態，標誌照樣完整。
圓的「畫出來」用 conic 遮罩沿角度掃，不靠 id，同一頁放幾個都不會互吃。
============================================================ */
/* 初值要超過 360°+羽化寬度，不然靜態時起筆鈍頭會被羽化邊吃掉一角（量過） */
@property --cd-a{ syntax:''; inherits:false; initial-value:380deg }
.cd-logo{
--cd-size:30px; /* 要改大小只改這一個 */
--cd-draw:.95s; /* 圓畫完要多久 */
--cd-wait:.15s;
display:inline-flex;align-items:center;gap:calc(var(--cd-size) * .3);
color:var(--paper,#fff);text-decoration:none;line-height:1;
-webkit-tap-highlight-color:transparent;
}
.cd-mark{position:relative;display:block;flex:none;
height:var(--cd-size);width:calc(var(--cd-size) * 1.3)}
/* ○ 圓相 */
.cd-ring{position:absolute;left:0;top:0;height:100%;width:auto;aspect-ratio:1/1;
fill:currentColor;overflow:visible;
/* 起筆在右上偏右（約兩點半），順時針掃一圈。
遮罩不透明端用 var(--paper)、透明端用 transparent，這兩個不是畫面顏色。 */
-webkit-mask-image:conic-gradient(from 60deg, var(--paper,white) calc(var(--cd-a) - 16deg), transparent var(--cd-a));
mask-image:conic-gradient(from 60deg, var(--paper,white) calc(var(--cd-a) - 16deg), transparent var(--cd-a));
animation:cd-draw var(--cd-draw) cubic-bezier(.55,.06,.3,1) var(--cd-wait) backwards}
@keyframes cd-draw{ from{--cd-a:0deg} to{--cd-a:380deg} }
/* • 嘟 */
.cd-dot{position:absolute;right:0;bottom:calc(var(--cd-size) * .1);
width:calc(var(--cd-size) * .2);height:calc(var(--cd-size) * .2);
border-radius:var(--r,999px);background:currentColor;
transform-origin:50% 100%;
animation:cd-drop .52s var(--ease,cubic-bezier(.16,.84,.26,1))
calc(var(--cd-wait) + var(--cd-draw) - .1s) backwards}
/* 從上面落下 → 著地壓扁 → 回彈 → 定住。這一下就是「嘟」 */
@keyframes cd-drop{
0% { transform:translateY(-320%) scale(.55,.55); opacity:0 }
48% { transform:translateY(0) scale(.86,1.14); opacity:1;
animation-timing-function:cubic-bezier(.2,.7,.3,1) }
62% { transform:translateY(0) scale(1.34,.66) }
80% { transform:translateY(-34%) scale(.94,1.06) }
100%{ transform:none; opacity:1 }
}
.cd-type{font-family:var(--f-sans,system-ui,sans-serif);font-size:calc(var(--cd-size) * .58);
font-weight:600;letter-spacing:.01em;color:currentColor}
/* ============ 嘟嘟嘟：滑過時點跳三下，一下比一下小 ============ */
.cd-logo:hover .cd-dot,
.cd-logo:focus-visible .cd-dot{ animation:cd-dudu .78s var(--ease,cubic-bezier(.16,.84,.26,1)) }
@keyframes cd-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 }
}
.cd-logo:focus-visible{outline:1px solid var(--line-30,rgba(255,255,255,.3));outline-offset:8px}
/* ============ 辦事中：點一直嘟嘟嘟，像有人在打字（取代讀取圈）============ */
.cd-logo.is-working .cd-dot{ animation:cd-dudu 1.15s var(--ease,cubic-bezier(.16,.84,.26,1)) infinite }
/* 辦好了：圓的缺口補上一小段光，跳最後一下 */
.cd-logo.is-done .cd-dot{ animation:cd-drop .52s var(--ease,cubic-bezier(.16,.84,.26,1)) }
/* ============ 重畫一次（JS 切換 .cd-again）============ */
.cd-logo.cd-again .cd-ring{ animation-name:cd-draw2 }
.cd-logo.cd-again .cd-dot{ animation-name:cd-drop2 }
@keyframes cd-draw2{ from{--cd-a:0deg} to{--cd-a:380deg} }
@keyframes cd-drop2{
0% { transform:translateY(-320%) scale(.55,.55); opacity:0 }
48% { transform:translateY(0) scale(.86,1.14); opacity:1 }
62% { transform:translateY(0) scale(1.34,.66) }
80% { transform:translateY(-34%) scale(.94,1.06) }
100%{ transform:none; opacity:1 }
}
/* ============================================================
開場：黑幕中央一個大標誌畫出來 → 嘟 → 放大溶進首屏
由 intro.js 注入，沒 JS 的人永遠不會被擋。一次瀏覽只播一次，可跳過。
============================================================ */
.ink-intro{position:fixed;inset:0;z-index:200;background:var(--ink-0,#070707);
display:grid;place-items:center;pointer-events:auto;cursor:pointer;
transition:opacity .7s var(--ease,cubic-bezier(.16,.84,.26,1)) .05s}
.ink-intro .cd-logo{--cd-size:clamp(64px,11vw,128px);--cd-draw:.9s;--cd-wait:.12s;
transition:transform 1s cubic-bezier(.7,0,.2,1), opacity .8s var(--ease,cubic-bezier(.16,.84,.26,1))}
.ink-intro .skip{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
font-family:var(--f-mono,monospace);font-size:var(--t-tag,11px);letter-spacing:.4em;
color:var(--paper-35,#5a5a5a);text-transform:uppercase}
.ink-intro.out{opacity:0;pointer-events:none}
.ink-intro.out .cd-logo{transform:scale(7);opacity:0}
html.cd-intro-on{overflow:hidden}
/* ============ 結尾的大圓相 ============ */
/* 整個大圓相＋點放在一層 opacity .12 裡，所以裡面的動畫可以放心從 0 跑到 1 */
.ink-enso{position:relative;display:grid;place-items:center;margin:0 auto}
.ink-enso-art{position:relative;display:block;width:min(540px,78vw);opacity:.13}
.ink-enso-art svg{display:block;width:100%;height:auto;fill:var(--paper,#fff);overflow:visible;
-webkit-mask-image:conic-gradient(from 60deg, var(--paper,white) calc(var(--cd-a) - 16deg), transparent var(--cd-a));
mask-image:conic-gradient(from 60deg, var(--paper,white) calc(var(--cd-a) - 16deg), transparent var(--cd-a))}
.js .ink-enso-art svg{--cd-a:0deg}
.js .ink-enso.on .ink-enso-art svg{animation:cd-draw 1.8s cubic-bezier(.55,.06,.3,1) forwards}
.ink-enso-dot{position:absolute;width:15.4%;aspect-ratio:1/1;border-radius:var(--r,999px);
background:var(--paper,#fff);right:-22%;bottom:10.5%;transform-origin:50% 100%}
.js .ink-enso-dot{opacity:0}
.js .ink-enso.on .ink-enso-dot{animation:cd-drop .7s var(--ease,cubic-bezier(.16,.84,.26,1)) 1.6s forwards}
.ink-enso-copy{position:absolute;inset:0;display:grid;place-items:center;text-align:center;z-index:2}
/* ============ 關掉動態：直接給完整標誌 ============ */
@media (prefers-reduced-motion:reduce){
.cd-ring,.cd-dot,
.cd-logo:hover .cd-dot,.cd-logo.is-working .cd-dot,.cd-logo.is-done .cd-dot{animation:none}
.ink-intro{display:none}
.js .ink-enso-art svg{--cd-a:380deg;animation:none}
.js .ink-enso-dot{opacity:1;animation:none}
}