/* ==========================================================================
   Space Vanta · Trust Bridge — dna（品牌 DNA 装饰）
   路径：public/trust-bridge/dna/cs/dna.css

   空间（纬度）· 割裂 / 破碎 · 几何 · 简约高级
   桌面：舞台左侧的“空间标本”——纬度弧线与发丝线（出血到视口边缘）、市场纬度标尺、
         三块悬浮的破碎玻璃片、一道发光的裂缝。全部是 aria-hidden 的装饰，不影响文案阅读。
   手机：不压缩桌面版，而是换成一组小型碎片 + 刻度，贴在文案区右下角。
   ========================================================================== */

.sv-trust-bridge__dna {
  position: absolute;
  left: 0;
  top: -20px;
  bottom: 0;
  width: 44%;
  z-index: 0;
  pointer-events: none;
  translate: calc(var(--sv-px, 0) * -10px) calc(var(--sv-py, 0) * -6px);
}

/* ---------- 纬度发丝线：向左出血到视口边缘，越往左越淡 ---------- */
.sv-trust-bridge__dna-lines {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  /* 舞台左缘到视口左缘的距离 = 50vw − 舞台宽/2；本盒宽 = 舞台宽 × 44%，故 50% 盒宽 ≈ 舞台宽/2 × 0.44，换算为 113.636% */
  left: calc(113.636% - 50vw);
  background-image:
    linear-gradient(rgba(21, 26, 38, .09), rgba(21, 26, 38, .09)),
    linear-gradient(rgba(21, 26, 38, .09), rgba(21, 26, 38, .09)),
    linear-gradient(rgba(21, 26, 38, .09), rgba(21, 26, 38, .09)),
    linear-gradient(rgba(47, 107, 255, .3), rgba(47, 107, 255, .3));
  background-size: 100% 1px;
  background-position: 0 16%, 0 39%, 0 62%, 0 85%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46%);
          mask-image: linear-gradient(90deg, transparent 0, #000 46%);
}

/* ---------- 纬度弧线：左下角的同心椭圆，像一段星球地平线 ---------- */
.sv-trust-bridge__dna-arc {
  position: absolute;
  border: 1px solid rgba(21, 26, 38, .1);
  border-radius: 50%;
}

.sv-trust-bridge__dna-arc--1 { width: 520px; height: 360px; left: -260px; bottom: -190px; }
.sv-trust-bridge__dna-arc--2 { width: 780px; height: 540px; left: -390px; bottom: -280px; }
.sv-trust-bridge__dna-arc--3 { width: 1040px; height: 720px; left: -520px; bottom: -370px; border-color: rgba(47, 107, 255, .32); }

/* ---------- 市场纬度标尺：舞台左缘外侧；纵向位置按真实纬度 55°N → 40°S 映射 ---------- */
.sv-trust-bridge__dna-ruler {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30px;
  width: 30px;
}

.sv-trust-bridge__dna-ruler::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(21, 26, 38, .22) 0 1px, transparent 1px 14px);
  -webkit-mask-image: linear-gradient(to left, #000 0, #000 6px, transparent 6px);
          mask-image: linear-gradient(to left, #000 0, #000 6px, transparent 6px);
}

.sv-trust-bridge__dna-ruler i {
  position: absolute;
  right: 0;
  top: var(--y);
  width: 16px;
  height: 1px;
  background: var(--sv-tb-steel-600);
}

.sv-trust-bridge__dna-ruler i.is-minor { width: 11px; background: var(--sv-tb-silver-300); }

.sv-trust-bridge__dna-ruler b {
  position: absolute;
  right: 20px;
  top: var(--y);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;
  color: var(--sv-tb-steel-500);
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-variant-numeric: tabular-nums;
}

/* ---------- 破碎玻璃片：外层承载投影与漂浮，内层 face 负责切角 ---------- */
.sv-trust-bridge__dna-shard {
  position: absolute;
  filter: drop-shadow(0 18px 18px rgba(21, 26, 38, .13));
  animation: sv-tb-dna-float 11s ease-in-out infinite;
}

.sv-trust-bridge__dna-shard i {
  position: absolute;
  inset: 0;
}

.sv-trust-bridge__dna-shard .face { clip-path: var(--clip); background: var(--face); }
.sv-trust-bridge__dna-shard .rim  { clip-path: var(--rim);  background: linear-gradient(90deg, var(--sv-tb-glow), var(--sv-tb-blue)); }

/* A：左上，珍珠白 → 冰蓝 */
.sv-trust-bridge__dna-shard--a {
  left: -4%; top: 0; width: 46%; height: 15%;
  --clip: polygon(7% 0, 100% 16%, 84% 100%, 0 72%);
  --rim: polygon(0 72%, 84% 100%, 84% calc(100% - 2px), 0 calc(72% - 2px));
  --face: linear-gradient(150deg, rgba(255, 255, 255, .98), rgba(207, 224, 255, .72));
}

/* B：右中，冰蓝玻璃，靠近图片堆栈，像一块脱落的碎片 */
.sv-trust-bridge__dna-shard--b {
  right: -2%; top: 36%; width: 27%; height: 17%;
  animation-delay: -4s;
  --clip: polygon(0 30%, 72% 0, 100% 62%, 28% 100%);
  --rim: polygon(0 30%, 72% 0, 72% 2px, 0 calc(30% + 2px));
  --face: linear-gradient(140deg, rgba(160, 196, 255, .8), rgba(255, 255, 255, .78));
}

/* C：左下，银灰 */
.sv-trust-bridge__dna-shard--c {
  left: 2%; bottom: 22%; width: 42%; height: 15%;
  animation-delay: -7s;
  --clip: polygon(0 0, 90% 20%, 100% 100%, 10% 80%);
  --rim: polygon(0 0, 90% 20%, 90% calc(20% + 2px), 0 2px);
  --face: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(214, 221, 233, .85));
}

/* D：小三角，电光蓝，作点睛 */
.sv-trust-bridge__dna-shard--d {
  right: 4%; top: 7%; width: 9%; height: 6%;
  animation-delay: -2s;
  --clip: polygon(0 0, 100% 40%, 28% 100%);
  --rim: polygon(0 0, 0 0, 0 0);
  --face: linear-gradient(135deg, #8DB4FF, #2F6BFF);
}

/* 裂缝：一道斜向的蓝色发光线 + 一条淡的平行副线（“割裂”） */
.sv-trust-bridge__dna-crack {
  position: absolute;
  right: -3%;
  top: -4%;
  bottom: -4%;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--sv-tb-glow) 30%, var(--sv-tb-blue) 66%, transparent);
  box-shadow: 0 0 12px rgba(47, 107, 255, .45);
  transform: skewX(-9deg);
  opacity: .85;
}

.sv-trust-bridge__dna-crack::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 18%;
  left: 14px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(127, 170, 255, .8), transparent);
  opacity: .5;
}

@keyframes sv-tb-dna-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

.sv-trust-bridge.is-offscreen .sv-trust-bridge__dna-shard { animation-play-state: paused; }

/* 窄桌面：标尺会出视口，只保留碎片与弧线 */
@media (max-width: 1100px) {
  .sv-trust-bridge__dna-ruler { display: none; }
}

/* ---------- 手机：换一套小型装饰（不是桌面版的缩小） ---------- */
.sv-trust-bridge__deco { display: none; }

@media (max-width: 767px) {
  .sv-trust-bridge__dna { display: none; }

  .sv-trust-bridge__deco {
    display: block;
    position: absolute;
    right: 2px;
    bottom: calc(var(--sv-tb-overlap) + 12px);
    z-index: 2;
    width: 104px;
    height: 46px;
    pointer-events: none;
  }

  .sv-trust-bridge__deco i {
    position: absolute;
    filter: drop-shadow(0 6px 6px rgba(21, 26, 38, .14));
    animation: sv-tb-dna-float 9s ease-in-out infinite;
  }

  .sv-trust-bridge__deco i::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: var(--clip);
    background: var(--face);
  }

  .sv-trust-bridge__deco .a { left: 0;   top: 6px;  width: 52px; height: 26px; --clip: polygon(8% 0, 100% 18%, 82% 100%, 0 70%); --face: linear-gradient(150deg, #fff, rgba(207, 224, 255, .85)); }
  .sv-trust-bridge__deco .b { left: 40px; top: 14px; width: 38px; height: 24px; animation-delay: -3s; --clip: polygon(0 30%, 72% 0, 100% 62%, 28% 100%); --face: linear-gradient(140deg, rgba(160, 196, 255, .9), rgba(255, 255, 255, .8)); }
  .sv-trust-bridge__deco .c { right: 0;  top: 0;    width: 16px; height: 12px; animation-delay: -5s; --clip: polygon(0 0, 100% 40%, 28% 100%); --face: linear-gradient(135deg, #8DB4FF, #2F6BFF); }

  /* 刻度：一排短线，最右一条蓝色（= 纬度标尺的水平缩写） */
  .sv-trust-bridge__deco u {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: repeating-linear-gradient(to right, rgba(21, 26, 38, .24) 0 1px, transparent 1px 8px);
    -webkit-mask-image: linear-gradient(to left, #000 60%, transparent);
            mask-image: linear-gradient(to left, #000 60%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-trust-bridge__dna { translate: none; }
}