/* ============================================================
   motion.css — 签名动作（signature moves）
   规则见 DESIGN.md「炫技预算」。只能在 data-sig 上声明，不许散写 keyframes。
   ============================================================ */

/* ① 落线 DRAW：数据格之间的金线按顺序画出（“表格开始成立”） */
[data-sig="draw"] .kpi>div{position:relative}
[data-sig="draw"] .kpi>div::before{
  content:"";position:absolute;left:-1px;top:2px;bottom:2px;width:1px;
  background:var(--c-gold);opacity:.55;
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--d-scene) var(--ease-out);
}
[data-sig="draw"].is-in .kpi>div::before{transform:scaleY(1)}
[data-sig="draw"].is-in .kpi>div:nth-child(2)::before{transition-delay:90ms}
[data-sig="draw"].is-in .kpi>div:nth-child(3)::before{transition-delay:180ms}
[data-sig="draw"].is-in .kpi>div:nth-child(4)::before{transition-delay:270ms}
[data-sig="draw"].is-in .kpi>div:nth-child(5)::before{transition-delay:360ms}
[data-sig="draw"].is-in .kpi>div:nth-child(6)::before{transition-delay:450ms}
/* SVG 描边版（备用，仍只允许用 path.drawable） */
[data-sig="draw"] .drawable{
  stroke-dasharray:var(--len,1000);
  stroke-dashoffset:var(--len,1000);
  transition:stroke-dashoffset var(--d-scene) var(--ease-out);
}
[data-sig="draw"].is-in .drawable{stroke-dashoffset:0}
[data-sig="draw"] .drawable:nth-child(2){transition-delay:140ms}
[data-sig="draw"] .drawable:nth-child(3){transition-delay:280ms}
[data-sig="draw"] .drawable:nth-child(4){transition-delay:420ms}

/* ② 显影 CLIP：图片像图纸被揭开（从上缘向下） */
[data-sig="clip"]{overflow:hidden}
[data-sig="clip"] img{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.04);
  transition:clip-path var(--d-scene) var(--ease-out),transform 1.2s var(--ease-out);
}
[data-sig="clip"].is-in img{clip-path:inset(0 0 0 0);transform:scale(1)}

/* ③ 计数 COUNT：数字跳一次（只跳一次，不循环） */
[data-sig="count"]{font-variant-numeric:tabular-nums}
[data-sig="count"] .u{opacity:0;transition:opacity var(--d-base) var(--ease-out) .55s}
[data-sig="count"].is-in .u{opacity:1}
[data-sig="count"] [data-to]{font-variant-numeric:tabular-nums}

/* ④ 户型面积点亮 HOTSPOT：hover/tap 房间时描边亮起 + 面积浮出 */
[data-sig="hotspot"]{position:relative;display:block}
[data-sig="hotspot"] .hs{
  position:absolute;appearance:none;-webkit-appearance:none;padding:0;
  background:transparent;border:1px solid transparent;border-radius:0;cursor:crosshair;
  transition:border-color var(--d-fast) var(--ease-out),background var(--d-fast) var(--ease-out);
}
[data-sig="hotspot"] .hs:hover,
[data-sig="hotspot"] .hs:focus-visible,
[data-sig="hotspot"] .hs.is-on{
  border-color:var(--c-gold);
  background:rgba(176,138,82,.10);
  outline:0;
}
[data-sig="hotspot"] .hs__tip{
  position:absolute;left:8px;top:8px;padding:4px 8px;background:var(--c-paper);
  border:1px solid var(--c-gold-line);font-size:var(--fs-micro);letter-spacing:.06em;
  color:var(--c-ink);white-space:nowrap;opacity:0;transform:translateY(2px);
  transition:opacity var(--d-fast) var(--ease-out),transform var(--d-fast) var(--ease-out);
  pointer-events:none;
}
[data-sig="hotspot"] .hs[data-tip="left"] .hs__tip{left:auto;right:8px}
[data-sig="hotspot"] .hs:hover .hs__tip,
[data-sig="hotspot"] .hs:focus-visible .hs__tip,
[data-sig="hotspot"] .hs.is-on .hs__tip{opacity:1;transform:none}

/* 降级：减少动效 → 全部直落终态（数据仍显示最终值，不从 0 起） */
@media (prefers-reduced-motion:reduce){
  [data-sig="draw"] .drawable{stroke-dashoffset:0;transition:none}
  [data-sig="clip"] img{clip-path:none;transform:none;transition:none}
  [data-sig="count"] .u{opacity:1;transition:none}
  [data-sig] *{transition:none !important;animation:none !important}
}
/* 降级：手机只保留首屏「显影」，其余签名动作关闭 */
@media (max-width:900px){
  [data-sig="draw"] .drawable{stroke-dashoffset:0;transition:none}
  [data-sig="count"] .u{opacity:1;transition:none}
}