/* 徽标入场动画（康宁护理）。所有规则都挂在 html.lm-intro 下面：
   这个类只在一个会话的第一次打开时由 index.html <head> 里的小脚本加上，播完就拿掉；
   没 JS、搜索引擎、"减少动态效果" 时看到的就是静态的最终帧。
   徽标是内联 SVG（单位 = 原始 3x 采样坐标）；英文、中文仍然是真文字，只是逐词/逐字入场。
   时间轴照 motion-lab/logos/kangning/motion_spec.md，总长 1900ms。 */

.lm-kn-w, .lm-kn-c { display: inline-block; text-indent: 0; }  /* text-indent 会被 inline-block 继承，必须清零 */

.lm-intro .lm-kn-disc, .lm-intro .lm-kn-hand-l, .lm-intro .lm-kn-hand-r,
.lm-intro .lm-kn-tree, .lm-intro .lm-kn-f { transform-box: fill-box; }

/* 1 · 浅色圆盘先出现 */
.lm-intro .lm-kn-disc { transform-origin: 50% 50%; animation: lm-kn-disc 500ms linear both; }
@keyframes lm-kn-disc {
  0%   { opacity: 0; transform: scale(.94); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  100% { opacity: 1; transform: scale(1); }
}

/* 2 · 一双手从下方托起，绕手腕转入 */
.lm-intro .lm-kn-hand-l { transform-origin: 100% 100%; animation: lm-kn-hand-l 720ms 100ms linear both; }
.lm-intro .lm-kn-hand-r { transform-origin: 0% 100%;   animation: lm-kn-hand-r 720ms 140ms linear both; }
@keyframes lm-kn-hand-l {
  0%   { opacity: 0; transform: translateY(14px) rotate(-9deg); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  45%  { opacity: 1; }
  78%  { transform: translateY(0) rotate(.8deg); animation-timing-function: cubic-bezier(.45,0,.25,1); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@keyframes lm-kn-hand-r {
  0%   { opacity: 0; transform: translateY(14px) rotate(9deg); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  45%  { opacity: 1; }
  78%  { transform: translateY(0) rotate(-.8deg); animation-timing-function: cubic-bezier(.45,0,.25,1); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* 3 · 树（连同照护者和长者）从树根长上来 */
.lm-intro .lm-kn-tree { animation: lm-kn-grow 900ms 280ms linear both; }
@keyframes lm-kn-grow {
  0%   { clip-path: circle(0% at 50% 100%); opacity: .2; animation-timing-function: cubic-bezier(.33,0,.2,1); }
  25%  { opacity: 1; }
  100% { clip-path: circle(160% at 50% 100%); opacity: 1; }
}

/* 4 · 叶子和心形，自下而上逐片展开 */
.lm-intro .lm-kn-f { transform-origin: 50% 50%; animation: lm-kn-leaf 420ms calc(560ms + var(--i) * 22ms) linear both; }
.lm-intro .lm-kn-f.lm-kn-heart { transform-origin: 50% 85%; animation-name: lm-kn-heart; }
@keyframes lm-kn-leaf {
  0%   { opacity: 0; transform: scale(.4); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  65%  { opacity: 1; transform: scale(1.04); animation-timing-function: cubic-bezier(.45,0,.25,1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes lm-kn-heart {
  0%   { opacity: 0; transform: scale(.35); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  62%  { opacity: 1; transform: scale(1.08); animation-timing-function: cubic-bezier(.45,0,.25,1); }
  100% { opacity: 1; transform: scale(1); }
}

/* 5 · 英文名逐词浮上来（位移按页面 1x 尺寸换算：14/3 ≈ 5px） */
.lm-intro .lm-kn-w { animation: lm-kn-rise 560ms calc(1000ms + var(--i) * 70ms) linear both; }
@keyframes lm-kn-rise {
  0%   { opacity: 0; transform: translateY(5px); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}

/* 6 · 康宁护理逐字出现，两侧小叶子向内飘入 */
.lm-intro .lm-kn-c { animation: lm-kn-char 440ms calc(1220ms + var(--i) * 80ms) linear both; }
@keyframes lm-kn-char {
  0%   { opacity: 0; transform: translateY(3px); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  100% { opacity: 1; transform: translateY(0); }
}
.lm-intro .lm-kn-leaf-l { animation: lm-kn-leaf-l 540ms 1300ms linear both; }
.lm-intro .lm-kn-leaf-r { animation: lm-kn-leaf-r 540ms 1300ms linear both; }
@keyframes lm-kn-leaf-l {
  0%   { opacity: 0; transform: translateX(-5px) rotate(-12deg); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}
@keyframes lm-kn-leaf-r {
  0%   { opacity: 0; transform: translateX(5px) rotate(12deg) scaleX(-1); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  100% { opacity: 1; transform: translateX(0) rotate(0deg) scaleX(-1); }
}

@media (prefers-reduced-motion: reduce) {
  .lm-intro .kn-logo * { animation: none !important; }
}