/* ============================================
   Az-design 的站标
   一条钢笔工具画出来的贝塞尔曲线，橙点是它顶端的锚点。

   为什么是这个：家族里主站是 ^、Az-term 是 >，两个都是**字形感**的线条符号；
   所以这里也得是一笔线条，不能是几何色块。橙点必须长在图形上有名分
   （这里是曲线的锚点），飘在角落里就成了未读小红点。
   跟 favicon 是同一个图形。
   ============================================ */

/* ⚠ 特异度提醒（跟 Az-term 官网踩的是同一个坑）：
   共享的 style.css 给所有 .site-logo .logo-mark svg path 铺了
   stroke-dasharray:48 和 logo-draw 动画。那一套是给主站「^ 描边 + 圆点弹出」
   写的，套到这个图形上会把实心的半圆也一起卷进去。
   所以先把那套关掉，再按这个图形自己写一套；下面每条都要比关闭规则更具体
   （多带一个 path.类名），否则自己的动画会被自己关掉。 */

.site-header .site-logo .logo-mark svg path { stroke-dasharray: none; }
.site-header .site-logo .logo-mark:hover svg path { animation: none; }

/* dasharray 要正好等于路径长度，多给了动画最后一段就是空转。
   这条曲线（M13 35 C13 21 31 27 31 15）采样积分出来是 29.22，
   圆头端帽两头各多出半个线宽，视觉总长 34.2，取 35 收得干净。 */
.site-header .site-logo .logo-mark svg path.lm-curve {
  stroke-dasharray: 35;
  stroke-dashoffset: 0;
}

/* 橙点落在右下 —— 那是曲线让出来的空处。跟主站 ^ 把点搁在右上空缺里
   是同一个关系：图形占一头，点补另一头，两下把方块撑满。
   它是点睛之笔，不是曲线的锚点，所以位置不跟路径端点绑。

   生长顺序照这个含义走：笔先画完，最后那一点才落下。
   要调节奏就动这两个数：draw 的时长、pop 的延迟（延迟略小于 draw 时长，
   让点在笔画将收未收时落下，两段接得上气）。

   缓动不能用全站那个 --ease（cubic-bezier(.2,.8,.2,1)）：它头部极度前倾，
   前两成时间就跑完八成进度。路径长的时候看不出来，这条曲线只有 35 个单位，
   套上去就是"唰"地整条线蹦出来，剩下的时间在慢慢收尾 —— 看着就快。
   描边换成两头都缓的曲线，才像一支笔真的在画。 */
.site-header .site-logo .logo-mark {
  --lm-ease: cubic-bezier(.55, .06, .3, 1);
}

.site-header .site-logo .logo-mark:hover svg path.lm-curve {
  animation: lm-draw .78s var(--lm-ease) both;
}

/* 点睛那一下要短促才有劲，用回全站那条前倾的缓动 */
.site-header .site-logo .logo-mark:hover svg circle {
  animation: lm-pop .38s .62s var(--ease) both;
}

@keyframes lm-draw { from { stroke-dashoffset: 35; } to { stroke-dashoffset: 0; } }
@keyframes lm-pop {
  0% { transform: scale(0); }
  68% { transform: scale(1.32); }
  100% { transform: scale(1); }
}

/* 关掉动画偏好的人，只留静态图形 */
@media (prefers-reduced-motion: reduce) {
  .site-header .site-logo .logo-mark:hover svg * { animation: none !important; }
}

/* 站名。不叫 .wordmark 是为了避开主站 site.js 挂在那个类上的彩蛋，
   样式在这里补回来。 */
.site-logo .brand-name {
  font-weight: 500;
  letter-spacing: -.01em;
  font-size: 16px;
}
.site-logo .brand-name b { color: var(--brand); font-weight: 700; }
@media (max-width: 520px) { .site-logo .brand-name { display: none; } }