*,*::before,*::after{box-sizing:border-box}
  html,body{margin:0}
  html{overflow-x:clip}

  :root{
    --bg:#05060d;
    --fg:#fff;
    --dim:rgba(255,255,255,.60);
    --faint:rgba(255,255,255,.36);
    --line:rgba(255,255,255,.16);
    --accent:#ffb4cd;              /* 呼应粉色上衣与贴纸 */
    --sans:"PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
    --display:"Arial Black","Helvetica Neue",Impact,"Segoe UI",sans-serif;
    --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Courier New",monospace;
  }

  body{
    background:var(--bg);
    color:var(--fg);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
  }

  .hero{
    position:relative;
    height:100svh;
    min-height:560px;
    overflow:hidden;
    isolation:isolate;
  }

  /* ---------- 背景（临时星空，等你的图） ---------- */
  .bg{
    position:absolute; inset:0; z-index:0;
    background:
      radial-gradient(70% 60% at 62% 42%, rgba(88,120,255,.16), transparent 70%),
      radial-gradient(50% 45% at 30% 70%, rgba(180,90,255,.13), transparent 70%),
      radial-gradient(40% 40% at 82% 78%, rgba(255,120,190,.10), transparent 70%),
      #05060d;
    /* [替换] 换成背景图：
       background: url("bg.jpg") center/cover no-repeat, #05060d; */
  }
  .bg::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(0,0,0,.58) 100%);
  }
  /* ---------- 背景层：3D 网格房间 + 扫描（WebGL2） ---------- */
  .gridscan{
    position:absolute; inset:0; z-index:1;
    pointer-events:none;
    opacity:.85;
  }
  .gridscan canvas{display:block; width:100%; height:100%}
  /* 没有 WebGL2 时的兜底：静态网格，至少不是纯黑 */
  .gridscan::before{
    content:""; position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(90deg, rgba(6,182,212,.16) 0 1px, transparent 1px 88px),
      repeating-linear-gradient(0deg, rgba(6,182,212,.11) 0 1px, transparent 1px 88px);
    -webkit-mask-image:radial-gradient(120% 95% at 50% 58%, #000 25%, transparent 88%);
    mask-image:radial-gradient(120% 95% at 50% 58%, #000 25%, transparent 88%);
  }
  .gridscan.gridscan-live::before{display:none}

  /* ---------- 顶部 ---------- */
  .top{
    position:absolute; inset:0 0 auto 0; z-index:4;
    display:flex; align-items:center; justify-content:space-between;
    padding:clamp(14px,1.7vw,24px) clamp(20px,3.2vw,52px);
  }
  .logo{
    display:flex; align-items:center; gap:10px;
    font-size:clamp(11px,.95vw,14px); font-weight:700;
    letter-spacing:.26em; text-decoration:none; color:var(--fg);
  }
  .logo .mark{color:var(--accent); font-size:1.15em; letter-spacing:0}

  .nav{
    position:absolute; left:50%; transform:translateX(-50%);
    display:flex; gap:clamp(30px,4.4vw,72px);
  }
  .nav a{
    position:relative; padding-block:7px;
    color:var(--dim); text-decoration:none;
    font-size:clamp(14px,1.2vw,17px); letter-spacing:.2em;
    margin-right:-.2em;   /* 抵消字距在尾部的多余宽度，让间距看起来均匀 */
    transform-origin:50% 60%;
    transition:color .25s, transform .32s cubic-bezier(.22,1,.36,1);
    will-change:transform;
  }
  .nav a::after{
    content:""; position:absolute; left:.2em; right:0; bottom:0; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:left;
    transition:transform .38s cubic-bezier(.22,1,.36,1);
  }
  .nav a:hover{color:var(--fg); transform:scale(1.09)}
  .nav a:active{transform:scale(1)}       /* 按下时回到原大小，给一个"按下去"的反馈 */
  .nav a:hover::after{transform:scaleX(1)}

  .cta{
    display:inline-flex; align-items:center; gap:9px;
    border:1px solid var(--line); border-radius:999px;
    padding:10px 18px; color:var(--fg); text-decoration:none;
    font-size:clamp(11px,.9vw,13px); letter-spacing:.16em;
    transition:background .3s,color .3s,border-color .3s;
  }
  .cta:hover{background:var(--fg); color:#08080e; border-color:var(--fg)}
  .cta .arrow{transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .cta:hover .arrow{transform:translate(2px,-2px)}

  /* ---------- 中央 ---------- */
  .stage{position:absolute; inset:0; z-index:2}

  .lockup{
    position:absolute; left:0; top:34.5vh; width:100%;
    transform:translateY(-100%);
    padding-inline:16px;
    text-align:center; z-index:1;
    user-select:none; pointer-events:none;
    animation:fade 1s ease .05s both;
  }
  /* 字后面压一层暗底，避免网格光带把字切开 */
  .lockup::before{
    content:""; position:absolute; inset:-10% -3%;
    background:radial-gradient(58% 62% at 50% 52%, rgba(3,5,12,.62), rgba(3,5,12,.28) 55%, transparent 78%);
    z-index:-1; pointer-events:none;
  }

  /* 字号 = STARBIO 的一半 */
  .welcome{
    display:block; margin:0;
    font-family:var(--mono);
    font-size:calc(clamp(46px, 9vw, 150px) * 0.5);
    font-weight:700;
    letter-spacing:.14em;
    color:rgba(255,255,255,.66);
    margin-bottom:0;
    line-height:1.02;
  }

  /* RotatingText */
  .rt{display:inline-block; position:relative; vertical-align:top}
  .rt-box{display:inline-block; position:relative; overflow:hidden; vertical-align:top; height:1.02em}
  .rt-line{display:block; white-space:nowrap; line-height:1.1}
  .rt-char{
    display:inline-block; will-change:transform,opacity,filter;
    transition-property:transform,opacity,filter;
    transition-timing-function:cubic-bezier(.22,1,.36,1);
  }
  .rt-space{width:.32em}
  .rt-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .rt-probe{position:absolute; visibility:hidden; white-space:nowrap; pointer-events:none}
  .brand{
    display:block; position:relative; margin:0;
    width:100%;
    height:clamp(50px, 9.4vw, 156px);
    font-family:var(--display); font-weight:900;
    color:#fff;
    pointer-events:auto;
  }
  /* 粒子画布就位前的降级文本 */
  .brand-text{
    display:block;
    font-size:clamp(46px,9vw,150px);
    line-height:.84; letter-spacing:-.035em;
    text-align:center; white-space:nowrap;
    text-shadow:0 0 90px rgba(120,160,255,.22);
  }
  .brand .particle-text__canvas{position:absolute; inset:0; display:block}
  .brand .particle-text__sr{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }

  /* 人物：透明素材，底部对齐，从画面下方“长”出来 */
  /* 人物：底层蜘蛛侠 + 上层泥塑（可擦开） */
  .figure-box{
    position:absolute; left:50%; bottom:5vh;
    transform:translateX(-50%);
    z-index:2;
    height:62vh; aspect-ratio:1920 / 1080;
    max-width:none;
    animation:fade 1.2s ease .22s both;
    pointer-events:auto;
  }

  /* 底层只在人物轮廓内可见，而且只有擦开时才显示 */
  .figure-clip{
    position:absolute; inset:0;
    opacity:0;
    transition:opacity .18s linear;
    -webkit-mask-image:url("../img/char.webp");
    -webkit-mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;
    mask-image:url("../img/char.webp");
    mask-size:100% 100%;
    mask-repeat:no-repeat;
    pointer-events:none;
  }
  .figure-box.is-revealing .figure-clip{opacity:1}

  /* 蜘蛛侠：按 1.45 倍缩放、眼睛对齐泥塑的位置 */
  .figure-under{
    position:absolute;
    left:-9.84%;
    top:-38.6%;
    width:122.5%;
    height:auto;
    max-width:none;
    pointer-events:none;
  }

  .figure{
    position:absolute; inset:0;
    width:100%; height:100%;
    display:block;
    -webkit-mask-image:linear-gradient(to bottom, #000 84%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 84%, transparent 100%);
    pointer-events:none;
  }

  /* ---------- 顶部暗角：保证导航在字符网格上可读 ---------- */
  .top-scrim{
    position:absolute; left:0; right:0; top:0; height:22%;
    z-index:3; pointer-events:none;
    background:linear-gradient(to bottom, rgba(3,5,12,.72), transparent 100%);
  }

  /* ---------- 底部暗角：保证四角小字在任何背景上都读得清 ---------- */
  .scrim{
    position:absolute; left:0; right:0; bottom:0; height:38%;
    z-index:3; pointer-events:none;
    background:linear-gradient(to top, rgba(3,5,12,.72), rgba(3,5,12,.28) 42%, transparent 100%);
  }

  /* ---------- 四角小字 ---------- */
  .corner{
    position:absolute; bottom:clamp(20px,3vw,38px); z-index:4;
    max-width:min(38ch,34vw);
    font-size:clamp(11px,.92vw,13px);
    line-height:1.9; letter-spacing:.04em;
    color:var(--fg);
  }
  .corner.left{left:clamp(20px,3.2vw,52px)}
  .corner.right{right:clamp(20px,3.2vw,52px); text-align:right; color:var(--dim)}
  .corner .slash{
    font-family:var(--mono); color:var(--accent);
    margin-right:.45em;
  }
  .corner .sub{color:var(--dim)}

  @keyframes fade{from{opacity:0}to{opacity:1}}

  /* ---------- 窄屏 ---------- */
  @media (max-width:760px){
    .nav{display:none}
    .lockup{top:42vh}
    .brand{font-size:clamp(32px,12.4vw,72px)}
    .welcome{letter-spacing:.45em; text-indent:.45em}
    .figure-box{height:58vh; bottom:0; animation:none}
    .figure{-webkit-mask-image:none; mask-image:none}
    .corner{max-width:56vw; font-size:11px; line-height:1.8}
    .corner.right{display:none}
  }

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important; transition:none!important}
    .nav a:hover, .nav a:active{transform:none}
  }
  /* 截图模式：hero.html?still 时禁用动画，仅用于自动截图校对 */
  html.still *{animation:none!important; transition:none!important}
/* ---------- 结晶球（人物左上方装饰） ---------- */
/* ---------- 翻转卡片（原粒子球位置） ---------- */
.flip-card{
  position:absolute;
  left:6vw;
  top:43vh;
  width:clamp(190px, 19.5vw, 300px);
  aspect-ratio:3 / 4;
  z-index:4;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  outline:none;
}
.flip-card:focus-visible .flip-card__rotor{box-shadow:0 0 0 2px rgba(255,180,205,.8)}
.flip-card[data-dragging]{cursor:grabbing}

.flip-card__shadow{
  position:absolute;
  left:6%; right:6%; bottom:-6%;
  height:12%;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,0) 70%);
  filter:blur(6px);
  transform-origin:50% 50%;
  pointer-events:none;
}

.flip-card__rotor{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}

.flip-card__face{
  position:absolute;
  inset:0;
  border-radius:16px;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:#14161f;
  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.flip-card__face--back{transform:rotateY(180deg)}
.flip-card__face img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  -webkit-user-drag:none;
}

/* 跟着光标跑的高光 */
.flip-card__glare{
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(
    circle at var(--fc-gx, 50%) var(--fc-gy, 50%),
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.16) 26%,
    rgba(255,255,255,0) 60%
  );
  mix-blend-mode:soft-light;
  opacity:calc(var(--fc-sheen, 0) * .9);
  transition:opacity .15s linear;
}

@media (max-width:1100px){
  .flip-card{width:clamp(160px, 18vw, 240px); top:42vh}
}
@media (max-width:760px){
  .flip-card{left:5vw; top:12vh; width:34vw}
}

/* ---------- 未完成页面的轻提示 ---------- */
.toast{
  position:fixed; left:50%; bottom:40px; z-index:50;
  transform:translate(-50%, 14px);
  padding:10px 18px; border-radius:999px;
  background:rgba(10,12,20,.92);
  border:1px solid rgba(255,255,255,.16);
  color:#fff; font-size:13px; letter-spacing:.06em;
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s cubic-bezier(.22,1,.36,1);
}
.toast.show{opacity:1; transform:translate(-50%, 0)}

/* ---------- 键盘可见焦点 ---------- */
a:focus-visible,
.nav a:focus-visible,
.cta:focus-visible,
.logo:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:4px;
}
.cta:focus-visible{border-radius:999px}

/* ---------- 入场时序 ---------- */
@keyframes heroIn{
  from{opacity:0; transform:translateY(12px)}
  to{opacity:1; transform:none}
}


/* ---------- 矮窗口适配 ---------- */
@media (max-height: 760px){
  .corner{bottom:20px; font-size:11px}
}