/* =========================================================
   space.css —— 深空容器 / 星空层 / 星云层 / 星星
   1. 深空容器与视差层
   2. 星云通用规则（遮罩 / 混合模式）
   3. 星云图层 1：bgp1（1408 × 768）
   4. 星云图层 2：bgp3（2048 × 2048）
   5. 星云图层 3：bgp2（1254 × 1254）
   6. 星星与闪烁（滚动提示 .hint 已移至 screens.css）

   清晰度原则（重要）：
   每层的元素尺寸 = 显示尺寸 = 原图分辨率上限，
   即 background-size 永远不做放大（>1:1），避免插值发虚。
   ========================================================= */

/* ---------- 1. 深空容器与视差层 ---------- */
/*
 * 固定背景：脱离文档流、铺满视口，页面滚动时完全不移动，
 * 只有上层 .screens 里的内容在交接。
 * pointer-events: none 让它纯粹当背景，不拦截滚动和点击。
 */
.space {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(25, 35, 75, .13), transparent 48%),
    #02030a;
}

.layer {
  position: absolute;
  inset: -60px;
  will-change: transform;
  pointer-events: none;
}

/* ---------- 2. 星云通用规则 ---------- */
:root {
  /*
   * 边缘渐隐蒙版。
   * closest-side：椭圆内切于元素，半径自动等于元素半宽/半高，
   * 因此无论元素多大，渐隐都刚好收在图片内部，不留方形硬边。
   * 各层共用同一份，避免三处重复维护。
   */
  --nebula-mask: radial-gradient(
    ellipse closest-side at center,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, .96) 62%,
    rgba(0, 0, 0, .88) 71%,
    rgba(0, 0, 0, .74) 79%,
    rgba(0, 0, 0, .58) 85%,
    rgba(0, 0, 0, .40) 90%,
    rgba(0, 0, 0, .22) 93.5%,
    rgba(0, 0, 0, .10) 96%,
    rgba(0, 0, 0, 0) 98%
  );

  /*
   * 三层星云的整体水平偏移：正值向右，负值向左。
   * 各层的 margin-left 都会加上这个值，所以改这一处就能整体微调左右平衡。
   * 现在之所以能"整体居中"，是因为三个元素的 left 基准都改成了 50%，
   * 详见下面各层的注释。
   */
  --nebula-shift-x: 48px;
}

.nebula-layer,
.nebula-layer-2,
.nebula-layer-3 {
  position: absolute;

  background-position: center;
  background-repeat: no-repeat;

  pointer-events: none;
  will-change: transform;

  /* 黑色背景与星空融合 */
  mix-blend-mode: screen;

  -webkit-mask-image: var(--nebula-mask);
  mask-image: var(--nebula-mask);
}

/* ---------- 3. 星云图层 1：bgp1 ----------
   原图 1408 × 768（16:9，实为 JPEG）。
   注意：绝不能按 1:1 拉成正方形显示 —— 那会把纵向拉伸 1.56 倍，
   这是"糊"的主要来源。此处按原始比例 1:1 显示。
   视觉中心：视口中心水平 +198px（三层中最靠右），垂直居中。
   ------------------------------------------- */
.nebula-layer {
  width: 1408px;
  height: 768px;

  /*
   * 基准用 left: 50%（视口中心），而不是原来的 left: 30%。
   * 原来三层的 left 都是 30%，但各自 margin 不同，导致整团的
   * 几何中心落在 0.3·W + 150px —— 屏幕越宽越偏左（1920 宽时偏左约 234px），
   * 这就是左右失衡的根源。
   * 改用 50% 基准后，整团中心恒等于视口中心 + --nebula-shift-x，
   * 任意宽度都不会再偏。
   */
  left: 50%;
  top: 50%;

  /* 居中：-(1408/2) + 300(原偏移) - 150(抵消整团均值) + 水平微调 */
  margin-left: calc(-554px + var(--nebula-shift-x));
  margin-top: -384px;

  background-image: url("../assets/images/bgp1.jpg");

  /* = 原图尺寸，1:1 不缩放 */
  background-size: 1408px 768px;

  opacity: 0.4;

  filter:
    saturate(0.9)
    contrast(1.05);
}

/* ---------- 4. 星云图层 2：bgp3 ----------
   原图 2048 × 2048 → 显示 1500 × 1500，是缩小（0.73×），不虚。
   视觉中心：视口中心水平 -102px，垂直居中（整团最靠左的一层）。
   ------------------------------------------- */
.nebula-layer-2 {
  width: 1500px;
  height: 1500px;

  left: 50%;
  top: 50%;

  /* 居中：-(1500/2) + 0(原偏移) - 150(抵消整团均值) + 水平微调 */
  margin-left: calc(-900px + var(--nebula-shift-x));
  margin-top: -750px;

  background-image: url("../assets/images/bgp3.png");

  /* 2048 → 1500，下采样，清晰 */
  background-size: 1500px 1500px;

  opacity: 0.9;

  filter:
    saturate(1.1)
    contrast(1.05)
    hue-rotate(-18deg);
}

/* ---------- 5. 星云图层 3：bgp2 ----------
   原图 1254 × 1254。
   原来显示成 1500 × 1500（放大 1.20×，DPR 2 屏上等效 2.4× 插值）→ 虚。
   现在按原图 1254 显示。
   视觉中心：视口中心水平 +48px，垂直 +150px（三层中最靠前）。
   ------------------------------------------- */
.nebula-layer-3 {
  width: 1254px;
  height: 1254px;

  left: 50%;
  top: 50%;

  /* 居中：-(1254/2) + 150(原偏移) - 150(抵消整团均值) + 水平微调 */
  margin-left: calc(-627px + var(--nebula-shift-x));
  margin-top: -477px;

  background-image: url("../assets/images/bgp2.png");

  /* = 原图尺寸，1:1 不缩放 */
  background-size: 1254px 1254px;

  opacity: 0.6;

  filter:
    saturate(0.85)
    contrast(1.02)
    hue-rotate(22deg);
}

/* 备用图层写法（保留自 123.html，暂未启用）：
.nebula-photo {
  position: absolute;
  inset: -80px;
  background-image: url("../assets/images/photo.jfif");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.3;
  will-change: transform;
  pointer-events: none;
}
*/

/* ---------- 6. 星星与闪烁 ---------- */
/* 每颗星星由 js/space.js 随机生成 */
.star {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}

/* 远景 */
.far .star {
  width: 1px;
  height: 1px;
  opacity: .40;
}

/* 中景 */
.mid .star {
  width: 1.4px;
  height: 1.4px;
  opacity: .68;
}

/* 近景 */
.near .star {
  width: 2px;
  height: 2px;
  opacity: .88;
}

.near .star:nth-child(17n) {
  width: 3px;
  height: 3px;
  opacity: .95;
  box-shadow: 0 0 5px rgba(255, 255, 255, .45);
}

.near .star:nth-child(31n) {
  width: 2.5px;
  height: 2.5px;
  box-shadow: 0 0 4px rgba(170, 195, 255, .5);
}

/* 少量星星闪烁 */
.twinkle {
  animation: twinkle 3.5s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: .25; }
  to   { opacity: 1; }
}