/* ============================================================
   安德立德官网 · 动效层 v1.2
   依据：《安德立德官网-视觉约束冻结文档 v1.2》第 10 节「动态视觉规范」
   规则：
     1. 色值一律走 tokens.css，本文件不含任何硬编码色值
     2. 只动 transform / opacity（合成层），不动会触发重排的属性
     3. 默认状态 = 静态可见终态；动效仅在 prefers-reduced-motion: no-preference 下启用
     4. 禁弹跳/回弹缓动、禁发光边框、禁毛玻璃
   ============================================================ */

/* ---------- 1. 首屏主视觉：仪器面板语言 + 画布数据流 ---------- */

/* 1.1 首屏底纹：金色网格 + 径向渐隐（把整块首屏读作「一块仪器面板」） */
.hero { position: relative; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--grid-line-gold) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, var(--grid-line-gold) 0 1px, transparent 1px 48px);
  -webkit-mask-image: radial-gradient(ellipse 92% 82% at 50% 42%, #000 26%, transparent 90%);
  mask-image: radial-gradient(ellipse 92% 82% at 50% 42%, #000 26%, transparent 90%);
}

/* 1.2 暗角渐晕：四角压暗，把视线收到中间（是压暗，不是发光） */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 84% 78% at 50% 44%, transparent 44%, var(--vignette) 100%);
}
.hero__inner { position: relative; z-index: 1; }

/* 1.3 主视觉容器：由「贴纸式圆角块」改为「仪器窗口」——硬边、金线、克制柔光。
   aspect-ratio 锁定 462:420（= 画布设计比），所有断点等比缩放、只缩不重排 */
.hero__figure {
  position: relative;
  isolation: isolate;
  aspect-ratio: 462 / 420;
  border-radius: 2px;
  border: 1px solid var(--panel-line);
  background-color: transparent;
  box-shadow: 0 0 0 1px var(--glow-gold-soft), 0 0 34px -8px var(--glow-gold);
}

/* 1.4 主视觉下缘「沉入」背景：用深蓝渐变盖住图片下缘。
   不用 mask 做透明——mask 会让图像与深蓝底混出一条发灰的横带，读作渲染瑕疵。
   z-index 3 = 压在画布之上，让「采集仪式」里的两个人一起沉入背景 */
.hero__figure img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 静态兜底图淡出：脚本跑起来后由画布接管（过渡只在允许动效时生效，见第 7 节） */
.hero__figure.is-live .hero__fallback { opacity: 0; }
.hero__figure::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to top, var(--brand-primary) 0%, transparent 100%);
}

/* 1.5 四角角标：与雷达面板同一套仪器语言（对角两处，克制） */
.hero__frame {
  position: absolute;
  inset: -1px;
  z-index: 4;
  pointer-events: none;
}
.hero__frame::before,
.hero__frame::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 0 solid var(--brand-gold);
  opacity: 0.55;
}
.hero__frame::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hero__frame::after { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* 1.6 数据地平线：首屏底部一条带刻度、缓慢起伏的基线（仪器呼吸感；纯几何，无文字） */
.hero-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 84px;
  pointer-events: none;
  opacity: 0;              /* 首帧绘制完成后才淡入 */
  transition: opacity var(--dur-base) var(--ease-out);
}
.hero-horizon.is-ready { opacity: 1; }
/* 1.7 采集仪式画布：画布本身即完整构图（实体人 + 分身），不是叠加层，
   故去掉 v1.3 的 screen 混合模式——否则画布的深蓝底会与下层兜底图互相叠加 */
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;              /* 首帧绘制完成后才淡入；脚本未执行时保持隐藏，由静态兜底图承载 */
}
.hero-canvas.is-ready { opacity: 1; }

/* ---------- 2. 板块标题：金色短横线绘制 ---------- */
.section-head::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin: 20px auto 0;
  background-color: var(--brand-gold);
  transform-origin: center;
}
.section-head--left::after { margin-left: 0; transform-origin: left; }

/* ---------- 3. 卡片与按钮：微交互（hover 反馈） ---------- */
.card, .engine-card, .price-card, .dim-item, .stat-card, .bottomline-item {
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.engine-card:hover, .price-card:hover, .dim-item:hover {
  transform: translateY(-2px);
  border-color: var(--brand-gold);
}
.dim-item:hover { background-color: var(--gold-bg-light); }

/* 按钮 hover：金色描边 + 1px 上移，仅反馈不炫技 */
.btn { transition: transform var(--dur-fast) var(--ease-out),
                   background-color var(--dur-fast) var(--ease-out),
                   border-color var(--dur-fast) var(--ease-out),
                   color var(--dur-fast) var(--ease-out); }
.btn:hover { transform: translateY(-1px); }
.btn--outline:hover { border-color: var(--brand-gold); color: var(--brand-gold); }

/* 首屏主按钮：克制的金色柔光。全站仅此一处使用 box-shadow 泛光——
   v1.3 把「禁泛光」放宽为分级规则后，只允许关键行动点在暗底上「被点亮」 */
.hero .btn--primary { box-shadow: 0 0 22px -6px var(--glow-gold); }

/* ---------- 4. 八步撮合链路：序列点亮 + 流动金线 ---------- */
.step-item::before {
  content: "";
  position: absolute;
  top: -17px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--gold-edge);
  transform-origin: left center;
}

/* ---------- 5. 三条底线：hairline 绘制 ---------- */
.bottomline-item { position: relative; }
.bottomline-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background-color: var(--brand-gold);
  transform-origin: left center;
}

/* ---------- 6. 雷达引擎面板（深底） ---------- */
.radar-panel {
  position: relative;
  max-width: 680px;
  margin-top: 32px;
  border-radius: var(--radius-card);
  background-color: var(--brand-primary);
  overflow: hidden;
  /* 画布缩放必须等比 —— 六轴几何一旦纵向拉伸就不是六边形了。
     v1.3 的固定高度三档（320 / 260 / 220）不是等比，会把六边形拉长；
     这里锁定 680:320 的宽高比，任何宽度下等比缩放
     （宽 680 / 560 / 340 时自然得到高 320 / 264 / 160）。 */
  aspect-ratio: 680 / 320;
}
.radar-canvas,
.radar-fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.radar-canvas { z-index: 2; opacity: 0; }        /* 首帧绘制完成后才淡入 */
.radar-canvas.is-ready { opacity: 1; }
.radar-fallback { z-index: 1; pointer-events: none; }
.radar-panel.is-live .radar-fallback { opacity: 0; }

/* ---------- 6b. 深底板块：统一仪器面板底纹（网格底纹 + 径向渐隐） ----------
   让首页「差异化对比」、产品页「八步链路」、CTA 带与关于页深底段
   与首屏、雷达面板读作同一套仪器语言，而不是几块孤立的深色背景 */
.section--dark { position: relative; overflow: hidden; }
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 40px);
  -webkit-mask-image: radial-gradient(ellipse 86% 76% at 50% 50%, #000 30%, transparent 92%);
  mask-image: radial-gradient(ellipse 86% 76% at 50% 50%, #000 30%, transparent 92%);
}
.section--dark > .container { position: relative; z-index: 1; }

/* ---------- 7. 动效启用（尊重系统「减少动态效果」偏好） ---------- */
@media (prefers-reduced-motion: no-preference) {

  /* 画布接管静态兜底图时的交叉淡入：静→动 的切换不留生硬跳变 */
  .hero-canvas,
  .hero__fallback,
  .radar-canvas,
  .radar-fallback { transition: opacity var(--dur-base) var(--ease-out); }

  /* 分组入场：同组元素按次序入场，形成编排感而非「齐刷刷弹出」 */
  .engine-grid .engine-card:nth-child(2) { transition-delay: calc(var(--delay-step) * 1); }
  .engine-grid .engine-card:nth-child(3) { transition-delay: calc(var(--delay-step) * 2); }
  .stat-grid .stat-card:nth-child(2) { transition-delay: calc(var(--delay-step) * 1); }
  .stat-grid .stat-card:nth-child(3) { transition-delay: calc(var(--delay-step) * 2); }
  .stat-grid .stat-card:nth-child(4) { transition-delay: calc(var(--delay-step) * 3); }

  .section-head::after {
    transform: scaleX(0);
    transition: transform var(--dur-draw) var(--ease-out);
  }
  .section-head.is-visible::after { transform: scaleX(1); }

  .step-item::before {
    transform: scaleX(0);
    transition: transform var(--dur-draw) var(--ease-out);
  }
  .step-item__no {
    transition: border-color var(--dur-draw) var(--ease-out),
                color var(--dur-draw) var(--ease-out),
                background-color var(--dur-draw) var(--ease-out);
  }
  .step-grid.is-visible .step-item::before { transform: scaleX(1); }
  .step-grid.is-visible .step-item__no {
    border-color: var(--brand-gold);
    color: var(--brand-gold-light);
    background-color: var(--brand-layer);
  }
  .step-grid.is-visible .step-item:nth-child(1)::before { transition-delay: 0ms; }
  .step-grid.is-visible .step-item:nth-child(2)::before { transition-delay: calc(var(--delay-step) * 1); }
  .step-grid.is-visible .step-item:nth-child(3)::before { transition-delay: calc(var(--delay-step) * 2); }
  .step-grid.is-visible .step-item:nth-child(4)::before { transition-delay: calc(var(--delay-step) * 3); }
  .step-grid.is-visible .step-item:nth-child(5)::before { transition-delay: calc(var(--delay-step) * 4); }
  .step-grid.is-visible .step-item:nth-child(6)::before { transition-delay: calc(var(--delay-step) * 5); }
  .step-grid.is-visible .step-item:nth-child(7)::before { transition-delay: calc(var(--delay-step) * 6); }
  .step-grid.is-visible .step-item:nth-child(8)::before { transition-delay: calc(var(--delay-step) * 7); }
  .step-grid.is-visible .step-item:nth-child(1) .step-item__no { transition-delay: 0ms; }
  .step-grid.is-visible .step-item:nth-child(2) .step-item__no { transition-delay: calc(var(--delay-step) * 1); }
  .step-grid.is-visible .step-item:nth-child(3) .step-item__no { transition-delay: calc(var(--delay-step) * 2); }
  .step-grid.is-visible .step-item:nth-child(4) .step-item__no { transition-delay: calc(var(--delay-step) * 3); }
  .step-grid.is-visible .step-item:nth-child(5) .step-item__no { transition-delay: calc(var(--delay-step) * 4); }
  .step-grid.is-visible .step-item:nth-child(6) .step-item__no { transition-delay: calc(var(--delay-step) * 5); }
  .step-grid.is-visible .step-item:nth-child(7) .step-item__no { transition-delay: calc(var(--delay-step) * 6); }
  .step-grid.is-visible .step-item:nth-child(8) .step-item__no { transition-delay: calc(var(--delay-step) * 7); }

  .bottomline-item::after {
    transform: scaleX(0);
    transition: transform var(--dur-draw) var(--ease-out);
  }
  .bottomline-list.is-visible .bottomline-item::after { transform: scaleX(1); }
  .bottomline-list.is-visible .bottomline-item:nth-child(2)::after { transition-delay: calc(var(--delay-step) * 1); }
  .bottomline-list.is-visible .bottomline-item:nth-child(3)::after { transition-delay: calc(var(--delay-step) * 2); }

  .hero__figure img {
    animation: hero-breathe calc(var(--dur-flow) * 3) var(--ease-flow) infinite;
  }
  @keyframes hero-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.012); }
  }
}