/* ══════════════════════════════════════════════════════════════════════════
   TECH AMBIENCE · 科技氛围层
   BÓCHE 博澈 ｜ 2026-09-20
   ──────────────────────────────────────────────────────────────────────────
   设计原则：只做「底」与「边」，不做「面」。

   · 网格与光晕一律走 background-image —— 天然渲染在内容之下，零层叠风险，
     不需要给任何内容补 z-index。
   · 对比度刻意压到极低（rgba .022 ~ .13）。判断标准是：
     退后一步能看见网格，盯着正文读的时候不会注意到它。
   · 深色区块用 background-attachment:fixed，让网格相对视口固定 ——
     区块滚动时底纹不动，既有"精密底图"的连续感，又带一点视差。
     移动端性能考虑回退为 scroll。
   · 所有动效都受 prefers-reduced-motion 约束。
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --grid-size: clamp(40px, 4.4vw, 64px);
  --grid-size-2: clamp(160px, 17.6vw, 256px);
  --grid-line: rgba(150, 182, 214, .034);
  --grid-line-2: rgba(150, 182, 214, .075);
  --grid-line-3: rgba(150, 182, 214, .022);
  --hud: rgba(150, 182, 214, .42);
}


/* ── 1 · 普通区块：最淡的一档网格 ─────────────────────────────────────── */
.sec {
  background-image:
    linear-gradient(to right, var(--grid-line-3) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-3) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-attachment: fixed;
}

/* ── 2 · 交替区块：淡一档 ─────────────────────────────────────────────── */
.sec-alt {
  background-color: var(--nav-900);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-attachment: fixed;
}

/* ── 3 · 深色区块：主网格 + 细网格 + 顶部光晕 ─────────────────────────── */
.hero,
.page-head,
.sec-deep,
.band,
.declare {
  background-image:
    linear-gradient(to right, var(--grid-line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-2) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px),
    radial-gradient(76% 50% at 50% -4%, rgba(111, 179, 222, .13), transparent 62%);
  background-size:
    var(--grid-size-2) var(--grid-size-2),
    var(--grid-size-2) var(--grid-size-2),
    var(--grid-size) var(--grid-size),
    var(--grid-size) var(--grid-size),
    100% 100%;
  background-attachment: fixed, fixed, fixed, fixed, scroll;
}


/* ── 3b · 已有背景覆盖层的区块 ───────────────────────────────────────────
   .hero-bg / .page-head-bg / .band-bg 是绝对定位的渐变覆盖层（z-index:0），
   它们会盖住区块自身的 background-image，所以网格必须写进它们的 ::after。
   CSS 的 background 图层列表中，越靠前越在上层 —— 网格放最前面。
   ───────────────────────────────────────────────────────────────────────── */
.hero-bg::after {
  background:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    radial-gradient(120% 90% at 78% 42%, rgba(122, 143, 166, .16), transparent 62%),
    linear-gradient(100deg, var(--nav-1000) 4%, rgba(7, 14, 27, .86) 42%, rgba(7, 14, 27, .5) 78%);
}

.page-head-bg::after {
  background:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    linear-gradient(96deg, var(--nav-1000) 6%, rgba(7, 14, 27, .86) 46%, rgba(7, 14, 27, .58));
}

.band-bg::after {
  background:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    linear-gradient(92deg, rgba(7, 14, 27, .95) 10%, rgba(7, 14, 27, .62) 62%, rgba(7, 14, 27, .86));
}


/* ── 4 · 页头扫描光带：极慢下移，只做一次视觉引导 ─────────────────────── */
.page-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
      transparent 6%, rgba(169, 216, 232, .5) 50%, transparent 94%);
  animation: techScan 12s linear infinite;
}

@keyframes techScan {
  0%   { top: 0;    opacity: 0; }
  7%   {            opacity: .85; }
  88%  {            opacity: .85; }
  100% { top: 100%; opacity: 0; }
}


/* ── 5 · 区块标题：左侧 HUD 短杠 + 右侧刻度尺 ─────────────────────────── */
.sec-head {
  position: relative;
}

.sec-head::before {
  content: "";
  display: block;
  width: clamp(28px, 4vw, 46px);
  height: 2px;
  margin-bottom: clamp(18px, 2vw, 26px);
  background: linear-gradient(90deg, var(--ice-2), transparent);
}

.sec-head::after {
  content: none;
  background-image: repeating-linear-gradient(90deg,
      var(--hud) 0 1px, transparent 1px 9px);
}


/* ── 6 · 宣言区：品牌视觉锤做超低透明度底纹 ───────────────────────────── */
/* 注意：.declare::after 是一层近乎不透明的深色遮罩，会压暗这层底纹，
   所以这里的 opacity 要比直觉值高，压完才是"隐约可见"的观感。 */
.declare::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(56vw, 420px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  background: url("../img/mark-white-sm.png") center / contain no-repeat;
  opacity: .16;
}


/* ── 7 · 产品卡 / 媒体框：右上角 HUD 直角标记 ─────────────────────────── */
/* 仅用于本身已有 position:relative 的容器，避免绝对定位飘出 */
.pcard-shot::after,
.split-media::after,
.gallery-main::after {
  content: "";
  position: absolute;
  top: 11px;
  right: 11px;
  width: 9px;
  height: 9px;
  pointer-events: none;
  border-top: 1px solid var(--hud);
  border-right: 1px solid var(--hud);
}


/* ── 8 · 技术参数：左侧发光竖线 ───────────────────────────────────────── */
.hero-specs > div {
  position: relative;
  padding-left: 15px;
}

.hero-specs > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: linear-gradient(180deg, var(--ice-2), transparent);
}


/* ── 9 · 表格 / 参数列表的刻度对齐感 ─────────────────────────────────── */
.prose table th {
  background-image: linear-gradient(to bottom, rgba(111, 179, 222, .07), transparent);
}


/* ── 11 · 产品页缩略图：统一为正方裁切 ─────────────────────────────────
   产品图是横竖混排（竖 832×1106 / 横 1216×757），不统一比例时缩略图
   高度会参差不齐。统一成正方形 cover，既整齐又不会拉变形。 */
.gallery-thumbs button {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ── 12 · 生物技术视觉 ─────────────────────────────────────────────────
   品牌是男士运动洗护，但此前的配图全是「产品棚拍 + 运动场景」，
   缺一层生物技术证据。这一组用微囊 / 分子 / 脂质层 / 微泡的宏观结构图补上。
   结构语言仍然只有两种：空白 与 1px 细线。 */
.bio-hero {
  position: relative;
  margin: 0 0 clamp(20px, 2.6vw, 34px);
  border: none;
  overflow: hidden;
  background: var(--nav-900);
}

.bio-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 1216 / 757;
  object-fit: cover;
}

.bio-hero figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  padding: 26px clamp(18px, 3vw, 34px) 22px;
  background: linear-gradient(180deg, rgba(12, 23, 40, 0), rgba(12, 23, 40, .88) 64%);
}

.bio-hero .fk {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--ice-2);
}

.bio-hero .fb {
  font-size: 13px;
  color: var(--text-2);
}

.bio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

.bio-cell {
  margin: 0;
  border: none;
  background: var(--nav-850);
  overflow: hidden;
}

.bio-cell img {
  width: 100%;
  height: auto;
  aspect-ratio: 1216 / 757;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}

.bio-cell:hover img {
  transform: scale(1.04);
}

.bio-cell figcaption {
  padding: 20px 22px 24px;
  background: linear-gradient(180deg, rgba(18,31,54,0), rgba(12,23,40,.85));
}

.bio-cell .fk {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ice-2);
  margin-bottom: 9px;
}

.bio-cell b {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
}

.bio-cell p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-2);
}


/* ── 10 · 降级与移动端 ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page-head::after {
    display: none;
  }
}

/* fixed 背景附件在移动端有性能与兼容问题，回退为 scroll */
@media (max-width: 760px) {

  .sec,
  .sec-alt,
  .hero,
  .page-head,
  .sec-deep,
  .band,
  .declare {
    background-attachment: scroll;
  }

  .bio-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ bio 图动态化：Ken-Burns 缓推 + 亮度呼吸（视频化观感） ============ */
@keyframes bio-kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.07) translate(-1.2%, 1%); }
  100% { transform: scale(1) translate(0, 0); }
}
@keyframes bio-breath {
  0%, 100% { filter: brightness(.96) saturate(1); }
  50%      { filter: brightness(1.06) saturate(1.08); }
}
.bio-hero img, .bio-cell img {
  animation: bio-kenburns 22s ease-in-out infinite, bio-breath 9s ease-in-out infinite;
  will-change: transform, filter;
}
.bio-cell:nth-child(2) img { animation-duration: 26s, 11s; animation-delay: -8s, -3s; }
@media (prefers-reduced-motion: reduce) {
  .bio-hero img, .bio-cell img { animation: none; }
}

/* ============ 首页 bio 全幅化：左右拉伸至全屏 + 上缘渐变溶边（无任何可见边框） ============ */
.sec.bio-fb{overflow-x:clip}
.sec.bio-fb .bio-hero, .sec.bio-fb .bio-grid{
  width:100vw;position:relative;left:calc(50% - 50vw);
}
.sec.bio-fb .bio-hero{margin-bottom:clamp(14px,2vw,24px)}
.sec.bio-fb .bio-hero img{height:clamp(320px,44vw,600px)}
.sec.bio-fb .bio-hero::before{content:'';position:absolute;inset:0 0 auto 0;height:130px;
  background:linear-gradient(180deg,var(--nav-950),rgba(12,23,40,0));z-index:2;pointer-events:none}
@media (prefers-reduced-motion: reduce){.sec.bio-fb .bio-hero img{animation:none}}