/* ============================================================
 * hero_gate.css — v1 Hero 全屏门面（主站首页首屏）
 * ------------------------------------------------------------
 * 架构：html.hero-on 时 #hero-gate 全屏覆盖（z 100000），
 *       工作台在其下方正常启动；关闭即揭开真实工作台。
 * 视觉：#0F0A1F 深空底 + 星云光晕 + 三层视差星空 +
 *       纯 CSS 弯月（呼吸光晕）+ 流星（右上→左下）+ 曙光按钮。
 * 无 Tailwind 依赖，主站自包含。
 * ============================================================ */

/* ---- 门面容器与滚动锁 ---- */
#hero-gate {
  position: fixed; inset: 0; z-index: 100000;
  display: none; overflow: hidden;
  background: #0F0A1F;
  font-family: Inter, "PingFang SC", system-ui, sans-serif;
}
html.hero-on #hero-gate { display: block; }
html.hero-on body { overflow: hidden; }   /* Hero 期间锁住底层工作台滚动 */

/* ---- 关闭转场：整体上滑揭开工作台 ---- */
#hero-gate.out {
  transform: translateY(-100%); opacity: .55;
  transition: transform .78s cubic-bezier(.7, 0, .25, 1), opacity .78s ease;
  pointer-events: none;
}

/* ---- 星云光晕（超大 radial-gradient + blur，极弱紫/蓝） ---- */
.hg-nebula { position: absolute; inset: 0; pointer-events: none; }
.hg-nebula i { position: absolute; border-radius: 50%; }
.hg-nebula i:nth-child(1) { width: 62vw; height: 62vw; left: -16vw; top: 8vh;
  background: radial-gradient(closest-side, rgba(124,58,237,.17), transparent 70%); filter: blur(90px); }
.hg-nebula i:nth-child(2) { width: 55vw; height: 55vw; right: -12vw; bottom: -14vh;
  background: radial-gradient(closest-side, rgba(99,102,241,.14), transparent 70%); filter: blur(100px); }
.hg-nebula i:nth-child(3) { width: 40vw; height: 40vw; left: 32vw; bottom: -10vh;
  background: radial-gradient(closest-side, rgba(168,85,247,.08), transparent 70%); filter: blur(80px); }

/* ---- 星空（JS 生成，三层视差） ---- */
.hg-stars { position: absolute; inset: -60px; will-change: transform; pointer-events: none; }
.hg-stars i { position: absolute; border-radius: 9999px; animation: hgTwinkle 3s ease-in-out infinite alternate; }
@keyframes hgTwinkle { 0% { opacity: 1; } 100% { opacity: .12; } }

/* ---- 高光弯月（inset 月相 + 双层 drop-shadow + 呼吸） ---- */
.hg-moon {
  position: absolute; top: 8%; right: 9%;
  width: 96px; height: 96px; border-radius: 50%;
  box-shadow: inset -26px 14px 0 0 #FDF3C7;
  animation: hgMoonBreath 6.5s ease-in-out infinite;
}
@keyframes hgMoonBreath {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(253,230,138,.45)) drop-shadow(0 0 34px rgba(253,230,138,.22)); }
  50%      { filter: drop-shadow(0 0 20px rgba(253,230,138,.8))  drop-shadow(0 0 64px rgba(253,230,138,.42)); }
}
@media (max-width: 640px) { .hg-moon { width: 64px; height: 64px; box-shadow: inset -18px 10px 0 0 #FDF3C7; } }

/* ---- 流星（右上→左下：尾巴右上、头部高光左下） ---- */
.hg-meteor {
  position: absolute; width: 3px; height: 130px; border-radius: 9999px;
  background: linear-gradient(to bottom, transparent 0%, #93C5FD 70%, #FFFFFF 100%);
  animation-name: hgMeteorFly;
  animation-timing-function: cubic-bezier(.25,.6,.4,1);
  animation-fill-mode: forwards;
  pointer-events: none;
  will-change: transform; /* 纯位移动画 → 提前提升合成层，避免逐帧重绘（视觉零变化） */
}
.hg-meteor::after {
  content: ''; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #FFF;
  box-shadow: 0 0 12px 4px rgba(255,255,255,.95), 0 0 32px 12px rgba(147,197,253,.55);
}
/* 关键：translate 在前（父坐标系内左下位移），rotate 在后（只控制姿态） */
@keyframes hgMeteorFly {
  0%   { transform: translate(0, 0) rotate(45deg); opacity: 0; }
  6%   { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: translate(-820px, 820px) rotate(45deg); opacity: 0; }
}

/* ---- 首屏内容（pt 6vh：Flex 居中重心下移 3vh，上下留白均衡） ---- */
.hg-content {
  position: relative; z-index: 10; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6vh 24px 0; text-align: center;
}
.hg-title {
  margin: 0; color: #fff;
  font-size: clamp(38px, 6.4vw, 72px);
  font-weight: 900; line-height: 1.15; letter-spacing: -.01em;
}
.hg-title span {
  background: linear-gradient(to right, #a855f7, #6366f1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hg-sub {
  margin: 26px 0 0; max-width: 640px;
  font-size: clamp(16px, 1.3vw, 24px);
  font-weight: 400; line-height: 1.8; color: #94A3B8;
}
.hg-sub b { color: #7C3AED; font-weight: 700; }

/* ---- 曙光按钮（纯文字 + 暖色光晕悬停放大） ---- */
.hg-btn {
  position: relative; isolation: isolate;
  margin-top: 44px; padding: 16px 52px;
  border: none; border-radius: 9999px;
  background: #7C3AED; color: #fff;
  font-family: inherit; font-size: 17px; font-weight: 600;
  cursor: pointer; outline: none;
  transition: transform .35s ease, box-shadow .35s ease;
}
.hg-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(124,58,237,.45); }
.hg-glow {
  position: absolute; inset: -18px; z-index: -1; border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(251,191,36,.75), rgba(249,115,22,.45) 55%, transparent 75%);
  filter: blur(10px);
  transform: scale(.35); opacity: .25;
  transition: transform .5s cubic-bezier(.22,.8,.36,1), opacity .5s ease;
}
.hg-btn:hover .hg-glow, .hg-btn:focus-visible .hg-glow { transform: scale(1.25); opacity: 1; }

/* ---- 底部下滑提示 ---- */
.hg-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10;
  background: none; border: none; cursor: pointer; padding: 8px;
  color: #94A3B8; font-family: inherit; font-size: 12px;
  transition: color .25s ease;
}
.hg-hint:hover { color: #E2E8F0; }
.hg-bounce { display: inline-block; animation: hgBounce 1.6s ease-in-out infinite; }
@keyframes hgBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ---- 降级：减少动态偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  .hg-stars i, .hg-moon, .hg-meteor, .hg-bounce, .hg-glow { animation: none !important; transition: none !important; }
  #hero-gate.out { transition: none; }
}

/* ============================================================
 * v3 移动端首屏压缩（≤640px）：
 * 标题/副标题/按钮间距收紧 + CTA 收入首屏视口（390×844 下
 * 标题+副标题+按钮+下滑提示一屏可见，无需滚动）；
 * 流星长度由 JS 同步缩短；触屏无 hover → 按压缩放反馈。
 * ============================================================ */
@media (max-width: 640px) {
  .hg-content { padding: 4vh 18px 0; }
  .hg-title { font-size: clamp(34px, 9vw, 44px); }
  .hg-sub { margin: 16px 0 0; font-size: 15px; line-height: 1.75; }
  .hg-btn { margin-top: 26px; padding: 14px 42px; font-size: 15px; }
  .hg-hint { bottom: 16px; }
  .hg-meteor { height: 90px; }
}
/* 触屏：按压缩放替代 hover 悬浮 */
@media (hover: none) {
  #hero-gate { -webkit-tap-highlight-color: transparent; }
  .hg-btn:active { transform: scale(.94); }
  .hg-btn:active .hg-glow { transform: scale(1.25); opacity: 1; }
}