/* ============================================================
   scenes/hero/scene.css — 深空奇点 · 起源（hero）
   所有选择器以 .scene-hero 开头做作用域隔离
   ============================================================ */

.scene-hero {
  --hero-accent: #7df9ff;
  --hero-pink: #ff71ce;
  --hero-bg: #050510;
  --hero-ink: rgba(255, 255, 255, 0.92);
  --hero-dim: rgba(255, 255, 255, 0.42);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(ellipse 130% 95% at 50% 118%, #0c0c28 0%, var(--hero-bg) 58%);
  color: var(--hero-ink);
  font-family: 'Noto Sans SC', sans-serif;
}

/* ---------- 星云底（Canvas 透明透出） ---------- */
.scene-hero__nebula {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 20%, rgba(125, 249, 255, 0.07), transparent 38%),
    radial-gradient(circle at 84% 76%, rgba(255, 113, 206, 0.055), transparent 42%),
    radial-gradient(circle at 55% 42%, rgba(84, 92, 220, 0.08), transparent 56%);
}

/* ---------- WebGL 挂载层 ---------- */
.scene-hero__gl {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scene-hero__gl canvas {
  display: block;
}

/* ---------- 暗角 ---------- */
.scene-hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 68% at 50% 46%, transparent 52%, rgba(2, 2, 12, 0.55) 82%, rgba(0, 0, 8, 0.92) 100%);
}

/* ---------- HUD 四角 ---------- */
.scene-hero__hud {
  position: absolute;
  pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hero-dim);
}
.scene-hero__hud--tl { top: clamp(1rem, 3.2vh, 2.1rem); left: clamp(1rem, 3vw, 2.4rem); }
.scene-hero__hud--tr { top: clamp(1rem, 3.2vh, 2.1rem); right: clamp(1rem, 3vw, 2.4rem); }
.scene-hero__hud--bl { bottom: clamp(1rem, 3.2vh, 2.1rem); left: clamp(1rem, 3vw, 2.4rem); }
.scene-hero__hud--br { bottom: clamp(1rem, 3.2vh, 2.1rem); right: clamp(1rem, 3vw, 2.4rem); }

.scene-hero__brand {
  font-family: 'Archivo Black', 'Noto Sans SC', sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.88);
}
.scene-hero__brand sup {
  font-size: 7px;
  vertical-align: super;
  color: var(--hero-accent);
}
.scene-hero__hud-dim { margin-left: 1em; }

.scene-hero__form {
  color: var(--hero-accent);
  display: inline-block;
}

/* ---------- 中央下方排版 ---------- */
.scene-hero__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(4.6rem, 15vh, 9rem);
  text-align: center;
  pointer-events: none;
}

.scene-hero__title {
  margin: 0;
  font-family: 'Noto Serif SC', serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 8.5vw, 7rem);
  line-height: 1.15;
  letter-spacing: 0.34em;
  padding-left: 0.34em; /* letter-spacing 居中补偿 */
  color: rgba(255, 255, 255, 0.9);
  text-shadow:
    0 0 22px rgba(125, 249, 255, 0.35),
    0 0 84px rgba(125, 249, 255, 0.16);
}

.scene-hero__sub {
  margin: clamp(0.9rem, 2.4vh, 1.6rem) 0 0;
  font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
  font-weight: 400;
  font-size: clamp(0.72rem, 1.6vw, 0.95rem);
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- 移动端 ---------- */
@media (max-width: 520px) {
  .scene-hero__hud--tr,
  .scene-hero__hud--bl,
  .scene-hero__hud--br { display: none; }
  .scene-hero__title { letter-spacing: 0.26em; padding-left: 0.26em; }
  .scene-hero__sub { letter-spacing: 0.36em; padding-left: 0.36em; }
}