/* ==========================================================
   effects.css — Google 式「标注」动效：动态划线、动态加粗、
   动态背景、手绘圈注、神秘小图标
   标注在进入视口时由 js/annotate.js 加上 .is-on 触发
   ========================================================== */

.mk {
  position: relative; display: inline; white-space: nowrap;
  font-weight: 400;
  transition: font-weight 0.9s var(--ease-out), color 0.9s var(--ease-out), letter-spacing 0.9s var(--ease-out);
}
.mk.is-on { font-weight: 700; }

/* 1) 手绘下划线（SVG 描边动画） */
.mk-line { padding-bottom: 0.12em; }
.mk-line svg {
  position: absolute; left: -4%; width: 108%; bottom: -0.32em; height: 0.6em;
  overflow: visible; pointer-events: none;
}
.mk-line path {
  fill: none; stroke: url(#mkGrad); stroke-width: 3.2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-out);
  transition-delay: var(--md, 0s);
}
.mk-line.is-on path { stroke-dashoffset: 0; }

/* 2) 动态背景高亮（从左向右刷入） */
.mk-hl {
  background-image: linear-gradient(100deg, rgba(201, 180, 255, 0.0) 0%, rgba(201, 180, 255, 0.75) 6%, rgba(218, 119, 86, 0.32) 100%);
  background-repeat: no-repeat; background-position: 0 88%;
  background-size: 0% 46%;
  border-radius: 4px; padding: 0 0.12em; margin: 0 -0.06em;
  transition: background-size 1.2s var(--ease-out), font-weight 0.9s var(--ease-out);
  transition-delay: var(--md, 0s);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  white-space: normal;
}
.mk-hl.is-on { background-size: 100% 46%; }
.mk-hl:hover { background-size: 100% 100%; }

/* 3) 手绘圈注 */
.mk-circle svg {
  position: absolute; left: -14%; top: -38%; width: 128%; height: 176%;
  overflow: visible; pointer-events: none;
}
.mk-circle path {
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.85;
  transition: stroke-dashoffset 1.4s var(--ease-out);
  transition-delay: var(--md, 0s);
}
.mk-circle.is-on path { stroke-dashoffset: 0; }
.mk-circle.is-on { color: var(--purple-5); }

/* 4) 神秘小图标（星芒 / 符号），标注旁浮现 */
.mk-glyph {
  position: absolute; width: 0.72em; height: 0.72em; top: -0.62em; right: -0.66em;
  opacity: 0; transform: scale(0) rotate(-90deg);
  transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-spring);
  transition-delay: calc(var(--md, 0s) + 0.55s);
  pointer-events: none;
}
.mk.is-on .mk-glyph { opacity: 1; transform: scale(1) rotate(0deg); }
.mk-glyph svg { width: 100%; height: 100%; animation: glyphSpin 7s linear infinite; }
.mk-glyph svg * { fill: var(--purple-4); }
.mk:nth-of-type(3n) .mk-glyph svg * { fill: var(--accent); }
@keyframes glyphSpin { to { transform: rotate(360deg); } }

/* 悬停时下划线轻微抖动重绘 */
.mk-line:hover path { animation: redraw 0.9s var(--ease-out); }
@keyframes redraw { 0% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }

/* ==========================================================
   chrome.com「打造」式：滚动驱动的逐字着色 / 渐变扫光
   ========================================================== */
.fill-text { color: rgba(245, 243, 238, 0.14); }
.fill-text .fc {
  transition: color 0.35s linear, text-shadow 0.35s linear;
}
.fill-text .fc.is-lit {
  color: #f5f3ee;
  text-shadow: 0 0 28px rgba(155, 123, 240, 0.55);
}
.fill-text .fc.is-lit.is-hot {
  background: var(--grad-text); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradFlow 6s linear infinite;
}

/* 光泽扫过（用于卡片标题等） */
.shine {
  position: relative;
  background: linear-gradient(110deg, var(--ink) 40%, var(--purple-3) 50%, var(--ink) 60%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position 1.6s var(--ease-out);
}
.is-in .shine, .shine.is-in, a:hover .shine { background-position: -60% 0; }