/* ========================================================================
   atmosphere.css — 夜的质感:星空 / 星云暖斑 / 胶片颗粒 / 暗角 / 黎明
   层序(自下而上):星空 canvas → 星云 → 黎明 → [正片] → 颗粒 → 暗角
   ======================================================================== */

/* ---- 星空(canvas,双层景深由 JS 绘制) ---- */
#star-canvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-atmo);
  pointer-events: none;
}

/* ---- 星云暖斑:两团巨型模糊光,给"暗"以温度 ---- */
.nebula {
  position: fixed;
  inset: 0;
  z-index: var(--z-atmo);
  pointer-events: none;
  overflow: hidden;
}
.nebula i {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
  transition: opacity 2.4s var(--e-soft);
}
.nebula .nebula-gold {
  width: 68vmax; height: 58vmax;
  left: -18vmax; top: 4vmax;
  background: radial-gradient(closest-side, oklch(0.72 0.13 78), transparent 70%);
  opacity: var(--nebula-gold-o);
  animation: nebulaDriftA 46s ease-in-out infinite alternate;
}
.nebula .nebula-rose {
  width: 60vmax; height: 52vmax;
  right: -20vmax; bottom: -10vmax;
  background: radial-gradient(closest-side, oklch(0.56 0.15 22), transparent 70%);
  opacity: var(--nebula-rose-o);
  animation: nebulaDriftB 58s ease-in-out infinite alternate;
}
@keyframes nebulaDriftA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(7vmax, -4vmax, 0) scale(1.12); }
}
@keyframes nebulaDriftB {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-6vmax, -5vmax, 0) scale(0.98); }
}

/* ---- 黎明地平线(第五幕,JS 以 --dawn-rise 0→1 驱动) ---- */
.dawn-horizon {
  position: fixed;
  inset: auto 0 0 0;
  height: 72vh;
  z-index: var(--z-atmo);
  pointer-events: none;
  opacity: var(--dawn-rise, 0);
  background:
    radial-gradient(120% 90% at 50% 108%,
      oklch(0.78 0.10 55 / 0.50) 0%,
      oklch(0.62 0.10 40 / 0.28) 34%,
      oklch(0.40 0.07 320 / 0.12) 62%,
      transparent 82%);
}

/* ---- 胶片颗粒(预渲染贴片,步进位移 = 每帧新颗粒的错觉) ---- */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: var(--z-overlay);
  pointer-events: none;
  background-image: var(--grain-url, none); /* JS 注入 data-url */
  background-repeat: repeat;
  opacity: 0.05;
  animation: grainShift 0.9s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate3d(0, 0, 0); }
  17%  { transform: translate3d(-3%, 2%, 0); }
  33%  { transform: translate3d(2%, -3%, 0); }
  50%  { transform: translate3d(-2%, -2%, 0); }
  67%  { transform: translate3d(3%, 1%, 0); }
  83%  { transform: translate3d(1%, 3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ---- 暗角(电影取景) ---- */
.vignette {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  background:
    radial-gradient(135% 105% at 50% 46%,
      transparent 52%,
      oklch(0.08 0.02 275 / 0.34) 82%,
      oklch(0.06 0.02 275 / 0.62) 100%);
}

/* ---- 幕间换盘闪烁(film burn:极短的暖光脉冲) ---- */
.film-burn {
  position: fixed;
  inset: 0;
  z-index: var(--z-burn);
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(90% 70% at 50% 50%,
      oklch(0.92 0.09 75 / 0.85) 0%,
      oklch(0.75 0.13 45 / 0.5) 42%,
      oklch(0.3 0.08 25 / 0.25) 70%,
      transparent 100%);
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  .nebula i { animation: none; }
  .grain { animation: none; }
}