/* ============================================================
   元构新序 · 动效系统 v1（Manus 版专用）
   依赖：无需任何库即可工作（渐进增强）
   GSAP ScrollTrigger 仅用于「断线重联」滚动叙事
   全部动效遵循 prefers-reduced-motion 降级
   ============================================================ */

/* ---------- ① Hero 大字遮罩升起（B 钩子三行） ---------- */
html.mv .hero h1 span { animation: hero-line .7s cubic-bezier(.2, .7, .2, 1) both; }
html.mv .hero h1 span:nth-child(2) { animation-delay: .12s; }
html.mv .hero h1 span:nth-child(3) { animation-delay: .24s; }
@keyframes hero-line {
  from { opacity: 0; transform: translateY(.55em); }
  to { opacity: 1; transform: none; }
}
html.mv .hero-support,
html.mv .hero-actions { animation: flow-up .6s ease .5s both; }

/* ---------- ③ 运行图呼吸（落位完成后的常驻生命感） ---------- */
html.mv .runtime-visual.is-live .runtime-state i { animation: state-pulse 2.6s ease-in-out 2.2s infinite; }
@keyframes state-pulse { 50% { opacity: .4; } }

html.mv .runtime-visual.is-live .map-dots circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: map-pop .4s cubic-bezier(.34, 1.56, .64, 1) 1.05s both,
             map-breathe 3s ease-in-out 2.6s infinite;
}
html.mv .runtime-visual.is-live .map-dots circle:nth-child(2) { animation-delay: 1.2s, 2.75s; }
@keyframes map-pop {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes map-breathe { 50% { transform: scale(1.28); } }

/* ---------- ⑤ 三层重构：层带滑入 + 字母盖章 ---------- */
html.mv .system-layer {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1);
}
html.mv .system-layer .layer-index {
  opacity: 0;
  transform: scale(1.5);
  transition: opacity .35s ease .18s, transform .35s cubic-bezier(.34, 1.56, .64, 1) .18s;
}
html.mv .system-layer.io-in { opacity: 1; transform: none; }
html.mv .system-layer.io-in .layer-index { opacity: 1; transform: scale(1); }

/* ---------- ⑥ 服务清单 stagger ---------- */
html.mv .service-line {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1), background-color .2s ease;
  transition-delay: 0s;
}
html.mv .service-line.io-in { opacity: 1; transform: none; }
html.mv .service-line.io-in:hover { background: rgba(25, 25, 25, .035); }

/* ---------- ⑦ 构建方法进度线（随滚动行驶） ---------- */
.method-steps { position: relative; }
.method-progress {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 1;
}

/* ---------- ⑧ 微交互：链接下划线从左生长 / 清单行反馈 ---------- */
.text-link,
.nav-links a {
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition: background-size .25s ease;
  padding-bottom: 2px;
}
.text-link:hover,
.nav-links a:hover { background-size: 100% 1px; }

/* ---------- ④ 断线重联：旧链条作废划线 ---------- */
.legacy-flow { position: relative; }
.legacy-flow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  background: var(--steel);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.legacy-flow.is-broken::after { transform: scaleX(1); }
/* 窄屏链条纵排：划线改为竖线，自上而下划掉整条链 */
@media (max-width: 720px) {
  .legacy-flow::after {
    left: 50%;
    right: auto;
    top: 0;
    width: 1.5px;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  }
  .legacy-flow.is-broken::after { transform: scaleY(1); }
}

/* ---------- 降级：reduced-motion 或无 JS → 全部直接可见 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.mv .hero h1 span,
  html.mv .hero-support,
  html.mv .hero-actions,
  html.mv .system-layer,
  html.mv .system-layer .layer-index,
  html.mv .service-line,
  html.mv .runtime-visual :is(.map-node, .map-core, .map-dots, .map-dots circle, .map-lines, .map-lines path),
  html.mv .runtime-visual.is-live ~ .runtime-footnote { opacity: 1 !important; transform: none !important; animation: none !important; clip-path: none !important; }
  .method-progress { display: none; }
  .legacy-flow::after { display: none; }
}
html:not(.js) :is(.system-layer, .service-line) { opacity: 1; transform: none; }

/* ---------- v1.1 增补：悬停与滚动微特效 ---------- */
/* 服务清单行：悬停整行右移，暗示可继续了解 */
html.mv .service-line { transition: opacity .4s ease, transform .35s cubic-bezier(.2,.7,.2,1), background-color .2s ease; }
html.mv .service-line:hover { transform: translateX(6px); }

/* 运行图：节点悬停 → 对应连接线亮起信号蓝（科技交互核心） */
.runtime-visual .map-lines path { transition: stroke .25s ease, stroke-width .25s ease, opacity .25s ease; }
.runtime-visual .map-lines path.is-hot { stroke: var(--blue); stroke-width: 1.6; opacity: 1; }
.runtime-visual .map-node { transition: opacity .5s ease; }
.runtime-visual .map-node:hover .map-value { color: var(--blue); }
.runtime-visual .map-core { cursor: pointer; }

/* 新旧对比：新秩序角色卡悬停反馈（桌面） */
html.mv .grid-role { transition: background-color .25s ease, transform .25s ease; }
html.mv .grid-role:hover { background: rgba(47, 80, 255, .05); transform: translateX(4px); }