/* =====================================================================
   fx-mobile.css —— 移动端科技感强化层
   ---------------------------------------------------------------------
   加载顺序必须是：style.css → fx.css → 【fx-mobile.css】
   靠 CSS 层叠覆盖 fx.css 第 12 节里「手机端关掉特效」的那批规则，
   把移动端从"降级版"翻转成"主场版"。

   字体：不引入任何字体文件，全部沿用已有的系统字体栈，
        无 @font-face / @import / 外链，零额外请求，不影响百度抓取与首屏。

   性能守则（重要，手机是弱设备）：
     · 只用 transform / opacity 做动画，不碰 width/height/top/left，不触发重排
     · 所有动画元素加 will-change 但用完即撤（由 fx-mobile.js 控制）
     · 粒子数、DPR 都压到低位；页面不可见时整体暂停
     · 低端机（内存≤2G 或 CPU≤2核）由 JS 打上 .fx-lowend，自动退回静态
     · 尊重系统「减少动态效果」开关
   ===================================================================== */

/* =====================================================================
   0. 移动端专用令牌
   ===================================================================== */
@media (max-width:768px){
  :root{
    --fx-dur:  .72s;                 /* 手机上动画略快，等待感低 */
    --fx-pop:  cubic-bezier(.16,1,.3,1);   /* 强出场缓动，冲击力来源 */
    --fx-skew: 0deg;                 /* 已废弃，恒为 0，勿再使用 */
    --gx: 0;                         /* 陀螺仪 X，-1 ~ 1，由 JS 写入 */
    --gy: 0;                         /* 陀螺仪 Y，-1 ~ 1，由 JS 写入 */
  }
}

/* =====================================================================
   1. 翻转 fx.css 的移动端降级：把特效重新打开
   （下面这些选择器和 fx.css 第12节一一对应，同权重后置覆盖）
   ===================================================================== */
@media (max-width:768px){
  html:not(.fx-lowend) .fx-scan{display:block}
  html:not(.fx-lowend) .fx-grid{
    background-size:52px 52px;
    opacity:.85;
    animation-duration:32s;
  }
  html:not(.fx-lowend) .tier-card::before,
  html:not(.fx-lowend) .form-card::before{display:block}
  html:not(.fx-lowend) .pcard::before,
  html:not(.fx-lowend) .feat::before,
  html:not(.fx-lowend) .step::before,
  html:not(.fx-lowend) .ncard::before{display:block}
  html:not(.fx-lowend) .steps::before,
  html:not(.fx-lowend) .steps::after{display:block}
  html:not(.fx-lowend) .feat::after,
  html:not(.fx-lowend) .step::after{display:block}
}

/* 移动端专属粒子画布（JS 注入 #fxCanvasM，与桌面版 #fxCanvas 互不干扰） */
#fxCanvasM{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.62;
}
@media (max-width:768px){
  .hero{position:relative}
  .hero > .container{position:relative; z-index:1}
}

/* =====================================================================
   2. 首屏：标题逐行揭幕 + 陀螺仪视差
   —— 手机上第一眼的冲击主要靠这个
   ===================================================================== */
@media (max-width:768px){
  /* 标题按行做遮罩上推，比整体淡入更有"开幕"感 */
  html:not(.fx-lowend) .hero h1{
    overflow:hidden;
  }
  html:not(.fx-lowend) .hero h1 > *,
  html:not(.fx-lowend) .hero h1{
    will-change:transform;
  }
  html.fx-ready:not(.fx-lowend) .hero h1{
    animation:fxLineUp .9s var(--fx-pop) both;
  }
  html.fx-ready:not(.fx-lowend) .hero .lead{
    animation:fxLineUp .9s var(--fx-pop) .12s both;
  }
  html.fx-ready:not(.fx-lowend) .hero-cta{
    animation:fxLineUp .9s var(--fx-pop) .22s both;
  }
  html.fx-ready:not(.fx-lowend) .hero-phone{
    animation:fxLineUp .9s var(--fx-pop) .3s both;
  }
  @keyframes fxLineUp{
    from{opacity:0; transform:translate3d(0,42px,0)}
    to  {opacity:1; transform:translate3d(0,0,0)}
  }

  /* 金色高亮词：扫光循环（比静态金字更"活") */
  html:not(.fx-lowend) .hero h1 .accent{
    background:linear-gradient(100deg,
      var(--gold) 0%, var(--gold-2) 28%, #FFF3D6 42%,
      var(--gold-2) 56%, var(--gold) 100%);
    background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:fxShine 4.5s linear infinite;
  }
  @keyframes fxShine{
    0%  {background-position:180% 0}
    100%{background-position:-80% 0}
  }

  /* 分级授权卡：跟随手机倾斜做视差 + 轻微 3D */
  html:not(.fx-lowend) .tier-card{
    transform:
      perspective(900px)
      rotateY(calc(var(--gx) * 4deg))
      rotateX(calc(var(--gy) * -4deg))
      translate3d(calc(var(--gx) * 6px), calc(var(--gy) * 5px), 0);
    transition:transform .35s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
  }
  /* 卡片内的节点随倾斜错位，形成层次 */
  html:not(.fx-lowend) .tier .node{
    transform:translate3d(calc(var(--gx) * 3px), 0, 0);
    transition:transform .4s cubic-bezier(.22,.61,.36,1);
  }
}

/* =====================================================================
   3. 【已移除】滚动速度斜切
   ---------------------------------------------------------------------
   原方案：快速滑动时给内容加 skewY，制造"速度感"。
   实测问题：真机上惯性滚动帧率不稳，skew 值跳变导致文字边缘发虚、
             整块内容看起来在"扭"，停止滚动才回正 —— 观感是"页面坏了"，
             而不是"有质感"。这类效果收益远小于副作用，直接去掉。
   保留 --fx-skew 变量定义只是为了兼容，值恒为 0，不再有任何元素使用它。
   ===================================================================== */
@media (max-width:768px){
  html .section > .container,
  html .marquee-strip > .container{
    transform:none !important;   /* 明确清零，防止旧版缓存的 CSS 残留生效 */
  }
}

/* =====================================================================
   4. 横滑图册：当前卡片"聚焦"，邻居退到背景
   .is-active 由 fx-mobile.js 通过 IntersectionObserver 打上
   ===================================================================== */
@media (max-width:768px){
  .grid-products .pcard,
  .grid-news .ncard{
    transform:scale(.9);
    opacity:.5;
    filter:saturate(.7);
    transition:transform .45s var(--fx-pop),
               opacity .45s var(--ease),
               filter .45s var(--ease),
               border-color .45s var(--ease),
               box-shadow .45s var(--ease);
    will-change:transform, opacity;
  }
  .grid-products .pcard.is-active,
  .grid-news .ncard.is-active{
    transform:scale(1);
    opacity:1;
    filter:saturate(1);
    border-color:var(--gold);
    box-shadow:
      0 24px 50px -24px rgba(0,0,0,.9),
      0 0 0 1px rgba(198,169,107,.35),
      0 0 42px -14px rgba(198,169,107,.5);
  }

  /* 当前卡片上跑一道全息扫光 */
  html:not(.fx-lowend) .grid-products .pcard.is-active .thumb::after{
    content:""; position:absolute; inset:0; display:block; pointer-events:none;
    background:linear-gradient(115deg,
      transparent 38%,
      rgba(255,243,214,.20) 48%,
      rgba(79,209,197,.16) 52%,
      transparent 62%);
    background-size:280% 100%;
    animation:fxHolo 2.8s ease-in-out infinite;
  }
  @keyframes fxHolo{
    0%, 12%  {background-position:180% 0}
    88%, 100%{background-position:-90% 0}
  }

  /* 当前卡片编号角标点亮 */
  .grid-products .pcard.is-active .tag{
    background:linear-gradient(135deg,var(--gold-2),var(--gold));
    color:#241C0B; border-color:transparent;
    box-shadow:0 6px 18px -6px rgba(198,169,107,.8);
  }

  /* 手机上没有 hover，把产品名常驻显示（原来只在 hover 时出现，手机等于看不到） */
  .grid-products .pcard .overlay{
    opacity:1; transform:none;
    background:linear-gradient(to top,rgba(8,14,11,.94),rgba(8,14,11,.15) 62%,transparent);
  }
  .grid-products .pcard:not(.is-active) .overlay{opacity:.75}

  /* 滑动提示：做成会呼吸的胶囊，更明显 */
  .swipe-hint{
    background:rgba(198,169,107,.09);
    border:1px solid var(--line);
    border-radius:999px;
    padding:7px 15px;
    width:max-content;
    animation:fxBreathe 2.4s ease-in-out infinite;
  }
  @keyframes fxBreathe{
    0%,100%{opacity:.65; transform:translateX(0)}
    50%    {opacity:1;   transform:translateX(3px)}
  }
}

/* =====================================================================
   5. 卡片入场：3D 翻起（手机上比纯淡入更有"重量感"）
   ===================================================================== */
@media (max-width:768px){
  html:not(.fx-lowend) .feat.reveal,
  html:not(.fx-lowend) .step.reveal,
  html:not(.fx-lowend) .strip-item{
    opacity:0;
    transform:perspective(800px) rotateX(12deg) translate3d(0,34px,0);
    transition:opacity .7s var(--fx-pop), transform .7s var(--fx-pop);
    clip-path:none !important;      /* 覆盖 fx.css 的幕布裁切，避免和 3D 冲突 */
  }
  html:not(.fx-lowend) .feat.reveal.in,
  html:not(.fx-lowend) .step.reveal.in,
  html:not(.fx-lowend) .strip-item.in{
    opacity:1;
    transform:perspective(800px) rotateX(0) translate3d(0,0,0);
  }
  /* 数据条四格依次进场 */
  .strip-item:nth-child(1){transition-delay:0s}
  .strip-item:nth-child(2){transition-delay:.08s}
  .strip-item:nth-child(3){transition-delay:.16s}
  .strip-item:nth-child(4){transition-delay:.24s}
}

/* =====================================================================
   6. 数据条：顶部扫描线 + 金色大字微光
   ===================================================================== */
@media (max-width:768px){
  html:not(.fx-lowend) .marquee-strip{position:relative; overflow:hidden}
  html:not(.fx-lowend) .marquee-strip::after{
    content:""; position:absolute; top:0; left:-40%; width:40%; height:1px;
    background:linear-gradient(90deg,transparent,var(--gold-2),var(--cyan),transparent);
    animation:fxTrack 3.6s linear infinite;
  }
  @keyframes fxTrack{
    0%  {transform:translateX(0)}
    100%{transform:translateX(350%)}
  }
  .strip-item .k{
    font-variant-numeric:tabular-nums;
    text-shadow:0 0 22px rgba(198,169,107,.35);
  }
}

/* =====================================================================
   7. 合作流程：竖向数据流轨道（手机是 2 列，横轨道不成立）
   ===================================================================== */
@media (max-width:768px){
  html:not(.fx-lowend) .step{position:relative; overflow:hidden}
  html:not(.fx-lowend) .step::after{
    content:""; position:absolute; left:0; top:-100%;
    width:2px; height:100%;
    background:linear-gradient(180deg,transparent,var(--gold),transparent);
    animation:fxFlowY 3s linear infinite;
  }
  .step:nth-child(2)::after{animation-delay:.5s}
  .step:nth-child(3)::after{animation-delay:1s}
  .step:nth-child(4)::after{animation-delay:1.5s}
  @keyframes fxFlowY{
    0%  {transform:translateY(0)}
    100%{transform:translateY(300%)}
  }
  /* 编号数字放大，做成"仪表盘读数" */
  .step .n{
    font-size:2.4rem; opacity:.7;
    background:linear-gradient(180deg,var(--gold-2),rgba(198,169,107,.25));
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}

/* =====================================================================
   8. 触摸涟漪：手指点哪里，哪里泛开一圈金光
   由 fx-mobile.js 在 .btn / .pcard / .mobile-bar a 上注入 <span class="fx-rip">
   ===================================================================== */
.fx-rip{
  position:absolute; border-radius:50%; pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,
    rgba(255,243,214,.55) 0%,
    rgba(198,169,107,.28) 45%,
    transparent 70%);
  animation:fxRip .62s cubic-bezier(.22,.61,.36,1) forwards;
  z-index:5;
}
@keyframes fxRip{
  to{transform:translate(-50%,-50%) scale(1); opacity:0}
}
/* 宿主需要定位上下文与裁切 */
.btn, .pcard, .mobile-bar a, .fab a, .fab button{position:relative; overflow:hidden}
/* 悬浮球是圆的，涟漪也要跟着圆 */
.fab a, .fab button{border-radius:50%}

/* =====================================================================
   9. 底部转化条：扫光 + 呼吸光环（手机上最重要的转化入口）
   ===================================================================== */
@media (max-width:768px){
  .mobile-bar{
    box-shadow:0 -12px 34px -18px rgba(0,0,0,.9);
  }
  /* 顶边一条流动金线，暗示"这里是可操作区" */
  html:not(.fx-lowend) .mobile-bar::before{
    content:""; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),var(--cyan),var(--gold),transparent);
    background-size:200% 100%;
    animation:fxBeam 4s linear infinite;
  }
  @keyframes fxBeam{
    0%  {background-position:200% 0}
    100%{background-position:-200% 0}
  }
  /* 拨打按钮：反复扫过一道高光 */
  html:not(.fx-lowend) .mobile-bar .m-call::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg,
      transparent 40%, rgba(255,255,255,.42) 50%, transparent 60%);
    background-size:300% 100%;
    animation:fxSweep 3.2s ease-in-out infinite;
  }
  @keyframes fxSweep{
    0%,20% {background-position:170% 0}
    80%,100%{background-position:-70% 0}
  }
  /* 按下瞬间的物理反馈 */
  .mobile-bar a:active{transform:scale(.965)}
  .mobile-bar a{transition:transform .16s var(--ease)}
}

/* =====================================================================
   10. 悬浮球：环形滚动进度（把"读到哪了"可视化）
   SVG 由 fx-mobile.js 注入
   ===================================================================== */
.fx-ring{
  /* 必须画在按钮内部：宿主为了裁剪涟漪设了 overflow:hidden，
     画在外面(inset:-5px)会被裁掉，所以用 inset:0 + 半径留边 */
  position:absolute; inset:0; pointer-events:none;
  transform:rotate(-90deg);
}
.fx-ring circle{
  fill:none; stroke-width:2; stroke-linecap:round;
}
.fx-ring .trk{stroke:rgba(198,169,107,.16)}
.fx-ring .bar{
  stroke:var(--gold-2);
  transition:stroke-dashoffset .12s linear;
  filter:drop-shadow(0 0 4px rgba(198,169,107,.7));
}
@media (max-width:768px){
  .fab .phone-fab{width:60px; height:60px}      /* 手机上主 CTA 再大一点，好按 */
  .fab a:active, .fab button:active{transform:scale(.92)}
}

/* =====================================================================
   11. 表单：手机端聚焦时更明确的"激活"反馈
   ===================================================================== */
@media (max-width:768px){
  .field input:focus, .field textarea:focus{
    box-shadow:0 0 0 3px rgba(198,169,107,.18),
               0 0 30px -8px rgba(198,169,107,.45);
  }
  /* 聚焦的输入框底部跑一条扫描线 */
  /* 注意：这里不能加 overflow:hidden，否则上面那圈聚焦光晕会被裁掉 */
  html:not(.fx-lowend) .field:focus-within::after{
    content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
    background:linear-gradient(90deg,transparent,var(--gold-2),var(--cyan),transparent);
    background-size:200% 100%;
    animation:fxBeam 2s linear infinite;
  }
  .form-card{padding:30px 22px}
  /* 提交按钮按下反馈 */
  .btn:active{transform:scale(.97)}
}

/* =====================================================================
   12. 导航抽屉：菜单项依次滑入
   ===================================================================== */
@media (max-width:768px){
  html:not(.fx-lowend) .drawer.open a{
    animation:fxDrawerIn .5s var(--fx-pop) both;
  }
  .drawer.open a:nth-child(1){animation-delay:.06s}
  .drawer.open a:nth-child(2){animation-delay:.12s}
  .drawer.open a:nth-child(3){animation-delay:.18s}
  .drawer.open a:nth-child(4){animation-delay:.24s}
  .drawer.open a:nth-child(5){animation-delay:.30s}
  .drawer.open a:nth-child(6){animation-delay:.36s}
  @keyframes fxDrawerIn{
    from{opacity:0; transform:translate3d(26px,0,0)}
    to  {opacity:1; transform:translate3d(0,0,0)}
  }
  /* 抽屉背景加一层网格，跟全站科技语言统一 */
  html:not(.fx-lowend) .drawer::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background-image:
      linear-gradient(to right, rgba(198,169,107,.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(198,169,107,.05) 1px, transparent 1px);
    background-size:34px 34px;
    -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);
            mask-image:linear-gradient(180deg,#000,transparent 75%);
  }
}

/* =====================================================================
   13. 板块标题：进入视口时下划线拉出
   ===================================================================== */
@media (max-width:768px){
  .section-head h2{position:relative; padding-bottom:14px}
  .section-head h2::after{
    content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
    background:linear-gradient(90deg,var(--gold-2),var(--cyan),transparent);
    transition:width .9s var(--fx-pop) .15s;
  }
  .section-head.in h2::after,
  .reveal.in .section-head h2::after,
  .section-head.reveal.in h2::after{width:72px}
}

/* =====================================================================
   14. 闸门：低端机 / 省电模式 / 减少动态效果 一律退回静态
   —— 内容始终 100% 可见可读，动效只是加分项
   ===================================================================== */
html.fx-lowend .fx-grid,
html.fx-lowend .fx-scan,
html.fx-lowend #fxCanvasM{display:none !important}
html.fx-lowend .grid-products .pcard,
html.fx-lowend .grid-news .ncard{
  transform:none !important; opacity:1 !important; filter:none !important;
}
html.fx-lowend .tier-card{transform:none !important}

@media (prefers-reduced-motion:reduce){
  #fxCanvasM{display:none !important}
  .fx-rip{display:none !important}
  .grid-products .pcard,
  .grid-news .ncard{
    transform:none !important; opacity:1 !important; filter:none !important;
    transition:none !important;
  }
  .tier-card,
  .tier .node{transform:none !important}
  .hero h1, .hero .lead, .hero-cta, .hero-phone,
  .drawer.open a, .swipe-hint,
  .mobile-bar::before, .mobile-bar .m-call::after,
  .marquee-strip::after, .step::after,
  .field:focus-within::after,
  .grid-products .pcard.is-active .thumb::after{
    animation:none !important;
  }
  .hero h1 .accent{
    -webkit-text-fill-color:var(--gold-2); color:var(--gold-2);
    background:none; animation:none !important;
  }
  .feat.reveal, .step.reveal, .strip-item{
    opacity:1 !important; transform:none !important;
  }
  .section-head h2::after{width:72px; transition:none}
}

/* 打印：全部装饰隐藏 */
@media print{
  #fxCanvasM, .fx-rip, .fx-ring{display:none !important}
}