/* 首屏防白闪 + 启动骨架（默认皮肤「HK 玫红」底色，与 themes.tsx 的 hkrose 同源）
 * 20261022：HK婚恋独立成站 → 底色 #FFF7F9（暖白粉）、骨架前景 #C61F45（玫红压深版，
 *           压此底 5.4:1，清晰且不刺眼）。
 * 20261020：底色由深色 #14161B 改为浅色 —— 默认皮肤是浅色，
 *           深色骨架会让浅色用户每次冷启动都先闪一下黑。深色皮肤用户由
 *           boot-guard.js 读取上次的 xrm_theme_bg 覆盖，不受影响。
 * 20260930 从 index.html 内联 <style> 抽出 → 让 CSP 可收紧（见 deploy/Caddyfile）
 * 20261005 追加 boot-splash 骨架样式：JS 下载/解析期间先给画面，消除纯色等待的"卡住感" */
html,
body {
  margin: 0;
  padding: 0;
  background: #fff7f9;
  /* 骨架前景色：浅底上必须够深才看得清（品牌色 #E4395E 压此底只有 4.16:1，
     17px 细体字读着发虚；取压深版 #C61F45 = 5.4:1）。
     深色皮肤用户由 boot-guard.js 覆写为亮色。 */
  --boot-fg: #c61f45;
}

#boot-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #fff7f9;
  /* 淡出由 main.tsx 加 .is-gone 触发（原生 CSS 过渡，无需 JS 动画库） */
  transition: opacity 0.22s ease;
  /**
   * 20261019 真机「点了没反应」第 1 号嫌疑：
   * 这是全屏 fixed 遮罩，z-index 21 亿 —— 只要它没被移除（JS 卡在挂载前、
   * 或从 bfcache 恢复时停在未移除的瞬时态），整站所有点击都会被它吃掉，
   * 而画面上**看不到任何异常**（它本来就长得像页面背景）。
   * 骨架只是装饰，任何时候都不该接收指针事件。
   */
  pointer-events: none;
}

#boot-splash.is-gone {
  opacity: 0;
  pointer-events: none;
}

.boot-splash__mark {
  font: 600 17px/1 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 4px;
  color: var(--boot-fg);
}

.boot-splash__bar {
  width: 132px;
  height: 2px;
  border-radius: 2px;
  background: rgba(198, 31, 69, 0.18);
  background: color-mix(in srgb, var(--boot-fg) 18%, transparent);
  overflow: hidden;
}

.boot-splash__bar > i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: var(--boot-fg);
  animation: boot-slide 1.05s ease-in-out infinite;
}

@keyframes boot-slide {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(330%);
  }
}

/* 无 JS 时不应永久遮挡（noscript 场景由 #root 为空呈现说明文字） */
@media (prefers-reduced-motion: reduce) {
  .boot-splash__bar > i {
    animation: none;
    width: 100%;
  }
}