/* ============================================================
   home.css — 首页专属打磨(只被 index.html 引用)
   板块节奏 · glow 收敛 · 卡片 hover 统一 · hero 网络图 · 兜底
   ============================================================ */

/* ---------- 板块间距节奏统一 ---------- */
.sec-pad{ padding:clamp(72px,9vw,120px) 0; }

/* ---------- glow 收敛一档(更利落) ---------- */
.logo.glow{ text-shadow:0 0 1px oklch(0.86 0.1 302/.5), 0 0 14px oklch(0.62 0.21 293/.5), 0 0 34px oklch(0.62 0.21 293/.28); }

/* ---------- 卡片 hover 统一:上浮 + 描边亮 ---------- */
.bcard, .ccard{ transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.bcard:hover, .ccard:hover{ transform:translateY(-4px); border-color:var(--v-bright); box-shadow:0 18px 44px -18px oklch(0.62 0.21 293/.35); }

/* ---------- hero:全宽文案(废掉 layout-split 的 50/50) ---------- */
.hero .inner{ grid-template-columns:1fr; min-height:0; align-items:start; }
.hero{ padding-top:0; }
.hero-copy{ align-self:start; padding:clamp(46px,7vh,84px) 0 clamp(26px,3.5vh,40px); max-width:none; }
.hero-copy .ebrow{ margin-bottom:20px; }
.hero-mark{ font-size:clamp(58px,10.5vw,152px); margin:0 0 clamp(18px,2.6vw,30px); }
/* 字标下的编辑式双栏:标题左 · 说明+CTA 右 */
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px); align-items:start;
  border-top:1px solid var(--line-soft); padding-top:clamp(22px,3vw,34px);
}
.hero h1{ font-size:clamp(28px,3.6vw,46px); margin-bottom:0; }
.hero-say{ display:flex; flex-direction:column; gap:22px; }
.hero .lead{ max-width:52ch; margin:0; }
.hero .cta-row{ margin:0; }
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; gap:20px; align-items:start; }
  .hero-say{ gap:18px; }
}
.hero .grid-tex{ mask:radial-gradient(1100px 720px at 18% 30%,#000,transparent 82%); }
.hero{ padding-bottom:clamp(56px,7vw,84px); }
.hero .wrap .stats{ margin-top:clamp(40px,5vw,60px); }

/* ---------- 实时直播带 ---------- */
/* 置顶:紧贴导航下方,像转播下方数据条 */
.hero-live{ position:relative; padding-top:clamp(16px,2.2vw,26px); }
.hl-head{
  display:flex; align-items:center; gap:11px; margin-bottom:16px;
  font-family:var(--cn); font-size:12.5px; color:var(--text-dim);
}
.hl-label{ letter-spacing:.01em; }
.hl-head b{
  margin-left:auto; font-family:var(--display); font-style:italic; font-weight:800;
  font-size:clamp(18px,2vw,24px); color:var(--text); letter-spacing:-.01em;
}
.hl-dot{
  width:7px; height:7px; border-radius:50%; background:var(--v-bright); flex:none;
  box-shadow:0 0 10px var(--v-bright); animation:hl-pulse 2s ease-in-out infinite;
}
@keyframes hl-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.78); } }

/* 满幅轨道,两侧渐隐,滚动到画面外 */
.hl-track{
  position:relative; overflow:hidden; padding:4px 0 6px;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.hl-row{ display:flex; gap:14px; width:max-content; padding:14px 0; animation:hl-scroll 52s linear infinite; }
.hl-track:hover .hl-row{ animation-play-state:paused; }
@keyframes hl-scroll{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion:reduce){
  .hl-row{ animation:none; }
  .hl-track{ overflow-x:auto; }
}

.hl-card{
  position:relative; flex:none; width:clamp(232px,20vw,296px); aspect-ratio:16/9;
  border-radius:13px; overflow:hidden; border:1px solid var(--line-soft);
  background:var(--surface); box-shadow:0 14px 32px -20px oklch(0 0 0/.8);
  transition:transform .22s ease, border-color .22s ease;
}
.hl-card:hover{ transform:translateY(-3px); border-color:var(--v-bright); }
.hl-thumb{ position:absolute; inset:0; }
.hl-thumb image-slot, .hl-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hl-card .hl-thumb::before{  /* 无图时的品牌底纹 */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(135deg, var(--v-deep), var(--v-signature) 60%, var(--v-magenta)); opacity:.5;
}
.hl-card::after{  /* 底部压暗保证文字可读(深浅主题都用深蒙版) */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, oklch(0.145 0.012 292/.1) 0%, oklch(0.145 0.012 292/.42) 50%, oklch(0.12 0.012 292/.92) 100%);
}
.hl-meta{ position:absolute; left:13px; right:13px; bottom:11px; z-index:2; }
.hl-name{
  font-family:var(--cn); font-weight:700; font-size:13.5px; letter-spacing:-.01em;
  color:oklch(0.97 0.004 292); text-shadow:0 1px 6px oklch(0 0 0/.6);
}
.hl-row{ display:flex; align-items:baseline; gap:8px; margin-top:2px; }
.hl-card .hl-row{ display:flex; width:auto; padding:0; animation:none; }
.hl-card .hl-row b{
  font-family:var(--display); font-style:italic; font-weight:800; font-size:19px; line-height:1;
  color:oklch(0.98 0.003 292); letter-spacing:-.01em; text-shadow:0 1px 8px oklch(0 0 0/.65);
}
.hl-live{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; color:var(--v-neon);
}
.hl-live i{
  width:5px; height:5px; border-radius:50%; background:var(--v-neon);
  box-shadow:0 0 8px var(--v-neon); animation:hl-pulse 2s ease-in-out infinite;
}

[data-theme="light"] .logo.glow{ text-shadow:0 0 1px oklch(0.5 0.18 293/.35), 0 0 12px oklch(0.62 0.21 293/.3); }

@media (max-width:760px){
  .hl-card{ width:212px; }
  .hl-head{ font-size:11.5px; gap:8px; }
  .hero h1{ max-width:none; }
}

/* ---------- 社区卡缩略图兜底(Discord API 拉不到时) ---------- */
.cthumb.thumb-fb{ background:linear-gradient(135deg, var(--v-deep), var(--v-signature) 55%, var(--v-magenta)); position:relative; }
.cthumb.thumb-fb::after{
  content:attr(data-fb); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-style:italic; font-weight:800; font-size:24px;
  color:oklch(0.96 0.005 292/.85); letter-spacing:.05em; text-transform:uppercase;
}

/* ---------- 最新动态封面裁切兜底 ---------- */
#homeBlog img{ object-fit:cover; background:var(--surface); }
#homeBlog > a > div:first-child{ border:1px solid var(--line-soft); }

/* ---------- 数据与覆盖:地区分布 / 人群标签 / 数据条 ---------- */
.geo{ display:flex; flex-direction:column; gap:11px; margin-top:10px; }
.geo-row{ display:grid; grid-template-columns:64px 1fr 42px; align-items:center; gap:12px; }
.geo-k{ font-family:var(--cn); font-size:13px; color:var(--text-dim); }
.geo-bar{ height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.geo-bar i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--v-signature), var(--v-magenta)); }
.geo-v{ font-family:var(--display); font-style:italic; font-weight:800; font-size:15px; color:var(--text); text-align:right; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip{
  font-family:var(--cn); font-size:12.5px; color:var(--text-dim);
  padding:7px 12px; border-radius:99px; border:1px solid var(--line-soft); background:var(--surface);
}

.reach-strip{
  display:grid; grid-template-columns:repeat(3,1fr) auto; align-items:center; gap:clamp(16px,3vw,40px);
  margin-top:20px; padding:20px clamp(20px,3vw,28px);
  border:1px solid var(--line-soft); border-radius:var(--r); background:var(--card-grad);
}
.reach-strip .rs b{
  display:block; font-family:var(--display); font-style:italic; font-weight:800;
  font-size:clamp(22px,2.6vw,30px); color:var(--text); letter-spacing:-.01em; line-height:1;
}
.reach-strip .rs span{ display:block; font-family:var(--cn); font-size:12.5px; color:var(--text-dim); margin-top:6px; }
.reach-strip .rs-note{ font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:.08em; }
@media (max-width:760px){
  .reach-strip{ grid-template-columns:1fr 1fr; gap:16px 20px; }
  .reach-strip .rs-note{ grid-column:1 / -1; }
}

/* ---------- 合作 logo 墙:禁止裁切(图片始终完整可见) ---------- */
.plogo-tile img, .plogo img{
  width:100%; height:100%; object-fit:contain; padding:10px; box-sizing:border-box;
}
