/* ============================================================
   全站动效增强层 fx.css
   原则：视觉动效不影响内容可抓取性；无 JS 时内容正常可见
   ============================================================ */

:root{
  --fx-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. 滚动淡入（渐进增强：没 JS 时内容照常显示） ---------- */
.js .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .75s var(--fx-ease), transform .75s var(--fx-ease);
}
.js .reveal.in{opacity:1;transform:none;}
.js .reveal-d1{transition-delay:.07s;}
.js .reveal-d2{transition-delay:.14s;}
.js .reveal-d3{transition-delay:.21s;}

/* ---------- 2. Hero 光斑漂浮 ---------- */
@keyframes fx-float{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.8;}
  50%{transform:translate3d(-30px,20px,0) scale(1.1);opacity:1;}
}
.hero::after,
.page-hero::after,
.page-hero::before{
  animation:fx-float 15s ease-in-out infinite;
}

/* ---------- 3. 渐变色呼吸流动 ---------- */
@keyframes fx-breathe{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
.hero{
  background-size:180% 180%;
  animation:fx-breathe 20s ease-in-out infinite;
}

/* ---------- 4. 浮动粒子（由 fx.js 注入） ---------- */
.fx-particles{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;
}
.fx-particles i{
  position:absolute;display:block;border-radius:50%;
  background:rgba(255,255,255,.55);
  animation:fx-rise linear infinite;
  will-change:transform,opacity;
}
@keyframes fx-rise{
  0%{transform:translateY(20px) scale(.6);opacity:0;}
  12%{opacity:.7;}
  88%{opacity:.55;}
  100%{transform:translateY(-130px) scale(1);opacity:0;}
}
/* 暖橙品牌粒子偏暖色 */
body.cx .fx-particles i{background:rgba(240,123,42,.42);}

/* ---------- 5. 卡片 3D 悬停 ---------- */
.prod-card,.adv-item,.story-card,.cert-card,.net-card,.news-card{
  transition:transform .4s var(--fx-ease),
             box-shadow .4s var(--fx-ease),
             border-color .4s var(--fx-ease);
  will-change:transform;
}
.prod-card:hover,.story-card:hover,.cert-card:hover,.net-card:hover{
  transform:translateY(-7px) scale(1.014);
}
.adv-item:hover,.news-card:hover{
  transform:translateY(-4px);
}

/* ---------- 6. 按钮扫光 ---------- */
.btn-gold,.btn-main,.btn-ghost,.btn-line,.nav-cta,.cta-btn{
  position:relative;overflow:hidden;
  transition:transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease);
}
.btn-gold::after,.btn-main::after,.cta-btn::after{
  content:"";
  position:absolute;top:0;left:-75%;width:46%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);
  transition:left .65s ease;
  pointer-events:none;
}
.btn-gold:hover::after,.btn-main:hover::after,.cta-btn:hover::after{left:135%;}
.btn-gold:hover,.btn-main:hover,.cta-btn:hover{transform:translateY(-2px);}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.14);}

/* ---------- 7. 表格行交互 ---------- */
.data-table tbody tr{
  transition:background-color .25s ease, transform .25s ease;
}
.data-table tbody tr:hover{transform:translateX(3px);}

/* ---------- 8. FAQ 互动 ---------- */
.faq-item{transition:padding-left .3s var(--fx-ease);}
.faq-item:hover{padding-left:8px;}

/* ---------- 9. 导航下划线滑动 ---------- */
.nav-links a{position:relative;}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;
  background:currentColor;opacity:.55;
  transition:width .3s var(--fx-ease);
}
.nav-links a:hover::after,.nav-links a.on::after{width:100%;}

/* ---------- 10. 数字滚动容器 ---------- */
[data-count]{font-variant-numeric:tabular-nums;}

/* ---------- 11. 图片/区块入场高光 ---------- */
@keyframes fx-shine{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,0);}
  40%{box-shadow:0 0 28px 2px rgba(200,162,74,.18);}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}
}
.cert-card:hover{animation:fx-shine 1.1s ease;}

/* ---------- 13. Hero 标题逐层浮现（首屏冲击力） ---------- */
@keyframes fx-title-in{
  from{opacity:0;transform:translateY(30px);filter:blur(7px);}
  to{opacity:1;transform:none;filter:blur(0);}
}
.js .hero .hero-tag{animation:fx-title-in .8s var(--fx-ease) both;}
.js .hero h1{animation:fx-title-in 1s var(--fx-ease) .1s both;}
.js .hero p{animation:fx-title-in 1s var(--fx-ease) .26s both;}
.js .hero-btns{animation:fx-title-in 1s var(--fx-ease) .42s both;}
.js .page-hero h1{animation:fx-title-in .9s var(--fx-ease) both;}
.js .page-hero p{animation:fx-title-in .9s var(--fx-ease) .16s both;}

/* ---------- 14. 渐变流动文字（首屏强调词） ---------- */
@keyframes fx-grad-flow{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}
.hero h1 em{
  background-image:linear-gradient(90deg,var(--accent) 0%,#FFFFFF 35%,var(--accent) 55%,#FFFFFF 80%,var(--accent) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:fx-grad-flow 6s linear infinite;
}

/* ---------- 15. 顶部滚动进度条 ---------- */
.fx-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--accent),#FFFFFF);
  box-shadow:0 0 14px rgba(200,162,74,.65);
  z-index:9999;pointer-events:none;
  transition:width .12s linear;
}
body.cx .fx-progress{box-shadow:0 0 14px rgba(240,123,42,.7);}

/* ---------- 16. 鼠标跟随光晕 ---------- */
.fx-glow{
  position:absolute;width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,162,74,.20),transparent 68%);
  pointer-events:none;z-index:1;opacity:0;
  transition:opacity .45s ease;
  transform:translate(-50%,-50%);
  will-change:left,top;
}
body.cx .fx-glow{background:radial-gradient(circle,rgba(240,123,42,.18),transparent 68%);}
.hero:hover .fx-glow,.page-hero:hover .fx-glow{opacity:1;}

/* ---------- 17. 卡片 3D 倾斜（跟随鼠标） ---------- */
.fx-tilt{
  transform-style:preserve-3d;
  transition:transform .16s ease-out;
}

/* ---------- 18. 点击波纹 ---------- */
@keyframes fx-ripple{
  to{transform:scale(2.8);opacity:0;}
}
.fx-ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.6);
  transform:scale(0);
  animation:fx-ripple .7s ease-out forwards;
  pointer-events:none;
}

/* ---------- 19. 视差层 ---------- */
.js .hero-inner,.js .page-hero-in{will-change:transform;}

/* ---------- 21. Canvas 粒子网络（首屏科技感核心） ---------- */
.fx-canvas{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.9;
}

/* ---------- 22. 光标跟随光点（装饰性，不隐藏原生光标） ---------- */
.fx-cursor{
  position:fixed;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,162,74,.85),rgba(200,162,74,0) 70%);
  pointer-events:none;z-index:99999;
  transform:translate(-50%,-50%);
  transition:width .3s ease,height .3s ease,opacity .3s ease;
  opacity:0;mix-blend-mode:screen;
  will-change:left,top;
}
.fx-cursor.on{opacity:1;}
.fx-cursor.hot{width:44px;height:44px;}
body.cx .fx-cursor{
  background:radial-gradient(circle,rgba(240,123,42,.8),rgba(240,123,42,0) 70%);
}

/* ---------- 23. 磁吸按钮 ---------- */
.fx-magnet{transition:transform .28s cubic-bezier(.22,.61,.36,1);}

/* ---------- 24. 扫描光带（首屏缓慢下扫） ---------- */
@keyframes fx-scan{
  0%{transform:translateY(-10%);opacity:0;}
  10%{opacity:.9;}
  90%{opacity:.5;}
  100%{transform:translateY(1100%);opacity:0;}
}
.fx-scanline{
  position:absolute;left:-10%;right:-10%;height:2px;top:0;
  background:linear-gradient(90deg,transparent,rgba(200,162,74,.6),rgba(255,255,255,.35),rgba(200,162,74,.6),transparent);
  filter:blur(.4px);
  animation:fx-scan 9s linear infinite;
  pointer-events:none;z-index:1;
}
body.cx .fx-scanline{
  background:linear-gradient(90deg,transparent,rgba(240,123,42,.55),rgba(255,255,255,.3),rgba(23,168,140,.5),transparent);
}

/* ---------- 25. 首屏强调词光扫 ---------- */
@keyframes fx-text-shine{
  0%{background-position:-200% center;}
  100%{background-position:200% center;}
}
.hero h1 em{
  background-image:linear-gradient(100deg,var(--accent) 20%,#FFFFFF 45%,var(--accent) 70%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:fx-text-shine 5.5s linear infinite;
}

/* ---------- 26. 资质/数据卡金属描边流光 ---------- */
@keyframes fx-border-flow{
  0%{background-position:0% 50%;}
  100%{background-position:300% 50%;}
}
.cert-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(115deg,transparent 25%,rgba(200,162,74,.55) 45%,rgba(255,255,255,.35) 52%,rgba(200,162,74,.55) 60%,transparent 78%);
  background-size:300% 100%;
  -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 .4s ease;
  animation:fx-border-flow 3.2s linear infinite;
  pointer-events:none;
}
.cert-card:hover::after{opacity:1;}

/* ---------- 28. Mesh 动态光场（高级渐变背景） ---------- */
.fx-mesh{
  position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(200,162,74,.46), transparent 70%),
    radial-gradient(34% 38% at 82% 26%, rgba(72,132,224,.42), transparent 72%),
    radial-gradient(44% 48% at 62% 82%, rgba(200,162,74,.34), transparent 70%),
    radial-gradient(30% 34% at 28% 78%, rgba(120,200,255,.24), transparent 72%);
  filter:blur(30px);
  mix-blend-mode:screen;
  opacity:.6;
  animation:fx-mesh-move 24s ease-in-out infinite alternate;
  will-change:transform;
}
body.cx .fx-mesh{
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(240,123,42,.48), transparent 70%),
    radial-gradient(34% 38% at 82% 26%, rgba(23,168,140,.44), transparent 72%),
    radial-gradient(44% 48% at 62% 82%, rgba(255,180,90,.36), transparent 70%),
    radial-gradient(30% 34% at 28% 78%, rgba(23,168,140,.28), transparent 72%);
}
@keyframes fx-mesh-move{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg);}
  50%{transform:translate3d(2.5%,-2.5%,0) scale(1.09) rotate(2.2deg);}
  100%{transform:translate3d(-2.5%,2.5%,0) scale(1.05) rotate(-2.2deg);}
}

/* ---------- 29. 页面进入遮罩（品牌感开场） ---------- */
.fx-curtain{
  position:fixed;inset:0;z-index:99998;
  background:radial-gradient(circle at 50% 42%,#12233D 0%,#060C15 78%);
  transform-origin:top center;
  animation:fx-curtain-open .95s cubic-bezier(.76,0,.24,1) .12s forwards;
  pointer-events:none;
}
.fx-curtain-mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:13px;letter-spacing:6px;color:rgba(200,162,74,.85);
  animation:fx-curtain-fade .6s ease forwards;
}
body.cx .fx-curtain{
  background:radial-gradient(circle at 50% 42%,#2A1A0E 0%,#120904 78%);
}
body.cx .fx-curtain-mark{color:rgba(240,123,42,.9);}
@keyframes fx-curtain-open{
  0%{transform:scaleY(1);opacity:1;}
  100%{transform:scaleY(0);opacity:1;}
}
@keyframes fx-curtain-fade{
  0%{opacity:0;letter-spacing:16px;}
  40%{opacity:1;letter-spacing:6px;}
  100%{opacity:0;letter-spacing:2px;}
}

/* ---------- 30. 首屏 3D 深度视差（多层不同速度） ---------- */
.js .hero-inner,.js .page-hero-in{
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

/* ---------- 31. 鼠标拖尾光点 ---------- */
.fx-trail{
  position:fixed;border-radius:50%;pointer-events:none;
  z-index:99997;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(200,162,74,.95),rgba(200,162,74,0) 70%);
  will-change:left,top,opacity;
}
body.cx .fx-trail{
  background:radial-gradient(circle,rgba(240,123,42,.95),rgba(240,123,42,0) 70%);
}

/* ---------- 32. 滚动入场加 3D 翻转 ---------- */
section{perspective:1400px;}
.js .reveal{
  transform:translateY(30px) rotateX(7deg) scale(.985);
}
.js .reveal.in{transform:none;}

/* ---------- 33. 超大字号（视觉层级冲击） ---------- */
@media (min-width: 900px){
  .hero h1{font-size:clamp(40px,5vw,66px) !important;line-height:1.18 !important;}
  .page-hero h1{font-size:clamp(32px,3.6vw,50px) !important;}
  .sec-title{font-size:clamp(28px,2.6vw,40px) !important;}
  .hero p{font-size:17.5px !important;max-width:640px;}
}

/* ---------- 34. 数字/关键卡悬浮发光 ---------- */
.trust-cell,.info-card{
  transition:transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease), background-color .35s;
}
.trust-cell:hover,.info-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
}

/* ---------- 36. WebGL 极光着色器背景（GPU 实时渲染） ---------- */
.fx-aurora{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
  opacity:.92;
}

/* ---------- 37. 动态点阵背景 ---------- */
.fx-dots{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.20) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle at 50% 38%, #000 28%, transparent 78%);
  mask-image:radial-gradient(circle at 50% 38%, #000 28%, transparent 78%);
  animation:fx-dots-drift 32s linear infinite;
  opacity:.45;
}
@keyframes fx-dots-drift{
  0%{background-position:0 0;}
  100%{background-position:22px 44px;}
}

/* ---------- 38. 点击冲击波 ---------- */
@keyframes fx-shock-ring{
  0%{transform:translate(-50%,-50%) scale(.18);opacity:.95;}
  100%{transform:translate(-50%,-50%) scale(3.1);opacity:0;}
}
.fx-shock{
  position:fixed;width:120px;height:120px;border-radius:50%;
  pointer-events:none;z-index:99996;
  border:2px solid rgba(200,162,74,.8);
  box-shadow:0 0 26px rgba(200,162,74,.5);
  animation:fx-shock-ring .9s cubic-bezier(.22,.61,.36,1) forwards;
}
body.cx .fx-shock{
  border-color:rgba(240,123,42,.85);
  box-shadow:0 0 26px rgba(240,123,42,.55);
}

/* ---------- 39. 斜向光线掠过 ---------- */
@keyframes fx-beam-sweep{
  0%{transform:translateX(-130%) rotate(16deg);opacity:0;}
  22%{opacity:.8;}
  100%{transform:translateX(240%) rotate(16deg);opacity:0;}
}
.fx-beam{
  position:absolute;top:-32%;left:0;width:32%;height:164%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 42%,rgba(200,162,74,.22) 55%,transparent);
  animation:fx-beam-sweep 9s ease-in-out infinite;
  animation-delay:2.4s;
  pointer-events:none;z-index:0;
}
body.cx .fx-beam{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 42%,rgba(240,123,42,.22) 55%,transparent);
}

/* ---------- 40. 无障碍：尊重系统「减少动态效果」设置 ---------- */
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  .hero,.hero::after,.page-hero::after,.page-hero::before,
  .fx-particles i,.cert-card:hover{animation:none !important;}
  /* 首屏入场动画一律取消 */
  .js .hero .hero-tag,.js .hero h1,.js .hero p,.js .hero-btns,
  .js .page-hero h1,.js .page-hero p{animation:none !important;opacity:1 !important;transform:none !important;filter:none !important;}
  /* 渐变文字恢复纯色，避免透明文字风险 */
  .hero h1 em{
    background:none !important;
    -webkit-text-fill-color:currentColor !important;
    color:#E8D9AF !important;
    animation:none !important;
  }
  .prod-card:hover,.story-card:hover,.cert-card:hover,.net-card:hover,
  .adv-item:hover,.news-card:hover,.btn-gold:hover,.btn-main:hover,
  .cta-btn:hover,.nav-cta:hover{transform:none !important;}
  .btn-gold::after,.btn-main::after,.cta-btn::after{display:none;}
  .fx-glow,.fx-progress{display:none !important;}
  .fx-tilt{transform:none !important;}
  .fx-canvas,.fx-scanline,.fx-cursor{display:none !important;}
  .fx-magnet{transform:none !important;}
  .cert-card::after{display:none !important;}
  .fx-mesh,.fx-trail{display:none !important;}
  .fx-curtain{animation:none !important;display:none !important;}
  .js .reveal{transform:none !important;}
  .fx-aurora,.fx-dots,.fx-beam,.fx-shock{display:none !important;}
}