/* r66 服务页「市场行情与热点」样例图的动效(她:「插图没有动效」)。
   只动 SVG 内已有元素的 transform / opacity / stroke-dashoffset,不改结构、不改配色;
   讲的是一条资讯被读懂的顺序:行情 K 线在跳 → 事件被标出 → 经框架环 → 四段依次亮起。
   回退 = 删各 services.html 里引它的那一行。 */

/* ① 原始资讯:K 线逐根起伏、事件那根脉冲、基线与事件线流动 */
.ins42-cd { transform-box: fill-box; transform-origin: 50% 100%; animation: ins42m-tick 3.6s ease-in-out infinite; }
.ins42-cd:nth-of-type(3n+1)  { animation-duration: 3.2s; animation-delay: -.4s; }
.ins42-cd:nth-of-type(3n+2)  { animation-duration: 4.1s; animation-delay: -1.9s; }
.ins42-cd:nth-of-type(3n+3)  { animation-duration: 3.7s; animation-delay: -2.6s; }
@keyframes ins42m-tick { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.22); } }
.ins42-cd--ev { animation: ins42m-ev 2.4s ease-in-out infinite !important; transform-origin: 50% 50%; }
@keyframes ins42m-ev { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(1.12); opacity: .72; } }
.ins42-evmark { transform-box: fill-box; transform-origin: 50% 50%; animation: ins42m-mark 2.4s ease-in-out infinite; }
@keyframes ins42m-mark { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
.ins42-evline { animation: ins42m-dash 1.6s linear infinite; }
.ins42-base   { animation: ins42m-dash 3s linear infinite; }
@keyframes ins42m-dash { to { stroke-dashoffset: -20; } }
.ins42-doc .ins42-s { animation: ins42m-read 5.6s ease-in-out infinite; }
.ins42-doc .ins42-s:nth-of-type(odd) { animation-delay: -2.8s; }
@keyframes ins42m-read { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ② 框架环:四段弧旋转,两侧引线向右流,中心点呼吸 */
.ins42-arc { transform-origin: 60px 60px; animation: ins42m-spin 7s linear infinite; }
@keyframes ins42m-spin { to { transform: rotate(360deg); } }
.ins42-hl { stroke-dasharray: 3 7; animation: ins42m-dash-r 1.2s linear infinite; }
@keyframes ins42m-dash-r { to { stroke-dashoffset: -20; } }
.ins42-hd { transform-box: fill-box; transform-origin: 50% 50%; animation: ins42m-core 2.4s ease-in-out infinite; }
@keyframes ins42m-core { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .6; } }

/* ③ 四段解读:按阅读顺序依次亮边,各自带一点自己的动势 */
.ins42__cell { animation: ins42m-cell 8s ease-in-out infinite; }
.ins42__cell:nth-child(2) { animation-delay: 2s; }
.ins42__cell:nth-child(3) { animation-delay: 4s; }
.ins42__cell:nth-child(4) { animation-delay: 6s; }
@keyframes ins42m-cell {
  0%, 30%, 100% { border-color: rgba(255, 255, 255, .12); box-shadow: none; }
  8%, 18% { border-color: color-mix(in srgb, var(--c-accent-500) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent-500) 12%, transparent); }
}
/* 相关品种:圆点轮流呼吸 */
.ins42-pd { transform-box: fill-box; transform-origin: 50% 50%; animation: ins42m-core 3.2s ease-in-out infinite; }
.ins42-pd--b { animation-delay: -1.1s; }
.ins42-pd--c { animation-delay: -2.1s; }
/* 影响路径:连线向外流动,末端节点依次脉冲 */
.ins42__cell:nth-child(3) .ins42-ln { stroke-dasharray: 4 5; animation: ins42m-dash-r 1.8s linear infinite; }
.ins42__cell:nth-child(3) .ins42-n { transform-box: fill-box; transform-origin: 50% 50%; animation: ins42m-core 2.8s ease-in-out infinite; }
.ins42__cell:nth-child(3) circle.ins42-n:nth-of-type(2) { animation-delay: -1.2s; }
.ins42__cell:nth-child(3) circle.ins42-n:nth-of-type(3) { animation-delay: -2s; }
/* 后续观察点:进度沿时间轴向前走,走到头淡出重来 */
.ins42__cell:nth-child(4) .ins42-ln--on { transform-box: view-box; transform-origin: 8px 30px; animation: ins42m-run 8s cubic-bezier(.5, 0, .2, 1) infinite; }
.ins42__cell:nth-child(4) .ins42-n--on  { animation: ins42m-run-n 8s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes ins42m-run   { 0% { transform: scaleX(1); opacity: 0; } 5% { transform: scaleX(1); opacity: 1; } 78% { transform: scaleX(18.17); opacity: 1; } 90% { transform: scaleX(18.17); opacity: 0; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes ins42m-run-n { 0% { transform: translateX(0); opacity: 0; } 5% { transform: translateX(0); opacity: 1; } 78% { transform: translateX(206px); opacity: 1; } 90% { transform: translateX(206px); opacity: 0; } 100% { transform: translateX(0); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ins42 *, .ins42 { animation: none !important; }
}