/* ============================================================
   迅邦达官网 · 科技感 + 丝滑动效层 (animations.css)
   依赖 style.css 的 CSS 变量；无 JS 时全部降级为静态可见。
   ============================================================ */

/* ---------- 滚动渐入（由 .js 标记开启，避免首屏闪烁） ---------- */
.js .reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}
.js .reveal.in{ opacity:1; transform:none; }

/* 错峰方向变体 */
.js .reveal.r-left{ transform:translateX(-40px); }
.js .reveal.r-right{ transform:translateX(40px); }
.js .reveal.r-zoom{ transform:scale(.94); }

/* ---------- 首屏 hero 入场（加载即播放，错峰） ---------- */
.js .hero .eyebrow{ animation:hUp .7s .15s both; }
.js .hero h1{ animation:hUp .85s .3s both; }
.js .hero p.lead{ animation:hUp .85s .45s both; }
.js .hero-cta{ animation:hUp .85s .6s both; }
.js .hero .stats{ animation:hUp .95s .75s both; }
@keyframes hUp{ from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;} }

/* hero 高亮文字流光 */
.js .hero h1 .hl{
  background:linear-gradient(90deg,#FF9A5A 0%,#FFD49A 35%,#FFB07A 55%,#FF9A5A 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shineText 6s linear infinite;
}
@keyframes shineText{ to{ background-position:220% center; } }

/* ---------- hero 粒子 canvas ---------- */
.hero{ position:relative; }
.hero-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
  opacity:.6;
}
.hero .container{ position:relative; z-index:1; }

/* hero 背景缓慢光晕呼吸 */
.js .hero::after{ animation:glowBreath 9s ease-in-out infinite; }
@keyframes glowBreath{
  0%,100%{ opacity:.9; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.08); }
}

/* ---------- 顶部滚动进度条 ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,#FF8A3D,#FF5E3A 55%,#2E5BA8);
  z-index:300; transition:width .12s linear;
  box-shadow:0 0 10px rgba(255,94,58,.5);
}

/* ---------- 返回顶部 ---------- */
.to-top{
  position:fixed; right:24px; bottom:24px;
  width:46px; height:46px; border-radius:50%;
  background:var(--grad-orange); color:#fff; border:0;
  font-size:20px; line-height:1; cursor:pointer;
  box-shadow:0 10px 24px rgba(255,94,58,.42);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
  z-index:250;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ transform:translateY(-3px); }

/* ---------- 导航滚动态 + 链接下划线 ---------- */
.site-header.scrolled{
  background:rgba(255,255,255,.97);
  box-shadow:0 6px 26px rgba(20,34,74,.10);
}
.nav-links a{ position:relative; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--orange); border-radius:2px;
  transition:width .28s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after{ width:100%; }

/* ---------- 按钮流光 ---------- */
.btn{ position:relative; overflow:hidden; }
.btn-primary::before{
  content:""; position:absolute; top:0; left:-130%;
  width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);
  transition:left .65s ease;
}
.btn-primary:hover::before{ left:140%; }

/* ---------- 卡片光边 ---------- */
.card{ position:relative; overflow:hidden; }
.card::after{
  content:""; position:absolute; inset:0;
  border-radius:var(--radius);
  padding:1px;
  background:linear-gradient(135deg,rgba(255,122,47,0),rgba(46,91,168,0));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .3s ease;
  pointer-events:none;
}
.card:hover::after{
  opacity:1;
  background:linear-gradient(135deg,rgba(255,122,47,.55),rgba(46,91,168,.4));
}

/* 卡片图标呼吸微光 */
.js .card .ic{ position:relative; }
.js .card .ic::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit;
  background:radial-gradient(circle,rgba(255,122,47,.25),transparent 70%);
  opacity:0; transition:opacity .35s ease;
}
.card:hover .ic::after{ opacity:1; }

/* 有序步骤编号脉冲 */
.js .step .no{ position:relative; }
.js .step .no::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(46,91,168,.35);
  animation:ringPulse 2.6s ease-out infinite;
}
@keyframes ringPulse{
  0%{ box-shadow:0 0 0 0 rgba(46,91,168,.35); }
  70%{ box-shadow:0 0 0 12px rgba(46,91,168,0); }
  100%{ box-shadow:0 0 0 0 rgba(46,91,168,0); }
}

/* 锚点平滑滚动偏移（避开固定导航） */
section[id]{ scroll-margin-top:84px; }

/* ---------- 降级 / 无障碍 ---------- */
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .js .hero .eyebrow,.js .hero h1,.js .hero p.lead,.js .hero-cta,.js .hero .stats{ animation:none !important; }
  .js .hero h1 .hl{ -webkit-text-fill-color:initial; color:#FF9A5A; background:none; animation:none; }
  .js .hero::after{ animation:none !important; }
  .js .step .no::after{ animation:none !important; }
  .hero-canvas{ display:none !important; }
  .scroll-progress{ display:none !important; }
  html{ scroll-behavior:auto; }
}