/* 全站共享动效层。所有效果在 prefers-reduced-motion 下自动关闭。 */

/* 浅色页面的框线减淡一倍 */
:root{--line:#e9e9ec}

/* 全站导航栏统一：高度、字号、logo 尺寸与位置（主页与产品页一致） */
header .nav{height:52px; font-size:14px}
header .logo-img{height:20px; width:auto; position:static}

/* 顶部阅读进度条 */
.mo-prog{position:fixed; top:0; left:0; height:2px; width:100%; z-index:60;
  background:currentColor; opacity:.9; transform:scaleX(0); transform-origin:0 50%;
  will-change:transform; pointer-events:none;
  transition:transform .12s linear}

/* 导航滚动后收窄 */
header{transition:height .3s cubic-bezier(.2,.7,.3,1), background-color .3s, box-shadow .3s}
header .nav{transition:height .3s cubic-bezier(.2,.7,.3,1)}
header.mo-cond .nav{height:44px}
header.mo-cond{box-shadow:0 1px 0 rgba(0,0,0,.06)}

/* 容器进入视口后，子项依次浮现 */
.mo-item{opacity:0; transform:translateY(16px);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1)}
.fade.in .mo-item{opacity:1; transform:none;
  transition-delay:calc(var(--i, 0) * 65ms)}

/* 图片：轻微放大并揭幕 */
.mo-img{clip-path:inset(0 0 100% 0); transform:scale(1.05);
  transition:clip-path 1s cubic-bezier(.2,.7,.3,1), transform 1.2s cubic-bezier(.2,.7,.3,1)}
.fade.in .mo-img, .mo-img.in{clip-path:inset(0 0 0 0); transform:none}

/* 标题揭幕。
   两条硬约束：
   1) inset() 不能用负值 —— 部分浏览器判定整条声明无效并丢弃；
   2) 绝不能给"自己就是 IntersectionObserver 观察目标"的元素加 clip-path ——
      裁成零高度后 IO 认为它不可见，.in 永远不会被加上，元素就永久消失。
      因此：作为 .fade 本身的标题只做模糊+位移（不影响几何），
            只有作为 .fade 子元素的标题才用 clip-path。 */
.mo-head{clip-path:inset(0 0 100% 0); transform:translateY(14px);
  transition:clip-path .85s cubic-bezier(.2,.7,.3,1), transform .85s cubic-bezier(.2,.7,.3,1)}
.fade.in .mo-head{clip-path:inset(0 0 0 0); transform:none}
.fade.mo-head{clip-path:none}          /* 保险：万一被加到观察目标自身也不裁切 */

.mo-head-soft{filter:blur(7px); transition:filter .85s cubic-bezier(.2,.7,.3,1)}
.fade.in.mo-head-soft{filter:none}

/* 深色区块跟随指针的柔光 */
section.dark{position:relative; isolation:isolate}
section.dark > .wrap{position:relative; z-index:1}
.mo-spot{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  transition:opacity .5s ease;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.06), rgba(255,255,255,0) 68%)}
section.dark:hover .mo-spot{opacity:1}

/* 产品卡：图随卡片微缩放 */
.prod div:has(> img){overflow:hidden; border-radius:12px}
.prod img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.prod:hover img{transform:scale(1.03)}

/* 数字滚动时锁定等宽，避免宽度抖动 */
.stats b, .kpi b{font-variant-numeric:tabular-nums}

/* 移动端导航：汉堡按钮 + 下拉面板（JS 动态插入按钮，见 motion.js） */
.menu-btn{display:none; width:44px; height:44px; margin-left:auto; border:0; background:none;
  align-items:center; justify-content:center; cursor:pointer; flex:none; padding:0;
  -webkit-tap-highlight-color:transparent}
.menu-btn span{display:block; width:20px; height:1.5px; background:var(--fg); position:relative;
  transition:background-color .2s}
.menu-btn span::before,.menu-btn span::after{content:""; position:absolute; left:0; width:20px;
  height:1.5px; background:var(--fg); transition:transform .25s, top .25s}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}
.nav.open .menu-btn span{background:transparent}
.nav.open .menu-btn span::before{top:0; transform:rotate(45deg)}
.nav.open .menu-btn span::after{top:0; transform:rotate(-45deg)}

@media(max-width:900px){
  .menu-btn{display:flex}
  .nav{position:relative; flex-wrap:wrap; row-gap:0}
  .nav ul{display:flex !important; flex-direction:column; gap:0; width:100%;
    max-height:0; overflow:hidden; opacity:0; margin:0; padding:0; order:10;
    transition:max-height .32s cubic-bezier(.2,.7,.3,1), opacity .25s}
  .nav.open ul{max-height:70vh; opacity:1; overflow-y:auto}
  .nav ul li{width:100%}
  .nav ul a{display:block; text-align:center; padding:15px 8px; font-size:16px;
    letter-spacing:.02em; border-radius:10px; margin:2px 0; transition:background-color .2s, color .2s}
  .nav ul a:active{background:rgba(0,0,0,.05)}
  .nav ul a.cur::after{display:none}
  .nav ul a.cur{color:var(--fg); font-weight:600; background:rgba(0,0,0,.045)}
  .back-m{display:none !important}
  .lang button{padding:8px 15px; font-size:13px}
}

/* 产品页品牌面包屑：logo（点击回首页）| 产品型号 */
.brand a{display:flex; align-items:center}
.brand .brand-div{width:1px; height:15px; background:var(--line)}
.brand .brand-model{font-weight:600; letter-spacing:.06em; font-size:13.5px; color:var(--muted); white-space:nowrap}

/* 产品页移动端：悬浮在底部的返回首页按钮（motion.js 注入） */
.home-fab{position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom)); z-index:55; display:none;
  padding:11px 24px; border-radius:99px; background:rgba(29,29,31,.9); color:#fff;
  font-size:14px; font-weight:500; text-decoration:none; white-space:nowrap;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 4px 22px rgba(0,0,0,.22); -webkit-tap-highlight-color:transparent}
@media(max-width:900px){.home-fab{display:inline-flex}}

@media(prefers-reduced-motion:reduce){
  .mo-item, .mo-img, .mo-head, .mo-head-soft{opacity:1 !important; transform:none !important;
    clip-path:none !important; filter:none !important; transition:none !important}
  .mo-prog, .mo-spot{display:none}
  header.mo-cond .nav{height:52px}
}


/* 兜底：若揭幕因任何原因未触发，动画结束后也必须可见 */
.mo-safe .mo-head, .mo-safe .mo-img{clip-path:none !important; transform:none !important}
.mo-safe .mo-head-soft{filter:none !important}

/* 兜底：网格/弹性子项默认 min-width:auto，内容一旦超宽就会把整列撑开、
   造成整页横向滚动。窄屏下统一收口。 */
@media(max-width:900px){
  .split > *, .struct-split > *, .two-tbl > *, .prod > *,
  .vs > *, .caps > *, .apps > *, .forms > *, .mapwrap > *{min-width:0}
  .split img, .struct-split img, .prod img, .mapwrap img{max-width:100%; height:auto}
  table{table-layout:fixed}
  td, th{overflow-wrap:anywhere}
}

/* ---- 移动端下拉菜单：必须自带不透明背景 ----
   菜单是 .nav 换行后的第二行，超出 header 的 52px 背景之外，
   不给它自己的底色就会透出下方正文。 */
@media(max-width:900px){
  .nav.open{height:auto}
  .nav ul{background:rgba(255,255,255,.98);
    -webkit-backdrop-filter:saturate(180%) blur(22px);
    backdrop-filter:saturate(180%) blur(22px)}
  .nav.open ul{border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    box-shadow:0 16px 34px rgba(0,0,0,.12); padding:10px 16px 14px}
}

/* ---- PS 页压力图：窄屏下画布与型号切换按钮不得撑破容器 ---- */
@media(max-width:900px){
  /* 窄屏下必须拉伸：justify-items:center 会让 .mapbox 按最大内容宽度成型，
     再怎么给按钮 min-width:0 也没用，列宽依旧被顶开。 */
  .mapwrap{justify-items:stretch !important}
  .mapbox{padding:16px; width:100%}
  #pmap{width:auto; height:auto; max-width:100%; max-height:min(56vh,520px)}
  /* 注意：这里不能用 white-space:nowrap ——
     按钮文字较长，nowrap 会把最小内容宽度顶到整行文字宽，
     进而撑开整个网格列造成横向滚动。必须允许换行。 */
  .gridsw{flex-wrap:wrap}
  .gridsw button{flex:1 1 0; min-width:0; white-space:normal; line-height:1.35}
}
@media(max-width:480px){
  .gridsw button{font-size:11px; padding:7px 6px; letter-spacing:0}
}

/* 手机首屏：遮罩上浅下深——上方让出视频，下方保证标题可读 */
@media(max-width:860px){
  .hero::after{background:linear-gradient(180deg,
    rgba(0,0,0,.22) 0%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.70) 100%) !important}
  .hero-bg{opacity:1}
}