/* ==========================================================================
   首页 banner —— 参考 UEMO 单元 id/415「banner02-切换」一比一复刻
   （独立验收版：hero415-demo.html；本文件 = 接入正式首页的版本，去掉了参考单元的
     50×50 图标块，其余规格完全一致）

   结构（挂在 .scene-hero 里）：
     .scene-hero
       ├─ .background-layer-group     参考的页面背景层（纯色 #0F111C + Spline 3D 场景）
       └─ .bn                          layout-banner-block：1200×500 轮播

   规格全部来自参考页真身实测（getComputedStyle / UePage.css / 官方 chunk），
   数值与坑见 skill ntkrib-showroom-site/references/uemo-banner415-replication.md
   ========================================================================== */

/* 参考站 banner 块变量（作用域限在首屏，不污染全局）。
   ⚠️ 首屏背景必须是透明的：参考站那层不透明 #0F111C 会把页面级「固定星空 + 鼠标流体」整片盖住
   （用户 2026-09-11 明确要求：星空与流体作为固定背景，首页滚到哪都要看得见）。 */
.scene-hero{
  --bn-blue: rgb(0,34,255);
  --bn-white: rgb(249,249,249);
  justify-content:center;
  background:transparent;
}

/* ===== 首屏背景动画层（参考站 Spline 3D 场景）=====
   ⚠️ 它必须挂在【页面级】而不是 .scene-hero 里面：hero/main 都是 stacking context，
   放在里面比不到页面级星空，且 Spline 画布会渲染出整片不透明黑底，把固定星空+流体盖死
   （用户 2026-09-11 要求：星空与流体作为固定背景，首页滚到哪都看得见）。
   挂在 body 下与 #bgStars 同层 → mix-blend-mode:screen 让黑变透明、只留发光光带；
   滚出首屏由 js/hero-banner415.js 淡出。 */
/* 2026-09-12 用户「波浪带现在在下面，往上移动，到文案的中间」：
   整层上移 22%（用户第二轮「再压一点点，让它正好贴着标题下沿而不是穿过标题」）。
   实测（1792x940，文案隐藏后连拍 6 帧取中位，抵消场景自身起伏；标题 249~496、副标题 496~574、按钮 574~626）：
     位移 0%   光带中心线 y=873（画面 93%，贴底）
     位移 -22% 光带中心线 y=462、主体 410~505（挪动范围仅 95px，稳）→ 正好压在标题下沿
     位移 -28% 中心线 y=337、主体浮动 76~361（±140px，会甩上去切标题）→ 被否
     位移 -40% 主体 322~522（明显穿过标题）→ 被否
   结论：-22% 是「贴着标题下沿且稳定不穿字」的值。
   用 transform 不动布局；mix-blend-mode:screen 下场景黑底等于不变，所以上移不会露边。 */
#heroSpline{position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:1;transform:translateY(-22%)}
#heroSpline spline-viewer{position:absolute;width:100%;height:100%}

/* ===== banner 本体 ===== */
.scene-hero > .bn{position:relative;z-index:2;margin:0 auto;width:100%;max-width:1200px;height:500px;overflow:hidden;color:#fff;border-radius:0}
.bn-track{display:flex;height:100%;width:100%;will-change:transform}
.bn-slide{position:relative;flex:0 0 100%;width:100%;height:100%;overflow:hidden}
/* .item-media-cdd15 —— 参考站这张图服务端 403（连它的封面缩略图里都没有），实际渲染为透明，故留空 */
.bn-media{position:relative;height:100%}
.bn-media img{display:block;width:100%;height:100%;object-fit:cover}
/* .layer--item-info-e4376 */
.bn-info{position:absolute;inset:0;z-index:2}
/* .item-info-box-f2b12（box-sizing:content-box + 6% 左右内边距，与参考同构） */
.bn-info-box{box-sizing:content-box;width:calc(100% - 12%);max-width:100%;padding:0 6%;margin:0 auto;
  display:flex;height:100%;justify-content:center;align-items:flex-start}
/* .item-info-d1db3：水平居中 + 垂直贴顶（参考 data-x-align=center / data-y-align=top）
   下内边距 143px 是参考站配 62px 标题的值；2026-09-11 标题放大到 80px 后，
   最长的第 2 屏（副标题 3 行）会顶到 500px 盒的下沿把按钮裁掉 → 收到 100px，留出余量。 */
.bn-col{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 0 64px 0;
  /* 2026-09-12 用户「文案和按钮往下移动一点，整体在画布中间」：实测块中心 441 vs 画布中心 470 → 下移 3.1vh（≈29px@940）
     用 transform 只挪视觉、不影响布局（层级不变：文案仍在波浪带之上，见 .bn/.bn-info 的 z-index:2） */
  transform:translateY(3.1vh)}
/* .item-title-cab46 —— 2026-09-11 用户「字体要放大」：62px → 80px；
   2026-09-12 用户「大标题和副标题都要放大」：80px → 112px（副标题 14px → 20px）。
   放大后 500px 盒会装不下（标题 2×112 + 段间距 + 副标 + 按钮），所以同步收紧三处间距：
   本题 padding-bottom 5%→3.4%、.bn-sub 60px→46px、.bn-col 100px→64px。改字号请连带复算这四处。 */
.bn-title{margin:0;font-size:112px;line-height:1;font-weight:700;letter-spacing:normal;
  color:var(--bn-white);padding:0 0 3.4% 0;white-space:pre-line}
/* 2026-09-12 用户「NTKRIB 字体不好看」——原来拉丁字母继承 body 的微软雅黑字形（发闷、无设计感）。
   英文行改用站内自带的 Plus Jakarta Sans 800（与巨型描边字标 Ntkrib 同一套字体，全站英文统一），
   中文行仍走 body 的「微软雅黑」。只影响标记了 .bn-word 的那一行字号文字。 */
.bn-title .bn-word{font-family:'Plus Jakarta Sans','Microsoft YaHei','微软雅黑',Arial,sans-serif;
  font-weight:800;letter-spacing:-.01em}
/* .item-subtitle-fccf5 */
.bn-sub{margin:0;max-width:640px;font-size:20px;font-weight:400;line-height:160%;
  color:rgba(249,249,249,.6);padding:0 0 46px 0}
/* .item-button-group-f8040 */
.bn-btns{display:flex;gap:0 16px;font-size:15px;font-weight:700;line-height:1.5}
/* .btn-ece02[data-theme=custom] */
.bn-btn{display:inline-flex;overflow:hidden;align-items:center;box-sizing:border-box;padding:14px 32px;
  border-width:0;border-style:solid;border-color:var(--bn-white);border-radius:1000px;
  background:transparent;background-clip:padding-box!important;color:var(--bn-white);
  text-decoration:none;cursor:pointer;transition:.26s ease,background 0s;vertical-align:bottom}
/* 主按钮：2026-09-11 用户「蓝色按钮改成紫色按钮，看图一」→ 用全站统一的品牌紫
   （.action-primary 同款：linear-gradient(135deg,#954fec,#584cd6) + background-size 160% 160%，
    图一按钮左端采样像素 = (146,79,235) = #954FEC，确认就是这颗）*/
.bn-btn--p{background-image:linear-gradient(135deg,#954fec,#584cd6);background-size:160% 160%;
  background-position:0 0;box-shadow:0 16px 40px rgba(88,76,214,.22)}
.bn-btn--p:hover{background-position:100% 100%;box-shadow:0 20px 50px rgba(88,76,214,.4)}
/* .btn-ece02[data-animation=moveUp]：悬停上浮 .4em（次按钮 data-animation="" → 只换色） */
.bn-btn[data-animation="moveUp"],.bn-btn[data-animation="moveUp"]:hover{transition:.26s ease}
.bn-btn[data-animation="moveUp"]:hover{transform:translateY(-.4em)}
.bn-btn--g{border-width:1px;border-color:rgba(249,249,249,.6)}
.bn-btn--g:hover{color:#000;background-color:var(--bn-white)}
/* .btn-text-d97c4 */
.bn-btn-text{line-height:inherit;text-decoration:none}
/* .btn-icon-a4b75 + .btn-after-lottie-icon-e8f82：1.5em×1.5em、margin-left .5em、currentColor */
.bn-btn-icon{--icon-size:1em;font-size:var(--icon-size);flex:0 0 auto;display:block;
  width:calc(var(--icon-size)*1.5);min-width:0;height:calc(var(--icon-size)*1.5);margin-left:.5em;
  --lottie-player-path-fill:currentColor;--lottie-player-path-stroke:currentColor}

/* .layer--operate-eee0b / .operate-box-e5002 / .operate-box--inner-b4609 */
.bn-operate{position:absolute;inset:0;z-index:10;pointer-events:none}
.bn-operate-box{box-sizing:content-box;width:calc(100% - 12%);max-width:100%;padding:0 6%;height:100%;margin:0 auto}
.bn-operate-inner{position:relative;display:grid;width:100%;height:100%;color:#fff}
/* .slider-pagination-a2a9a[data-layout=3][data-pos=2] */
.bn-pagi{position:absolute;bottom:0;left:0;display:flex;width:100%;padding:40px 0;gap:60px;
  justify-content:center;align-items:center;font-size:20px;font-weight:700;line-height:44px;color:#fff}
.bn-pagi button{position:relative;cursor:pointer;pointer-events:all;background:none;border:0;padding:0;
  font:inherit;color:inherit;text-align:center}
.bn-pagi button::before,.bn-pagi button::after{position:absolute;bottom:0;left:0;width:100%;height:1px;
  content:"";background:hsla(0,0%,100%,.4)}
.bn-pagi button::after{opacity:0;background:#fff}
.bn-pagi button[data-active="true"]::after{opacity:1;animation:bn-progress 5.2s linear forwards}
@keyframes bn-progress{from{width:0}to{width:100%}}
.bn-pagi .t{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:213px;
  padding:10px 0;font-size:14px;font-weight:700;line-height:1.5555555556em;color:#fff}

/* ≤900px：2026-09-11 用户手机端三条 —— ①底部分页标题隐藏 ②标题按视口缩放（9 字最长行永远单行，消掉"点，"孤行）
   ③内边距收窄。参考站原断点是 749.98px，但那档在 750（常见手机横屏/窄窗）会漏成桌面版：80px 标题换行 + 分页标题全露。 */
@media (max-width:900px){
  .bn-info-box{padding:0 20px;width:calc(100% - 40px);align-items:center}
  /* 2026-09-15 用户「标题和按钮没有中间居中，上面间距小，下面间距大」：
     桌面构图是 y-align=top（内容贴 500px 盒顶）+ .bn-col 的 translateY(3.1vh) 下推，
     手机档实测标题上 238px / 按钮下 369px（差 131px）。这里改成整块垂直居中、去掉那 3.1vh，
     上下留白相等（实测 390×844 下 ≈273 / 273）。 */
  .bn-col{padding:0;transform:none}
  .bn-title{font-size:clamp(52px,10vw,84px);padding:0 0 28px 0;max-width:800px}   /* 10vw×6字=60vw < 内容宽 88vw（最长行「您的罗纹领袖」6 字），不换行 */
  .bn-sub{font-size:15px;padding:0 0 32px 0}
  .bn-btns{gap:0 10px;font-size:12px}
  .bn-operate-box{padding:0 20px;width:calc(100% - 40px)}
  .bn-pagi{gap:8px}
  .bn-pagi button{width:100%}
  .bn-pagi .t{display:none}
}

/* 关掉动效偏好：不自动切屏（JS 同样判断），进度线动画停 */
@media (prefers-reduced-motion:reduce){
  .bn-pagi button[data-active="true"]::after{animation:none;width:100%}
  .bn-track{transition:none!important}
}