/* ==========================================================================
   Space Vanta · Trust Bridge — base
   路径：public/trust-bridge/base/cs/base.css
   负责：设计令牌 / 容器 / 纬度背景 / 头部(品牌标记+计数+标签) / 通用 CTA / 减少动效
   命名空间：sv-trust-bridge__*

   Accessible Premium 的视觉语言（不写成文字）：
   · Accessible：暖白底、通透留白、磨砂玻璃板、清晰的单击路径、柔和阴影
   · Premium：金属渐变细边、精密切角、克制色板、电光蓝边缘光、悬浮的层级
   ========================================================================== */

.sv-trust-bridge {
  /* palette — 取自 logo：暖白底 · 钢灰金属 · 电光蓝边缘光 */
  --sv-tb-paper: #F8F5F0;
  --sv-tb-ink: #151A26;
  --sv-tb-steel-900: #171C29;
  --sv-tb-steel-800: #212839;
  --sv-tb-steel-700: #2D3549;
  --sv-tb-steel-600: #4A5469;
  --sv-tb-steel-500: #6B7588;
  --sv-tb-silver-300: #B0B8C6;
  --sv-tb-silver-100: #E7EAF0;
  --sv-tb-blue: #2F6BFF;
  --sv-tb-glow: #7FAAFF;

  /* 金属边：高光 → 钢灰 → 蓝色边缘光（对应 logo 切面上的蓝色高光） */
  --sv-tb-rim: linear-gradient(135deg, #FAFBFD 0%, #C3CAD6 34%, #7A8497 62%, #2F6BFF 100%);
  --sv-tb-frost: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(252, 250, 246, .88));
  --sv-tb-glass: linear-gradient(150deg, rgba(255, 255, 255, .96), rgba(232, 240, 255, .86));   /* 亮面玻璃 */
  --sv-tb-grad: linear-gradient(135deg, #7FAAFF 0%, #2F6BFF 100%);                              /* 电光蓝渐变 */

  /* geometry */
  --sv-tb-cut: 28px;          /* 切角尺寸：所有“碎片”形状共用 */
  --sv-tb-overlap: 56px;      /* 政策条压入舞台下沿的距离 */
  --sv-tb-gutter: clamp(16px, 4vw, 56px);
  --sv-tb-ease: cubic-bezier(.2, .7, .2, 1);
  --sv-tb-interval: 6s;       /* 由 stage.js 按设置覆盖 */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sv-tb-pt, 32px) 0 var(--sv-tb-pb, 56px);
  background: var(--sv-tb-paper);
  color: var(--sv-tb-ink);
  -webkit-font-smoothing: antialiased;
}

/* 纬度背景：同心弧线 + 水平纬线，极淡，仅作为“空间”的暗示 */
.sv-trust-bridge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 640' preserveAspectRatio='xMaxYMax slice'%3E%3Cg fill='none' stroke='%23151A26' stroke-opacity='.075'%3E%3Cellipse cx='1240' cy='760' rx='420' ry='300'/%3E%3Cellipse cx='1240' cy='760' rx='640' ry='460'/%3E%3Cellipse cx='1240' cy='760' rx='860' ry='620'/%3E%3Cellipse cx='1240' cy='760' rx='1080' ry='780'/%3E%3Cpath d='M0 120H1440M0 240H1440M0 360H1440M0 480H1440'/%3E%3C/g%3E%3Cellipse cx='1240' cy='760' rx='640' ry='460' fill='none' stroke='%232F6BFF' stroke-opacity='.28'/%3E%3C/svg%3E") right bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%);
          mask-image: linear-gradient(to bottom, transparent, #000 35%);
}

.sv-trust-bridge__inner {
  position: relative;
  max-width: var(--sv-tb-max, 1440px);
  margin: 0 auto;
  padding: 0 var(--sv-tb-gutter);
}

/* SVG 图标精灵：只定义，不显示 */
.sv-trust-bridge__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- 头部：品牌切面标记 + 计数 | 切换标签 ---------- */
.sv-trust-bridge__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.sv-trust-bridge__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--sv-tb-ink);
  --sv-icon-accent: var(--sv-tb-blue);
}

.sv-trust-bridge__mark {
  display: block;
  width: 26px;
  height: 26px;
}

.sv-trust-bridge__counter {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--sv-tb-steel-500);
  font-variant-numeric: tabular-nums;
}

.sv-trust-bridge__counter b { font-weight: 600; color: var(--sv-tb-ink); }

.sv-trust-bridge__counter i {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--sv-tb-blue), var(--sv-tb-steel-500) 70%, transparent);
}

.sv-trust-bridge__tabs {
  display: flex;
  gap: 6px;
  min-width: 0;
  padding: 0 8px 0 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sv-trust-bridge__tabs::-webkit-scrollbar { display: none; }

.sv-trust-bridge.is-single .sv-trust-bridge__tabs,
.sv-trust-bridge.is-single .sv-trust-bridge__counter,
.sv-trust-bridge.is-single .sv-trust-bridge__lat-scale { display: none; }

/* 标签：平行四边形（斜切 14°），文字保持正向 */
.sv-trust-bridge__tab {
  position: relative;
  flex: 0 0 auto;
  isolation: isolate;
  appearance: none;
  border: 0;
  background: none;
  padding: 11px 22px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--sv-tb-steel-500);
  cursor: pointer;
  white-space: nowrap;
  transition: color .3s;
}

.sv-trust-bridge__tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: skewX(-14deg);
  border: 1px solid rgba(21, 26, 38, .16);
  background: transparent;
  transition: background .35s, border-color .35s;
}

.sv-trust-bridge__tab:hover { color: var(--sv-tb-ink); }
.sv-trust-bridge__tab:hover::before { border-color: rgba(47, 107, 255, .55); }

.sv-trust-bridge__tab:focus-visible {
  outline: 2px solid var(--sv-tb-blue);
  outline-offset: 3px;
}

.sv-trust-bridge__tab.is-active { color: #fff; }

.sv-trust-bridge__tab.is-active::before {
  background: var(--sv-tb-grad);
  border-color: transparent;
  box-shadow: 0 8px 18px -6px rgba(47, 107, 255, .55);
}

/* 自动播放进度：沿标签底边由左向右“点亮” */
.sv-trust-bridge__tab::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .9);
  transform-origin: left center;
  transform: scaleX(0);
}

.sv-trust-bridge__tab.is-active::after { transform: scaleX(1); }

.sv-trust-bridge.is-playing .sv-trust-bridge__tab.is-active::after {
  animation: sv-tb-progress var(--sv-tb-interval) linear forwards;
}

.sv-trust-bridge.is-paused .sv-trust-bridge__tab.is-active::after {
  animation-play-state: paused;
}

@keyframes sv-tb-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- 通用 CTA ---------- */
/* 主按钮：深钢灰切角块，悬停时蓝色高光扫过 */
.sv-trust-bridge__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  align-self: flex-start;
  overflow: hidden;
  padding: 15px 26px 15px 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--sv-tb-grad);
  box-shadow: 0 10px 22px -8px rgba(47, 107, 255, .6);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.sv-trust-bridge__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s var(--sv-tb-ease);
}

.sv-trust-bridge__cta:hover::before { transform: translateX(100%); }

.sv-trust-bridge__cta:focus-visible,
.sv-trust-bridge__panel-link:focus-visible {
  outline: 2px solid var(--sv-tb-blue);
  outline-offset: 4px;
}

/* 次级链接：墨色文字 + 蓝色细线箭头（政策面板、精选集入口共用） */
.sv-trust-bridge__panel-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sv-tb-ink);
}

.sv-trust-bridge__cta-arrow {
  position: relative;
  width: 26px;
  height: 1px;
  background: #fff;
  transition: width .45s var(--sv-tb-ease);
}

.sv-trust-bridge__panel-link .sv-trust-bridge__cta-arrow { background: var(--sv-tb-blue); }

.sv-trust-bridge__cta-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
}

.sv-trust-bridge__panel-link .sv-trust-bridge__cta-arrow::after {
  border-color: var(--sv-tb-blue);
}

.sv-trust-bridge__cta:hover .sv-trust-bridge__cta-arrow,
.sv-trust-bridge__panel-link:hover .sv-trust-bridge__cta-arrow { width: 42px; }

/* ---------- 移动端 ---------- */
@media (max-width: 767px) {
  .sv-trust-bridge {
    --sv-tb-cut: 20px;
    --sv-tb-overlap: 28px;
  }

  .sv-trust-bridge { padding-top: min(var(--sv-tb-pt, 32px), 16px); }

  .sv-trust-bridge__header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 4px;
  }

  .sv-trust-bridge__brand { justify-content: space-between; }
  .sv-trust-bridge__mark { width: 22px; height: 22px; }
  .sv-trust-bridge__tab { padding: 10px 18px; font-size: 12px; }

  /* 标签放不下时可横向滑动；右侧渐隐提示还有更多，尾部留白保证滑到底时不被遮 */
  .sv-trust-bridge__tabs {
    padding-right: 28px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .sv-trust-bridge *,
  .sv-trust-bridge *::before,
  .sv-trust-bridge *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}