/* ==========================================================================
   Space Vanta · Hero — dna（品牌切面，舞台的第一张）
   路径：public/hero/dna/cs/dna.css

   空间（轨道）· 割裂（三块切面，留出精确的缝）· 几何（切角与斜线）· 简约高级（金属 + 一道冷蓝光）
   这一张是默认首屏，也是图片没有上传时的唯一视觉。手机端同样保留，尺寸随舞台缩放。
   全部为 aria-hidden 装饰；鼠标视差由 dna.js 驱动（写入 --sv-hero-px / --sv-hero-py）。
   ========================================================================== */

.sv-hero__dna {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* 视差：整体反向微移 */
  translate: calc(var(--sv-hero-px, 0) * -10px) calc(var(--sv-hero-py, 0) * -6px);
}

/* ---------- 同心轨道：圆心统一在 70% / 72% ---------- */
.sv-hero__ring {
  position: absolute;
  left: 70%;
  top: 72%;
  border-radius: 50%;
  border: 1px solid rgba(21, 26, 38, .09);
  transform: translate(-50%, -50%);
  animation: sv-hero-fade 1.6s var(--sv-hero-ease) both;
}

.sv-hero__ring--1 { width: 200px; height: 200px; }
.sv-hero__ring--2 { width: 320px; height: 320px; animation-delay: .1s; }
.sv-hero__ring--3 {
  width: 440px;
  height: 440px;
  border-color: rgba(79, 143, 247, .3);
  animation-delay: .2s;
}

/* ---------- 三块切面：金属面 + 冷蓝边缘光 ---------- */
.sv-hero__shard {
  position: absolute;
  display: block;
  /* 不同视差深度，形成层次 */
  translate: calc(var(--sv-hero-px, 0) * var(--depth, 1) * 14px) calc(var(--sv-hero-py, 0) * var(--depth, 1) * 10px);
  animation: sv-hero-fade 1.2s var(--sv-hero-ease) both;
}

.sv-hero__shard .face,
.sv-hero__shard .rim {
  position: absolute;
  inset: 0;
}

.sv-hero__shard .face {
  background: var(--sv-hero-metal);
  clip-path: var(--shape);
}

.sv-hero__shard .rim {
  background: var(--sv-hero-rim);
  clip-path: var(--edge);
}

.sv-hero__shard--a {
  left: 8%;
  top: 14%;
  width: 46%;
  height: 52%;
  --depth: 1;
  --shape: polygon(0 0, 100% 12%, 62% 100%, 0 78%);
  --edge: polygon(0 76%, 62% 98%, 62% 100%, 0 78%);
}

.sv-hero__shard--b {
  left: 46%;
  top: 4%;
  width: 44%;
  height: 40%;
  --depth: .6;
  --shape: polygon(14% 0, 100% 0, 86% 54%, 40% 100%);
  --edge: polygon(100% 0, 100% 2%, 87% 54%, 86% 54%);
  animation-delay: .12s;
}

.sv-hero__shard--c {
  left: 28%;
  top: 54%;
  width: 48%;
  height: 40%;
  --depth: 1.4;
  --shape: polygon(0 40%, 58% 0, 100% 46%, 46% 100%);
  --edge: polygon(100% 46%, 100% 49%, 48% 100%, 46% 100%);
  animation-delay: .22s;
}

/* ---------- 裂缝：一道冷蓝细线 ---------- */
.sv-hero__crack {
  position: absolute;
  left: 40%;
  top: 36%;
  width: 34%;
  height: 1px;
  transform: rotate(-24deg);
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, var(--sv-hero-blue) 40%, var(--sv-hero-blue-hi) 60%, transparent);
  box-shadow: 0 0 10px rgba(79, 143, 247, .45);
  animation: sv-hero-fade 1.4s var(--sv-hero-ease) .3s both;
}

/* ---------- 手机：轨道略小 ---------- */
@media (max-width: 767px) {
  .sv-hero__ring--1 { width: 150px; height: 150px; }
  .sv-hero__ring--2 { width: 240px; height: 240px; }
  .sv-hero__ring--3 { width: 330px; height: 330px; }
}

/* ---------- 减少动效：不做视差 ---------- */
@media (prefers-reduced-motion: reduce) {
  .sv-hero__dna,
  .sv-hero__shard {
    translate: none;
  }
}