/* ============================================================
   home.css v2 — 首页沉浸式 Hero（舞台光版）
   只作用于 index.html；基础样式来自 site.css?v=7
   ============================================================ */

/* ---------- 舞台 ---------- */
.hero-stage{
  position:relative; overflow:hidden;
  min-height:calc(100vh - 64px);
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1100px 560px at 50% -10%, rgba(91,140,255,.10), transparent 60%),
    radial-gradient(900px 480px at 8% 105%, rgba(241,196,78,.08), transparent 55%),
    radial-gradient(900px 480px at 95% 100%, rgba(168,85,247,.07), transparent 55%),
    var(--bg);
}

/* 官方 loading-bg 底图 */
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:url('https://game.gtimg.cn/images/osgame/cp/a20260707sfgw/loading-bg.jpg') center/cover no-repeat;
}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,12,20,.45), rgba(10,12,20,.74)),
    radial-gradient(1200px 600px at 50% 36%, rgba(10,12,20,0), rgba(10,12,20,.42));
}
/* 光束/柔光/地灯 位于底图之上、内容之下 */
.hero-beam, .hero-glow, .hero-floor{ z-index:1; }

/* 聚光灯束 */
.hero-beam{
  position:absolute; top:-14%; width:340px; height:82%;
  filter:blur(52px); opacity:.16; pointer-events:none;
  background:linear-gradient(180deg, rgba(241,196,78,.85), rgba(241,196,78,0) 78%);
  transform:rotate(14deg); border-radius:50%;
}
.hero-beam.b1{ left:12%; }
.hero-beam.b2{ left:47%; transform:rotate(-8deg); opacity:.12;
  background:linear-gradient(180deg, rgba(91,140,255,.9), rgba(91,140,255,0) 78%); }
.hero-beam.b3{ right:10%; transform:rotate(16deg); opacity:.10;
  background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0) 78%); }

/* 底部金色地灯 */
.hero-floor{ position:absolute; left:50%; bottom:-120px; transform:translateX(-50%);
  width:min(900px,92vw); height:220px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(241,196,78,.16), transparent 72%);
  filter:blur(26px); pointer-events:none; }

/* 两侧柔光 */
.hero-glow{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; }
.hero-glow.g1{ left:-140px; top:22%; width:380px; height:380px;
  background:rgba(91,140,255,.10); }
.hero-glow.g2{ right:-140px; bottom:8%; width:420px; height:420px;
  background:rgba(241,196,78,.09); }

/* ---------- 内容 ---------- */
.hero-in{ position:relative; z-index:2; text-align:center; padding:64px 20px 88px; max-width:860px; }

.hero-tag{
  display:inline-block; padding:7px 18px; border-radius:999px;
  border:1px solid rgba(241,196,78,.38); color:var(--gold2);
  background:rgba(241,196,78,.07); font-size:12px; letter-spacing:2px;
}
.hero-title{
  margin:22px 0 12px; font-size:52px; font-weight:800; letter-spacing:2px;
  color:var(--txt);
  text-shadow:0 0 34px rgba(241,196,78,.22);
}
.hero-sub{ color:var(--txt2); font-size:15px; letter-spacing:1px; }

/* 搜索：复用 site.css .searchbox，按钮排右侧 */
.hero-search{ display:flex; gap:10px; justify-content:center; align-items:stretch; margin-top:26px; }
.hero-search .searchbox{ flex:1 1 auto; max-width:520px; margin:0; text-align:left; }
.hero-go{
  border:none; cursor:pointer; border-radius:14px; padding:0 26px;
  font-size:14px; font-weight:700; letter-spacing:1px; color:#221a05;
  background:linear-gradient(135deg, #f7d878, #e8b53e);
  box-shadow:0 6px 20px rgba(241,196,78,.28); transition:transform .15s, box-shadow .15s;
}
.hero-go:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(241,196,78,.36); }

/* 快捷词 */
.hero-links{ display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:center; margin-top:22px; }
.hero-links a{ color:var(--muted); font-size:12.5px; transition:color .15s; }
.hero-links a:hover{ color:var(--gold2); }

/* 双按钮 */
.hero-btns{ display:flex; gap:14px; justify-content:center; margin-top:34px; }
.hs-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 30px; border-radius:12px; font-size:14px; font-weight:700;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.hs-btn.gold{
  color:#221a05; background:linear-gradient(135deg, #f7d878, #e8b53e);
  box-shadow:0 6px 20px rgba(241,196,78,.28);
}
.hs-btn.gold:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(241,196,78,.36); }
.hs-btn.dark{
  color:var(--txt); background:rgba(255,255,255,.04);
  border:1px solid var(--line2);
}
.hs-btn.dark:hover{ transform:translateY(-2px); border-color:rgba(241,196,78,.4); }

@media (max-width:640px){
  .hero-title{ font-size:34px; }
  .hero-search{ flex-direction:column; align-items:center; }
  .hero-search .searchbox{ width:100%; }
  .hero-go{ padding:12px 26px; }
}