/* =========================================================
   Hero 视差舞台 · 固定卡面
   ========================================================= */

/* ---------- 舞台 ---------- */
.hero-stage{
  position:relative;min-height:100vh;overflow:hidden;
  display:flex;align-items:center;padding:120px 0 70px;
  perspective:1400px;            /* 为子元素倾斜提供透视 */
}
/* 固定背景层：不参与视差 */
.hs-bg{position:absolute;inset:0;z-index:0}
.hs-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(232,234,237,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,234,237,.03) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 45%,#000 30%,transparent 88%);
}
.hs-glow{
  position:absolute;inset:0;
  background:
    radial-gradient(700px 420px at 22% 38%,rgba(138,155,178,.13),transparent 62%),
    radial-gradient(560px 380px at 82% 22%,rgba(107,124,147,.08),transparent 64%);
}
.hs-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(5,5,5,.85) 100%);
}
/* 视差层：JS 控制 transform */
.hs-parallax{position:relative;z-index:2;width:100%;will-change:transform}
.hs-grid2{display:grid;grid-template-columns:1.18fr .82fr;gap:52px;align-items:center}


/* ---------- 同心波纹扩散（绕大字，3s 一圈） ---------- */
.hs-ripple{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hs-ripple i{
  position:absolute;left:50%;top:50%;width:140px;height:140px;border-radius:50%;
  border:1px solid rgba(232,234,237,.5);transform:translate(-50%,-50%) scale(0);
  animation:hsRipple 3s cubic-bezier(.16,.6,.3,1) infinite;
}
.hs-ripple i:nth-child(1){animation-delay:0s}
.hs-ripple i:nth-child(2){animation-delay:1s}
.hs-ripple i:nth-child(3){animation-delay:2s}
@keyframes hsRipple{
  0%  {transform:translate(-50%,-50%) scale(0);opacity:.55;border-width:1.5px}
  80% {opacity:0}
  100%{transform:translate(-50%,-50%) scale(11);opacity:0;border-width:.5px}
}

/* ---------- 大字：逐字视差 ---------- */
.h-title{font-size:clamp(38px,5.6vw,74px);line-height:1.16;font-weight:800;letter-spacing:-.5px;color:var(--silver)}
.h-title .line{display:block}
.h-title .w{
  display:inline-block;will-change:transform;
  transform:translate3d(0,0,0);
  text-shadow:0 0 0 rgba(232,234,237,0);
  transition:text-shadow .5s;
}
.h-title .blue{color:var(--silver)}
.h-title .orange{color:var(--steel-2)}
/* 鼠标进入区域：逐字亮银 + 冷光晕 */
.hero-stage.is-hot .h-title .w{text-shadow:0 0 26px rgba(232,234,237,.5)}

/* ---------- 右侧角色框 ---------- */
.hs-right{position:relative;display:flex;justify-content:center}
.hs-frame{
  position:relative;width:100%;max-width:300px;
  border-radius:6px;
}
.hs-imgwrap{
  position:relative;width:100%;aspect-ratio:1272/2540;overflow:hidden;
  border-radius:6px;background:#0a0a0a;
  border:1px solid var(--line-2);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(232,234,237,.04);
}
.hs-imgwrap::after{
  /* 内侧暗角，让角色融进黑银体系 */
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(5,5,5,.55) 100%);
}
.hero-portrait{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:1;
}
/* 四角准星 */
.hs-corner{position:absolute;width:22px;height:22px;border:2px solid var(--silver-3);z-index:4}
.hs-corner.tl{top:-1px;left:-1px;border-right:none;border-bottom:none}
.hs-corner.tr{top:-1px;right:-1px;border-left:none;border-bottom:none}
.hs-corner.bl{bottom:-1px;left:-1px;border-right:none;border-top:none}
.hs-corner.br{bottom:-1px;right:-1px;border-left:none;border-top:none}
.hs-tags{
  position:absolute;left:14px;right:14px;bottom:-30px;z-index:4;
  display:flex;flex-wrap:wrap;gap:8px;
}
.hs-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:1.6px;color:var(--silver-2);
  padding:4px 9px;border:1px solid var(--line-2);border-radius:3px;
  background:rgba(10,10,10,.7);backdrop-filter:blur(4px);
}

@media(max-width:860px){
  .hs-grid2{grid-template-columns:1fr;gap:44px}
  .hs-frame{max-width:300px;margin:0 auto}
  .hs-tags{position:static;margin-top:18px;justify-content:center}
  .hs-right{order:0}
  .hs-left{order:1}
  .hero-stage{padding:110px 0 50px;min-height:auto}
}