/* ============================================================
   brand.html — 品牌介绍（关于我们）
   版式 1:1 复刻 UEMO 模板 id/2526「个人介绍-百分比形式」
   · 容器 = 视口 80%（桌面）/ 88%（≤750px）
   · 字号几乎全部 vw：巨字 10vw / 区块标题 4vw / 宣言 2vw / 数据 3.4vw / 水印 7vw
   · 垂直节奏 = 分区间距 8%（= 容器宽的 8%）+ 块间距 1.58vw
   选择器统一 bp- 前缀；本页不引 site-page.css（内页浅色系统与本页版式不同）
   ============================================================ */

.bp {
  --bp-cw: 80%;          /* 内容列宽（桌面） */
  --bp-pad: 1.58vw;      /* 块内上下留白（= 容器宽 2%，参考站 row+block 各 1%） */
  --bp-sec: 6.33vw;      /* 分区间距（= 容器宽 8%） */
  --bp-ink: #14151a;
  --bp-mute: #777;
  background: #fff;
  color: var(--bp-ink);
  overflow-x: clip;
}

.bp { margin: 0; }
html.bp-js { overflow-x: clip; }   /* 卡片滑入瞬间 track 会探出视口，靠 clip 不留横向滚动条 */
.bp :where(h1, h2, h3, p, figure, ul, li) { margin: 0; padding: 0; }
.bp-main { background: #fff; }
.bp a { color: inherit; }

.bp-wrap {
  box-sizing: border-box;
  width: var(--bp-cw);
  margin: 0 auto;
}

/* 分区间距 */
.bp-sec { padding: var(--bp-sec) 0; }
.bp-sec--stats { padding: 0 0 4.75vw; }
.bp-sec--cards { padding: 2.36vw 0; }

/* 块（= 参考站的 layout-row 1% + layout-text-block 1% 两层留白） */
.bp-block { padding: var(--bp-pad) 0; }

/* ---------- ① About ---------- */

/* 2026-09-12 用户「品牌介绍页增加 banner，背景是最新的星空，字体改成白色，
   图片一半在星空背景一半在白色背景」——
   · 星空层用 absolute（不是首页那种 fixed 全屏层）：本页除 banner 外都是白底
   · 层高 = 主图垂直中心，由 js/brand-page.js 实测写进 --bp-band（兜底值见下方 44vw 估算）
   · 分界线正好切在图的正中，所以本段两块去掉了视差（±120px 行程会把图从线上推走） */
.bp-sec--about { position: relative; padding-bottom: 3.5vw; }
/* ⚠️ 这里的 3.5vw 必须与 js/brand-page.js setBand() 里「标题底部 + 3.5vw」的余量一致：
   黑带高度 = 标题底部 + 3.5vw；About 段自身也要留出这 3.5vw 内边距，
   否则黑带会溢出到下一段（白底数据栏）上，压掉它顶部 50px。 */
.bp-banner-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;                 /* 全出血：分界线要横贯整个视口宽 */
  height: var(--bp-band, 32vw); /* JS 未跑时的兜底：主图删除后 =「标题底部 + 3.5vw」，1440 下 ≈ 453px */
  transform: translateX(-50%);
  background: #000;
  overflow: hidden;
  pointer-events: none;         /* 背景层不吃鼠标事件 */
  z-index: 0;
}
.bp-banner-bg spline-viewer { position: absolute; inset: 0; width: 100%; height: 100%; }
.bp-sec--about .bp-wrap { position: relative; z-index: 1; }
.bp-sec--about .bp-giant { color: #fff; }

.bp-eyebrow {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bp-mute);
  text-align: center;
}

.bp-giant {
  /* 2026-09-12 用户「banner的英文缩小40%」→ 再「NTKRIB没有缩小，是一起缩小」：
     整个 banner 巨字（ABOUT + NTKRIB 两行一起）由 10vw 缩到 60% = 6vw。
     蒙版百分比是相对行盒的、墨迹随字号等比缩放，所以不用改；只有叠压 margin 要重算。 */
  font-size: 6vw;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #000;
  text-align: center;
}
.bp-giant span { display: block; }

/* ---------- banner 标题的字体效果 + 动画（2026-09-12 用户令）----------
   ① 蒙版：**第一行 ABOUT** 下沿 1/3 由黑渐隐到透明（用户：「ABOUT 加上，NTKRIB 是正常的」）。
      用 mask 而不是覆盖层 —— 覆盖层会把那一条的星空也涂黑，mask 只吃字形。
   ② NTKRIB 上移：两行视觉间距收紧（负 margin 只作用第二行；行盒 line-height:1，
      字形本身还有约 1/4 em 的空档）——上移后 ABOUT 的渐隐尾巴正好压在 NTKRIB 顶上。
   ③ 入场：两行错峰上浮淡入（父块 .bp-block 原本整体上浮 26px，这里拆成逐行、更干净）。
   ④ 鼠标视差在 js/brand-page.js 里做（写在外层 .bp-drift 上，不与这里的分行 transform 抢）。 */
.bp-sec--about .bp-giant span:first-child {
  /* 2026-09-12 用户：「蒙版遮住五分之二，黑色到透明黑色。NTKRIB 往上移动，遮住 ABOUT 五分之二」
     实测字形（把另一行隐藏后单量，避开星点/滚动条干扰）：行盒 144px、ABOUT 墨迹落在
     行盒 12.5%~90.3%（第 197~309 行，113px）。要求遮住墨迹下 2/5 →
     墨迹 60% = 行盒 59.2%，墨迹底 = 行盒 90.3% → 蒙版 59% 起淡、90% 完全透明。
     百分比是相对行盒的、墨迹与字号成正比 → 第一行缩小后这组数字不用改。 */
  -webkit-mask-image: linear-gradient(to bottom, #000 0 59%, rgba(0, 0, 0, 0) 90%);
  mask-image: linear-gradient(to bottom, #000 0 59%, rgba(0, 0, 0, 0) 90%);
}
/* NTKRIB 上移压住 ABOUT 被蒙掉的那一段：目标是 NTKRIB 墨迹顶落在 ABOUT 墨迹的 80%。
   2026-09-12 第二轮：用户「NTKRIB 往下移动，遮住五分之一」→ 目标由 60%（下 2/5）改 80%（下 1/5）。
   第三轮：ABOUT 缩到 6vw 后公式解重算 ——
     m = −0.2526·F1 − 0.125·F2（F1=6vw 第一行字号、F2=10vw 第二行字号）= −2.77vw
   （原来 −3.9vw 是按两行同为 10vw 算的；不重算两行就会脱开、不再叠压）。 */
.bp-sec--about .bp-giant span + span { margin-top: -2.33vw; }
.bp-giant span { transition: transform .95s cubic-bezier(.2, .65, .25, 1), opacity .95s ease; }
.bp-giant span:nth-child(2) { transition-delay: .14s; }
.bp-js .bp-block--title:not(.is-in) .bp-giant span { opacity: 0; transform: translateY(48px); }

.bp-portrait {
  display: block;
  width: 30%;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  background: #f6f6f6;
  overflow: hidden;
}
.bp-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.bp-name {
  margin-top: 0;
  font-size: 4vw;
  line-height: 1.6;
  font-weight: 700;
  color: #14151a;
  text-align: center;
}
.bp-role {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bp-mute);
  text-align: center;
}

.bp-lead {
  --bp-fit: 2vw;                 /* 基准字号，JS 按此缩放到单行 */
  width: 60%;
  margin: 0 auto 1.94vw;
  font-size: var(--bp-fit);
  line-height: 1.4;
  color: #333;
  text-align: center;
  white-space: nowrap;           /* 标题/宣言只占一行 */
  text-wrap: nowrap;
}
.bp-prose {
  width: 70%;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bp-mute);
  text-align: center;
  text-wrap: pretty;
}
.bp-prose p { min-height: 1.6em; }

/* ---------- ② 数据四栏：2026-09-12 用户「改成图三，一模一样」----------
   内容与版式 100% 沿用首页品牌屏那一组（.ab179-stats/.ab179-num/.ab179-en，
   样式来自 css/about179.css——本页已引入该表；容器也用同款 .ab179-wrap，
   否则 1200px 的 space-between 对齐与首页对不上）。背景按图三做成星空黑带。 */
/* ---------- ② 数据四栏：白底（2026-09-12 用户「取消星空背景、要白底、字体改黑色」）----------
   原来这段是「星空黑带」：.bp-stats-bg 铺 100vw 满宽的 #000 + spline005 星空层。
   用户现在要求取消星空、回到白底，所以星空层的 markup 已从 brand.html 删除，这里只留配色。
   文字三级色（用户口径：2004 黑色 / 年·公司成立 灰色 / 英文 浅灰色）——
   注意必须用 .bp-sec--stats 作用域覆盖：同一组 .ab179-num 类在首页品牌屏仍要白字。 */
.bp-sec--stats { position: relative; padding: 0; background: transparent; }
/* ---------- 数据栏：间距 -20% + 入场动画（2026-09-12 用户「图一要增加动画效果，间距缩减20%」） ----------
   间距：行仍是 space-between、内容列宽不变，改成给每个「栏」加左右内边距 —— 加宽栏身 → 栏间距缩小。
        ⚠️ 不能用 CSS 百分比/calc 做：这四栏是 grid-template-columns: repeat(4, max-content) 的
        max-content 轨道，百分比 padding 在自定尺寸轨道里会被解析成 0（实测 calc/max/clamp 六种写法
        全是 0px）。所以改为 JS 量出「行宽 − 四栏内容宽」再按 0.025 写 px（见 js/brand-page.js
        的 sizeStatGaps()），2190 视口栏距 202→162、1440 视口 35.7→28.5，都是原间距的 80%。
   动画：四栏错峰上浮淡入（CSS 过渡，延迟 0/.12/.24/.36s）+ 数字 0→目标计数（JS，用原始 rAF 时钟）。 */
.bp-js .bp-sec--stats .ab179-stat {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1), transform .9s cubic-bezier(.215, .61, .355, 1);
}
.bp-js .bp-sec--stats .ab179-stat.is-in { opacity: 1; transform: none; }
.bp-sec--stats .ab179-stat:nth-child(2) { transition-delay: .12s; }
.bp-sec--stats .ab179-stat:nth-child(3) { transition-delay: .24s; }
.bp-sec--stats .ab179-stat:nth-child(4) { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .bp-js .bp-sec--stats .ab179-stat { opacity: 1; transform: none; }
}

/* ---------- 数据白板：几何一次说清（2026-09-12 三轮修正后收敛） ----------
   结构：本段整段铺星空（.bp-stats-bg），中间一块白板 .ab179-wrap 托住数据，两侧露出星空条。
   ① 白板宽 = 视口 − 两侧星条（各 --strip=200px）
   ② 白板内左右留白 --pad：屏够宽（≥1748px）实打实 200px（用户「数据要往中间」），
      较窄按 (100vw − 1290px)/2 递减、下限 20px（1290 = 数据 768 + 三处间距最小 120 + 星条 400）
   ③ ⚠️ 必须显式 box-sizing: border-box —— 本页不引 prototype.css，.ab179-wrap 默认是 content-box，
      否则 width 只算内容、padding 会额外撑开白板，把两侧星条挤成 0。
   数字 94px 与三级配色规格全程未动；黑带下沿与白板顶边齐平（段 padding 为 0，留白在板内）。 */
.bp-sec--stats .ab179-wrap {
  position: relative;
  z-index: 1;
  background: #fff;
  box-sizing: border-box;
  --strip: 200px;
  --pad: clamp(20px, calc((100vw - 1290px) / 2), 200px);
  width: calc(100% - 2 * var(--strip));
  padding: 2.5vw var(--pad);
}
@media (max-width: 1200px) {
  .bp-sec--stats .ab179-wrap { width: calc(100% - 12vw); }
}
@media (max-width: 750px) {
  .bp-sec--stats .ab179-wrap { width: calc(100% - 12vw); --pad: 12px; padding: 6vw 12px; }
}
.bp-stats-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  background: #000;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bp-stats-bg spline-viewer { position: absolute; inset: 0; width: 100%; height: 100%; }
.bp-sec--stats .ab179-num { color: #8f8f97; }        /* 单位（年/吨/款/家）+ 中文标签（公司成立…）= 中灰 */
.bp-sec--stats .ab179-num .v { color: #000; }        /* 数字 = 纯黑 */
.bp-sec--stats .ab179-en { color: #bdbdc4; }         /* 英文副标 = 浅灰 */
.bp-sec--stats .ab179-wrap { position: relative; z-index: 1; }
/* 首页那组自带 margin-top 129px（为它上方的视频/理念带留白）；品牌页的上下留白由分区间距控制。
   字体也必须补上：首页那组的 Plus Jakarta Sans 来自 .scene-ab179 的继承，本页没有那个祖先，
   不补数字会掉回微软雅黑 → 列宽对不上（实测 248/190/190/132 vs 首页 266/186/205/111）。 */
.bp-sec--stats .ab179-stats {
  margin-top: 0;
  font-family: 'Plus Jakarta Sans', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

/* 2026-09-12 用户「缩小间距，现在的间距太大」（截图里红框标了三处空白）：
   实测原间距 = 署名→宣言 72px、正文→数据 179px（About 段下内边距 91 + 数据段上内边距 91）、
   数据→水印 91px。只收紧"段与段之间"：板块内边距 1.58vw→0.85vw；
   About 段下内边距与数据段上下内边距 91px(6.33vw)→2.5vw(36px)。
   ⚠️ 不动 .ab179-stats 自带的 20px/22px —— 那组数据与首页同规格（已验掩膜 IoU 0.9942）。
   ⚠️ 只对桌面生效：手机档本来就是 7vw/3.2vw，再收会挤。
   ⚠️ 与并行会话的白底/配色改动共存：本段只写 padding，不写 color/background。 */
@media (min-width: 751px) {
  .bp { --bp-pad: 0.85vw; }
  .bp-sec--about-text { padding-top: 2.5vw; }        /* 名字/宣言/正文段的上留白 */
  /* 数据段自身不留 padding（白板 padding 见上面 .bp-sec--stats .ab179-wrap） */
}

/* ---------- ② 数据四栏 ---------- */

.bp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 5%;
  padding: 5% 0;                          /* = 内容列宽 5% = 57px @1440 */
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.bp-stat {
  transform-origin: top center;
  padding-right: 20%;                     /* 内容宽 = 列宽 80%（参考站 48.44px） */
  border-right: 1px solid rgba(0, 0, 0, .08);
}
.bp-stat:last-child { border-right: 0; }
.bp-stat-label {
  font-size: 12px;
  line-height: 22.4px;
  color: #0e1011;
}
.bp-stat-num {
  position: relative;
  display: block;
  width: fit-content;
  font-size: 3.4vw;
  line-height: 1.4;
  color: #333;
  font-variant-numeric: tabular-nums;
}
.bp-proxy {
  position: absolute;
  top: 0;
  left: calc(100% + 0.2em);
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 1em;
  font-style: normal;
  line-height: 1;
  transform: translateY(0.2em);
}
.bp-stat-desc {
  font-size: 12px;
  line-height: 22.4px;
  color: #0e1011;
  text-wrap: pretty;
}

/* ---------- ③ 水印横滚 ---------- */

.bp-marquee {
  overflow: hidden;
  padding: 0.7vw 0;
  background: #fff;
}
.bp-marquee-track {
  display: flex;
  width: max-content;
  animation: bp-marquee-scroll linear infinite;
  animation-duration: 60s;
}
.bp-marquee-set { display: flex; flex: 0 0 auto; }
.bp-marquee-set span {
  display: flex;
  align-items: baseline;
  padding: 0 0.36em;
  font-size: 7vw;
  line-height: 1.4;
  font-weight: 800;                        /* 原来继承常规字重，压不住 7vw 的大字 */
  font-family: 'Plus Jakarta Sans', 微软雅黑, sans-serif;
  letter-spacing: -0.02em;
  color: #eaeaea;
  white-space: nowrap;
}
@keyframes bp-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- ④ 样板卡 ---------- */

.bp-cards-vp {
  /* 只在右侧出画：左边缘贴内容列，右边缘到视口（内容列 80% → 右侧余量 = 容器的 12.5%） */
  width: calc(100% + 12.5%);
  overflow: hidden;
}
.bp-cards-track {
  display: flex;
  column-gap: 1.35vw;      /* 19.5px @1440 */
  width: max-content;
  cursor: grab;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.bp-cards-track.is-dragging { cursor: grabbing; }
.bp a.bp-card { color: #fff; }             /* 比 .bp a{color:inherit} 高一档，卡片整块文字锁白 */
.bp-card {
  position: relative;
  flex: 0 0 auto;
  -webkit-user-drag: none;
  width: 25.5vw;           /* 367px @1440 = 内容列(1140) 的 32.2% */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
}
.bp-card-img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform .75s cubic-bezier(.2, .75, .5, 1);
}
.bp-card:hover .bp-card-img { transform: scale(1.1); }
.bp-card-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8%;
  /* 展厅实景偏亮，压暗层比参考站深两档并上探到 55%（文字落在卡片底部 10~24% 区间） */
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .6) 26%, rgba(0, 0, 0, .32) 56%, rgba(0, 0, 0, 0) 90%);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
  transition: background-color .26s ease;
}
.bp-card-info b {
  color: #fff;                            /* .bp a{color:inherit} 会压掉卡片的白色，必须显式锁白 */
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
}
.bp-card-sub {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  margin-top: calc(5px + .05em);
  color: rgba(255, 255, 255, .88);
}
.bp-card-desc {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 8px;
  /* 说明只 1~2 行，不再占满参考站的 4.8em 三行高度——否则整组文字被顶到压暗层较浅的位置 */
  height: auto;
  color: rgba(255, 255, 255, .88);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 悬停：标题下划线从右往左扫出（参考站 NO03 主题） */
.bp-card-info b {
  background-image: linear-gradient(90deg, currentColor 0, currentColor);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0 1px;
  transition: background-size .55s cubic-bezier(.2, .75, .5, 1);
}
.bp-card:hover .bp-card-info b { background-position: 0 100%; background-size: 100% 1px; }

/* ---------- 动效（与参考站同参数） ---------- */

.bp-drift { will-change: transform; }
.bp-block > .bp-drift { width: 100%; }

/* 入场：块级 fadeInUp（JS 未跑时元素完全可见，不做 CSS 预隐） */
.bp-js .bp-block:not(.is-in) { opacity: 0; transform: translate3d(0, 26px, 0); }
.bp-js .bp-block.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.215, .61, .355, 1), transform .7s cubic-bezier(.215, .61, .355, 1);
}

/* 数据四栏：rotateX 60° → 0（transform-origin: top）+ opacity 0 → 1，1s power3.out */
.bp-js .bp-stats:not(.is-in) {
  opacity: 0;
  transform: perspective(1200px) rotateX(60deg);
  transform-origin: top center;
}
.bp-js .bp-stats.is-in {
  opacity: 1;
  transform: perspective(1200px) rotateX(0deg);
  transition: opacity 1s cubic-bezier(.215, .61, .355, 1), transform 1s cubic-bezier(.215, .61, .355, 1);
}

/* 横向滑入：卡片列 +10vw / 流程左栏 -10vw，1s power3.out */
.bp-js [data-bp-slide]:not(.is-in) { opacity: 0; transform: translate3d(var(--bp-slide-x, 0), 0, 0); }
.bp-js [data-bp-slide].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1s cubic-bezier(.215, .61, .355, 1), transform 1s cubic-bezier(.215, .61, .355, 1);
}

@media (prefers-reduced-motion: reduce) {
  .bp-js .bp-block:not(.is-in),
  .bp-js .bp-stats:not(.is-in),
  .bp-js .bp-block--title:not(.is-in) .bp-giant span,
  .bp-js [data-bp-slide]:not(.is-in) { opacity: 1; transform: none; }
  .bp-marquee-track { animation: none; }
}

/* ---------- 断点（参考站：≤750px 换一套比例） ---------- */

@media (max-width: 750px) {
  .bp { --bp-cw: 88%; --bp-pad: 3.2vw; --bp-sec: 7vw; }
  .bp-banner-bg { height: var(--bp-band, 47vw); }   /* 手机兜底：标题底部 + 3.5vw（390 下 ≈ 183px） */
  .bp-giant { font-size: 9vw; }
  /* 同桌面口径：两行一起 9vw（= 15vw 的 60%）；叠压 m = −0.250·9vw − 0.139·9vw = −3.50vw */
  .bp-sec--about .bp-giant span + span { margin-top: -3.50vw; }
  .bp-name { font-size: 8vw; }
  .bp-portrait { width: 58%; }
  .bp-lead { width: 100%; --bp-fit: 5vw; margin-bottom: 5vw; }
  .bp-prose { width: 100%; }
  .bp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6vw; }
  /* 移动端两列：竖线换成行间横线，避免半截竖线 */
  .bp-stat { border-right: 0; padding-right: 8%; }
  .bp-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(0, 0, 0, .08); padding-bottom: 6vw; }
  .bp-marquee-set span { font-size: 11vw; }
  .bp-cards-vp { width: calc(100% + 6.8%); }
  .bp-card { width: 70.4vw; }
}