/* ==========================================================
 * 文件: quant-ai-dark/landing-nebula.css
 * 版本: 0.1.0 · 更新: 2026-10-23 · 作者: Claude（为李泓锐）
 * 用途: 落地页第 1 屏「3D 星云」的版式与叠层（按用户 2026-10-23 22:10 的规范）。
 *   叠层（下 → 上）：兜底图 / canvas 星云 → 暗角 → 标题压暗 → 文字
 *   版式：标题左对齐 x=6vw、y≈42%；右下文案 x≈66vw、y≈55%；底部策略名跑马灯
 *   字体：标题 Satoshi 900 纯白、无阴影无发光；数据源一行用等宽字体
 * ========================================================== */

.hero-neb {
  display: block;
  padding: 0;
  background: #05060f;
}

.hero-neb::after { display: none; }

.hero-neb__canvas,
.hero-neb__fallback,
.hero-neb__vignette,
.hero-neb__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-neb__canvas { z-index: 0; }

/* WebGL 不可用时：预渲染的星云截图（同一套参数生成，不是外部素材） */
.hero-neb__fallback {
  z-index: 0;
  background: #05060f url("../shared/nebula-fallback.png") center / cover no-repeat;
}

.hero-neb.has-webgl .hero-neb__fallback { display: none; }

/* 暗角：四周压回近黑 */
.hero-neb__vignette {
  z-index: 1;
  background: radial-gradient(ellipse at 40% 45%, transparent 30%, #05060f 85%);
}

/* 标题背后再压暗一点，保证可读 */
.hero-neb__shade {
  z-index: 1;
  background:
    radial-gradient(38% 30% at 30% 44%, rgba(5, 6, 15, 0.35), transparent 70%),
    radial-gradient(18% 16% at 77% 63%, rgba(5, 6, 15, 0.3), transparent 70%);
}

/* —— 标题 —— */
.hero-neb__main {
  position: absolute;
  top: 36%;
  left: 9vw;
  z-index: 2;
  transform: translateY(-50%);
}

.hero-neb__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 74px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: #ffffff;
}

html[lang="zh-CN"] .hero-neb__title {
  font-family: var(--font-zh);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-size: clamp(30px, 3.9vw, 64px);
  word-break: keep-all;
}

.hero-neb__sources {
  margin-top: 32px;
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* —— 右下文案 + 按钮 —— */
.hero-neb__aside {
  position: absolute;
  top: 55%;
  left: 66vw;
  z-index: 2;
  max-width: 34ch;
}

.hero-neb__sub {
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.hero-neb__btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  margin-top: 24px;
  padding: 0 22px;
  border-radius: 4px;
  background: #ffffff;
  color: #05060f;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  transition: transform 600ms var(--ease-expo), background var(--hover) var(--ease-hover);
  transform: translate3d(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px), 0);
}

.hero-neb__btn:hover { background: #e6e9f5; }

/* —— 底部跑马灯 —— */
.hero-neb__strip {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
}

/* 桌面：标题行不折行 */
@media (min-width: 1024px) {
  .hero-neb__title .story__title-line { white-space: nowrap; }
}

/* 平板以下：右侧文案改到标题下方 */
@media (max-width: 1023px) {
  .hero-neb__main { top: 34%; right: 6vw; }
  .hero-neb__aside { top: auto; bottom: calc(80px + 6vh); left: 6vw; right: 6vw; }
  .hero-neb__sub { font-size: 16px; }
}