/* ============================================================
   工作范围 · 六项微动画
   这一块是全站唯一的亮面，所以动画也只能用一支铅笔的力道：
   线条一笔一笔画出来，光点走一遍，然后停下。
   ============================================================ */

/* 初始态只在「脚本在跑 + 用户没要求减少动效」时才生效。
   两个条件任一不成立，看到的就是完整的静态插图，不会白屏。 */
@media (prefers-reduced-motion: no-preference){
  html.js .cap-card[data-mo] .mo-l{
    stroke-dasharray:100;
    stroke-dashoffset:100;
  }
  html.js .cap-card[data-mo] .mo-f{opacity:0}
  html.js .cap-card[data-mo] .mo-g{
    transform:scaleX(0);
    transform-box:fill-box;
    transform-origin:0% 50%;
  }
  html.js .cap-card[data-mo] .mo-p{
    opacity:0;
    transform:scale(.2);
    transform-box:fill-box;
    transform-origin:50% 50%;
  }
  /* 播放头与落点光晕：等前面的线画完才登场 */
  html.js .cap-card[data-mo] .mo-play,
  html.js .cap-card[data-mo] .mo-breathe{opacity:0}

  html.js .cap-card[data-mo].in .mo-l{
    animation:moDraw .92s cubic-bezier(.32,.72,.24,1) both;
    animation-delay:calc(var(--d,0s) + var(--cd,0s));
  }
  html.js .cap-card[data-mo].in .mo-f{
    animation:moFade .62s ease-out both;
    animation-delay:calc(var(--d,0s) + var(--cd,0s));
  }
  html.js .cap-card[data-mo].in .mo-g{
    animation:moGrow .86s cubic-bezier(.3,.72,.22,1) both;
    animation-delay:calc(var(--d,0s) + var(--cd,0s));
  }
  html.js .cap-card[data-mo].in .mo-p{
    animation:moPop .52s cubic-bezier(.2,1.45,.42,1) both;
    animation-delay:calc(var(--d,0s) + var(--cd,0s));
  }

  /* 时间轴上的播放头：走一遍就停，不无限循环，免得抢注意力 */
  html.js .cap-card[data-mo].in .mo-play{
    animation:moPlay 3.6s cubic-bezier(.5,.05,.5,.95) 1.45s 1 both;
  }
  /* 落点光晕：只有它是常驻的，呼吸很轻 */
  html.js .cap-card[data-mo].in .mo-breathe{
    animation:moBreathe 4.2s ease-in-out 1.2s infinite;
    transform-box:fill-box;
    transform-origin:50% 50%;
  }
}

@keyframes moDraw{
  from{stroke-dashoffset:100}
  to{stroke-dashoffset:0}
}
@keyframes moFade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes moGrow{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes moPop{
  0%{opacity:0;transform:scale(.2)}
  70%{opacity:1}
  100%{opacity:1;transform:scale(1)}
}
@keyframes moPlay{
  0%{transform:translateX(14px);opacity:0}
  9%{opacity:1}
  100%{transform:translateX(300px);opacity:.85}
}
@keyframes moBreathe{
  0%,100%{opacity:.4;transform:scale(.92)}
  50%{opacity:.9;transform:scale(1.06)}
}

/* 卡片本身：进入时轻微上浮，与内部描线同步，不抢节奏 */
html.js .cap-card[data-mo]{
  transition:opacity .7s cubic-bezier(.32,.72,.24,1),
             transform .7s cubic-bezier(.32,.72,.24,1),
             box-shadow .5s var(--ease),border-color .5s var(--ease);
}

/* 图注：给每张插图一行极小的英文标注，说明这张图在讲什么 */
.cap-fig-cap{
  display:block;margin-top:9px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#AEB9CB;
}

/* 标题里的编号与中文对齐更稳 */
.cap-card h4{letter-spacing:-.014em}