/*!
 * Novlink 官网动效覆盖层 (novlink-motion.css)
 * ---------------------------------------------------------------
 * 只做「表现层」增强：不修改任何文案、不替换任何组件、不触碰业务逻辑。
 * 全部新增节点都带 nm- 前缀，删除本文件 + novlink-motion.js 即可 100% 回到原状。
 *
 * 载入方式：dist/index.html 中
 *   <link rel="stylesheet" href="/novlink-motion.css">
 *   <script src="/novlink-motion.js" defer></script>
 * ---------------------------------------------------------------
 */

:root {
  --nm-accent: #ff6b35;
  --nm-accent-soft: #ffa46b;
  --nm-ink: #241a14;
  --nm-muted: #8a7a6c;
  --nm-muted-strong: #5b4c40;
  --nm-line: rgba(122, 86, 58, 0.12);
  --nm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --nm-spring: cubic-bezier(0.22, 1.12, 0.32, 1);
}

/* ================================================================
 * 00. 总闸
 * 所有“先藏起来再揭示”的样式都必须挂在 html.nm-ready 下，
 * 这样即使脚本加载失败，页面也保持完全可见，不会白屏。
 * ================================================================ */
html.nm-off *,
html.nm-off *::before,
html.nm-off *::after {
  animation: none !important;
  transition: none !important;
}
html.nm-off .nm-rv {
  opacity: 1 !important;
  transform: none !important;
}

/* ================================================================
 * 01. 顶部滚动进度条
 * ================================================================ */
#nm-progress {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: transparent;
}
#nm-progress i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--nm-accent), var(--nm-accent-soft));
  box-shadow: 0 0 12px rgba(255, 107, 53, 0.55);
  will-change: transform;
}

/* ================================================================
 * 02. 顶栏吸顶态：滚过首屏后加一层极淡的分层感
 * ================================================================ */
.public-header {
  transition: box-shadow 0.45s var(--nm-ease), background 0.45s var(--nm-ease);
}
html.nm-stuck .public-header {
  box-shadow: 0 10px 30px rgba(96, 60, 32, 0.08);
  background: #fdf9f4dd;
}

/* ================================================================
 * 03. 左侧「模块脊柱」：一条线贯穿全页，随滚动生长
 * ================================================================ */
.nm-spine {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
}
.nm-spine .nm-track {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0,
    rgba(255, 107, 53, 0.22) 6%,
    rgba(255, 107, 53, 0.22) 94%,
    transparent 100%
  );
}
.nm-spine .nm-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg, rgba(255, 107, 53, 0), var(--nm-accent));
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
}
.nm-spine .nm-dot {
  position: absolute;
  left: -3px;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--nm-accent);
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.13), 0 0 14px rgba(255, 107, 53, 0.65);
  opacity: 0;
  transition: opacity 0.4s var(--nm-ease);
}
html.nm-ready .nm-spine .nm-dot {
  opacity: 1;
}
.nm-spine .nm-tick {
  position: absolute;
  left: 0;
  width: 9px;
  height: 1px;
  margin-top: -0.5px;
  background: rgba(122, 86, 58, 0.22);
  transition: background 0.55s var(--nm-ease), box-shadow 0.55s var(--nm-ease),
    transform 0.55s var(--nm-ease);
  transform-origin: 0 50%;
}
.nm-spine .nm-tick.is-on {
  background: var(--nm-accent);
  transform: scaleX(1.7);
  box-shadow: 0 0 8px rgba(255, 107, 53, 0.55);
}

/* ================================================================
 * 04. 模块级入场：错峰上浮 + 文字遮罩上推
 * ================================================================ */
html.nm-ready .nm-rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.82s var(--nm-ease), transform 0.82s var(--nm-spring);
  transition-delay: var(--nm-d, 0s);
}
html.nm-ready .nm-on .nm-rv,
html.nm-ready .nm-rv.nm-show {
  opacity: 1;
  transform: none;
}

/* 文字遮罩：适合标题类，一行行推上来 */
html.nm-ready .nm-rv-mask .nm-m {
  display: block;
  overflow: hidden;
}
html.nm-ready .nm-rv-mask .nm-m > span {
  display: block;
  transform: translateY(112%);
  transition: transform 0.9s var(--nm-spring);
  transition-delay: var(--nm-d, 0s);
}
html.nm-ready .nm-on .nm-rv-mask .nm-m > span,
html.nm-ready .nm-rv-mask.nm-show .nm-m > span {
  transform: none;
}

/* ================================================================
 * 05. 模块交接：模块滚出视口后轻微后退，滚回来恢复
 * ================================================================ */
.home-page > .section.nm-past {
  opacity: 0.5;
  transform: scale(0.995);
}
.home-page > .section {
  transition: opacity 0.7s var(--nm-ease), transform 0.7s var(--nm-ease);
}

/* ================================================================
 * 06. 章节编号横线：随模块入场自己画出来（纯 CSS，零 DOM）
 * ================================================================ */
.section-kicker {
  position: relative;
}
.section-kicker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--nm-accent), rgba(255, 107, 53, 0));
  transition: width 0.95s var(--nm-ease) 0.18s;
}
.nm-on .section-kicker::after {
  width: 68px;
}

/* ================================================================
 * 07. 右侧章节导航：外圈进度环（conic-gradient 显示本章滚过多少）
 * ================================================================ */
.home-rail-item i {
  position: relative;
}
.nm-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    var(--nm-accent) 0deg,
    var(--nm-accent) var(--nm-p, 0deg),
    transparent var(--nm-p, 0deg)
  );
  -webkit-mask: radial-gradient(circle, transparent 6.5px, #000 7.1px);
  mask: radial-gradient(circle, transparent 6.5px, #000 7.1px);
  opacity: 0;
  transition: opacity 0.3s var(--nm-ease);
}
.home-rail-item.is-active .nm-ring {
  opacity: 1;
}

/* ================================================================
 * 08. Hero 主标题：逐字揭幕（分隔符做橙色节奏点）
 * ================================================================ */
.hero-copy h1 .nm-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.hero-copy h1 .nm-w > span {
  display: inline-block;
  transition: transform 0.95s var(--nm-spring);
  transition-delay: var(--nm-d, 0s);
}
/* 注意：这两条的权重必须严格递增，否则隐藏态会压住显示态 */
html.nm-ready .hero-copy h1.nm-split .nm-w > span {
  transform: translateY(115%);
}
html.nm-ready .nm-on .hero-copy h1.nm-split .nm-w > span {
  transform: translateY(0);
}
.hero-copy h1 .nm-d {
  color: var(--nm-accent);
}

/* 品牌字逐字弹入 */
.brand--hero .brand-copy strong .nm-c {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) rotate(6deg);
  transition: opacity 0.5s var(--nm-ease), transform 0.62s var(--nm-spring);
  transition-delay: var(--nm-d, 0s);
}
.nm-on .brand--hero .brand-copy strong .nm-c {
  opacity: 1;
  transform: none;
}

/* ================================================================
 * 09. 网关卡：鼠标跟随柔光 + 边框呼吸
 * ================================================================ */
.gateway-card {
  position: relative;
}
.gateway-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--nm-ease);
  background: radial-gradient(
    340px circle at var(--nm-mx, 50%) var(--nm-my, 50%),
    rgba(255, 107, 53, 0.11),
    transparent 68%
  );
}
.gateway-card:hover::after {
  opacity: 1;
}

/* 健康大数字流光 */
.health-number strong {
  background: linear-gradient(
    100deg,
    var(--nm-accent) 0%,
    var(--nm-accent-soft) 42%,
    #ffc79b 56%,
    var(--nm-accent) 78%,
    var(--nm-accent) 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: nmShimmer 5.5s linear infinite;
}
@keyframes nmShimmer {
  to {
    background-position: -220% 0;
  }
}

/* ================================================================
 * 10. 数据流链路：三枚 chip 依次点亮 + 连线上跑光点
 * ================================================================ */
.flow span {
  transition: color 0.4s var(--nm-ease);
}
.nm-on .flow span {
  animation: nmChip 2.8s var(--nm-ease) infinite;
}
.nm-on .flow span:nth-of-type(2) {
  animation-delay: 0.5s;
}
.nm-on .flow span:nth-of-type(3) {
  animation-delay: 1s;
}
@keyframes nmChip {
  0%,
  74%,
  100% {
    color: var(--nm-muted-strong);
  }
  18% {
    color: var(--nm-accent);
  }
}
.flow i {
  position: relative;
}
.flow i::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nm-accent);
  box-shadow: 0 0 8px rgba(255, 107, 53, 0.8);
  opacity: 0;
}
.nm-on .flow i::after {
  animation: nmFlowDot 2.8s linear infinite;
}
@keyframes nmFlowDot {
  0% {
    left: 0;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 5px);
    opacity: 0;
  }
}

/* ================================================================
 * 11. 勾选图标描边动画
 * ================================================================ */
.nm-on .lucide-circle-check-icon path {
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  animation: nmTick 0.55s var(--nm-ease) forwards;
}
@keyframes nmTick {
  to {
    stroke-dashoffset: 0;
  }
}

/* ================================================================
 * 12. 按钮：掠过光带
 * ================================================================ */
.el-button {
  position: relative;
  overflow: hidden;
}
.el-button::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -70%;
  width: 40%;
  height: 180%;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.44), transparent);
}
.el-button:hover::after {
  animation: nmSheen 0.9s var(--nm-ease);
}
@keyframes nmSheen {
  0% {
    left: -70%;
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  100% {
    left: 130%;
    opacity: 0;
  }
}

/* ================================================================
 * 13. 三步流程：会生长的连接线（纯 CSS，靠 ol::before）
 * ================================================================ */
.quick-guide ol {
  position: relative;
}
.quick-guide ol::before {
  content: "";
  position: absolute;
  z-index: 0; /* 压在编号圆之下（li 已提到 z-index:1） */
  left: var(--nm-line-left, 15px);
  top: var(--nm-line-top, 16px);
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--nm-accent), #ffb98f);
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.45);
  transition: height 1.15s var(--nm-ease) 0.12s;
}
.nm-on .quick-guide ol::before {
  height: var(--nm-line-h, 0px);
}
.quick-guide li {
  transition: opacity 0.6s var(--nm-ease), transform 0.6s var(--nm-spring);
  transition-delay: var(--nm-d, 0s);
}
html.nm-ready .quick-guide li {
  opacity: 0;
  transform: translateX(-8px);
}
/* 权重必须比上一条更高：html.nm-ready 那一侧是 (0,2,2)，这条要 (0,3,2) */
html.nm-ready .nm-on .quick-guide li {
  opacity: 1;
  transform: none;
}

/* ================================================================
 * 14. 代码块：逐行打字
 * ================================================================ */
.code-card pre .nm-line {
  display: block;
  white-space: pre;
  opacity: 0;
  transform: translateY(4px);
}
.nm-on .code-card pre .nm-line {
  animation: nmType 0.42s var(--nm-ease) forwards;
  animation-delay: var(--nm-d, 0s);
}
@keyframes nmType {
  to {
    opacity: 1;
    transform: none;
  }
}
.code-card pre .nm-caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--nm-accent);
  opacity: 0;
}
.nm-on .code-card pre .nm-caret {
  animation: nmBlink 1.05s steps(1, end) 3;
}
@keyframes nmBlink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* 复制按钮 */
.nm-copy {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid rgba(122, 86, 58, 0.14);
  border-radius: 8px;
  color: var(--nm-muted-strong);
  font: 11px/1 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(6px);
  transition: color 0.2s var(--nm-ease), border-color 0.2s var(--nm-ease),
    transform 0.2s var(--nm-ease);
}
.nm-copy:hover {
  color: var(--nm-accent);
  border-color: rgba(255, 107, 53, 0.4);
  transform: translateY(-1px);
}
.nm-copy svg {
  width: 13px;
  height: 13px;
}
.nm-copy.is-done {
  color: #4f8a63;
  border-color: rgba(111, 143, 122, 0.5);
}

/* ================================================================
 * 15. 模型区：切换时的图标/文案接力
 * ================================================================ */
.model-stage-main .nm-swap {
  animation: nmSwapIn 0.5s var(--nm-spring) both;
}
@keyframes nmSwapIn {
  0% {
    opacity: 0;
    transform: translateY(9px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.model-stage-main .model-glyph--lg.nm-swap {
  animation: nmGlyphSwap 0.55s var(--nm-spring) both;
}
@keyframes nmGlyphSwap {
  0% {
    opacity: 0;
    transform: scale(0.82) rotate(-7deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.model-list-item.active em {
  color: var(--nm-accent);
}

/* ================================================================
 * 16. 漂浮微粒：把原站只覆盖首屏的微粒铺满全页 + 加强
 * ================================================================ */
.motion-field {
  height: 100%;
  opacity: 0.62;
}
.motion-field i {
  background: rgba(255, 107, 53, 0.4);
  box-shadow: 0 0 0 5px rgba(255, 107, 53, 0.05);
  animation-duration: 12s;
}

/* ================================================================
 * 17. 复制成功提示
 * ================================================================ */
#nm-toast {
  position: fixed;
  z-index: 9998;
  left: 50%;
  bottom: 34px;
  padding: 10px 18px;
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 12px);
  background: rgba(29, 31, 49, 0.92);
  box-shadow: 0 14px 40px rgba(29, 31, 49, 0.28);
  transition: opacity 0.3s var(--nm-ease), transform 0.3s var(--nm-ease);
}
#nm-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ================================================================
 * 18. 静止取帧模式：地址后加 #static
 * ================================================================ */
html.nm-static *,
html.nm-static *::before,
html.nm-static *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0s !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
}
/* #static = 「全部呈现终态」，任何情况下都不留隐藏元素 */
html.nm-static .nm-rv,
html.nm-static .nm-rv-mask .nm-m > span,
html.nm-static .hero-copy h1.nm-split .nm-w > span,
html.nm-static .brand--hero .brand-copy strong .nm-c,
html.nm-static .quick-guide li,
html.nm-static .code-card pre .nm-line {
  opacity: 1 !important;
  transform: none !important;
}
html.nm-static .nm-spine .nm-dot,
html.nm-static .home-rail-item .nm-ring {
  opacity: 1;
}

/* ================================================================
 * 19. 小屏收敛
 * ================================================================ */
@media (max-width: 1180px) {
  .nm-spine {
    display: none;
  }
}
@media (max-width: 700px) {
  .nm-copy {
    right: 8px;
    bottom: 8px;
    padding: 4px 7px;
  }
}

/* ================================================================
 * 20. 无障碍：系统开启「减少动态效果」时全部关闭
 * ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html.nm-ready .nm-rv,
  html.nm-ready .nm-rv-mask .nm-m > span,
  .hero-copy h1 .nm-w > span,
  .brand--hero .brand-copy strong .nm-c,
  html.nm-ready .quick-guide li,
  .code-card pre .nm-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .health-number strong,
  .nm-on .flow span,
  .nm-on .flow i::after,
  .nm-on .lucide-circle-check-icon path,
  .model-stage-main .nm-swap,
  .model-stage-main .model-glyph--lg.nm-swap {
    animation: none !important;
  }
  .nm-on .lucide-circle-check-icon path {
    stroke-dashoffset: 0 !important;
  }
  .nm-on .quick-guide ol::before {
    height: var(--nm-line-h, 0px) !important;
    transition: none !important;
  }
  .nm-on .section-kicker::after {
    width: 68px !important;
    transition: none !important;
  }
  .home-page > .section.nm-past {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ================================================================
 * 21. 「开始接入」板块：暖色统一 + 步骤细节打磨（2026-10-12）
 * ---------------------------------------------------------------
 * 背景：该板块沿用模板自带「冷蓝灰」主题（#dce4ed / #526b92 / #eef2f6），
 *       与首页暖米 + 橙主色撞色，看起来像半成品。
 * 原则：只改颜色与几何细节，不动结构、不动文案、不碰业务逻辑。
 * 选择器统一加 `#app` 前缀，确保能压过后注入的 scoped 样式
 * （HomeView 的样式是路由懒加载 chunk，运行时插到 <head> 末尾）。
 * ================================================================ */

/* 21.1 步骤：整行提到连接线之上；列宽/间距对齐新徽章尺寸 */
#app .home-page .quick-guide li {
  position: relative;
  z-index: 1; /* 保证连接线永远从徽章「下面」穿过 */
  grid-template-columns: 32px 1fr;
  gap: 14px;
}

/* 21.2 编号圆：冷蓝灰 → 暖色实底 + 橙描边，并加大到 32px */
#app .home-page .quick-guide li > span {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 107, 53, 0.34);
  border-radius: 50%;
  color: #cf5119;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(180deg, #fff6ef, #ffe7d8);
  box-shadow: 0 5px 12px rgba(255, 107, 53, 0.16), inset 0 1px 0 #ffffff;
}

/* 21.3 步骤文字：微暖灰 + 更舒展的行高 */
#app .home-page .quick-guide strong {
  font-size: 14.5px;
  color: #2a2521;
}
#app .home-page .quick-guide p {
  margin-top: 5px;
  color: #7b7268;
  font-size: 12.5px;
  line-height: 1.7;
}

/* 21.4 标题里的 cc-switch：等宽高亮；【推荐…】整段柔和降权 */
#app .home-page .quick-guide strong .nm-code {
  padding: 1px 6px;
  margin: 0 1px;
  border: 1px solid rgba(255, 107, 53, 0.24);
  border-radius: 6px;
  color: #c2510f;
  font: 600 12px/1.5 "SFMono-Regular", Consolas, monospace;
  background: rgba(255, 107, 53, 0.09);
}
#app .home-page .quick-guide strong .nm-tag {
  color: #a8703f;
  font-style: normal;
  font-weight: 650;
}

/* 21.5 左卡：竖向 flex，让「查看接入文档」自动沉底，两卡底部齐平 */
#app .home-page .quick-guide {
  display: flex;
  flex-direction: column;
}
#app .home-page .quick-guide ol {
  flex: 0 0 auto;
}
#app .home-page .quick-guide .inline-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 18px;
  color: #c2510f;
  font-size: 13.5px;
  gap: 7px;
}
#app .home-page .quick-guide .inline-link:hover {
  color: #a8420a;
}
#app .home-page .quick-guide .inline-link svg {
  transition: transform 0.24s var(--nm-ease);
}
#app .home-page .quick-guide .inline-link:hover svg {
  transform: translateX(3px);
}

/* 21.6 代码卡：整块从冷蓝 → 暖白；窗口点也暖化 */
#app .home-page .code-card > p {
  color: #7b7268;
}
#app .home-page .code-card pre {
  border-color: rgba(255, 107, 53, 0.16);
  color: #55483f;
  background: linear-gradient(180deg, #fffaf6, #fdf3ec);
}
#app .home-page .code-card pre .nm-caret {
  background: var(--nm-accent);
}
#app .home-page .code-card .window-dots i {
  background: #ecd9cd;
}
#app .home-page .code-card .window-dots i:first-child {
  background: #e6b49b;
}
#app .home-page .code-card .window-dots i:nth-child(2) {
  background: #e8cf9f;
}
#app .home-page .code-card .code-foot {
  color: #867a6f;
}
#app .home-page .code-card .code-foot svg {
  color: #4f8a63;
}

/* 21.7 小屏：列宽回退，避免窄屏挤压 */
@media (max-width: 700px) {
  #app .home-page .quick-guide li {
    grid-template-columns: 30px 1fr;
    gap: 12px;
  }
  #app .home-page .quick-guide li > span {
    width: 30px;
    height: 30px;
  }
}