/* ============================================================
   背景：复刻参考图 NMLJ05.png 的「日光 × 薄雾 × 枝叶」氛围
   —— 全部由代码生成，不载入任何位图
   色值取自参考图的真实像素：
     暖米白 #FDF9F2 / #F8EFE2   琥珀金 #E4BD88 / #D3A56C
     鼠尾草绿 #A6AE7D / #96A378  灰褐 #B8AD95
   背景随页面一起滚动（absolute），高度跟着文档走（约 4 屏）。
   图层（由下到上）：
     1 paper    纸面底色 + 顶部高光（越往下越暖）
     1.5 green  几团失焦的绿色（大块渐变）
     2 bloom    贯穿全页的暖黄光线（第一屏右上最亮，页尾右下琥珀色）
     3 foliage  左上角一丛枝叶（只出现在页面顶部）
     4 grain    颗粒
     5 vignette 暗角
   ============================================================ */

:root {
  --paper: #f7ebd9;                    /* 纸面基色，也是兜底色 */
  --vignette-ink: 112, 94, 66;         /* 暗角的灰褐 */
  --particle-blur: 32px;               /* 粒子模糊：CSP 范围值 120 在屏幕上的等效值 */
}

/* ---------- 容器：铺满整张画布、随页面滚动、不拦鼠标 ---------- */
/* 饱和度 +10（按 CSP 那类软件的数值口径）：filter 的 saturate 以 1 为原值，
   +10 约等于 1.1 倍，只作用于背景，不影响上方文字 */
.bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background: var(--paper);
  filter: saturate(1.1);
}

/* ---------- 1. 纸面底色 ---------- */
.bg-paper {
  position: absolute;
  inset: 0;
  background:
    /* 顶部中间的高光 */
    radial-gradient(52% 10% at 45% 4%,
      rgba(255, 250, 238, .46) 0%,
      rgba(255, 250, 238, 0) 72%),
    /* 顶部右侧的暖光晕 */
    radial-gradient(58% 12% at 80% 1%,
      rgba(250, 224, 182, .62) 0%,
      rgba(250, 224, 182, 0) 72%),
    /* 竖向：越往下越暖、越黄 */
    linear-gradient(180deg,
      #fcf6ea 0%,
      #f9edda 10%,
      #f5e5cd 25%,
      #efdcbe 50%,
      #e9d1ab 75%,
      #e7cda4 100%);
}

/* ---------- 1.5 绿色雾斑（大块渐变） ---------- */
/* 参考图里除了叶子，还有几团失焦的绿，
   用很大的径向渐变铺开，让整面墙更“湿润”，不出现硬边 */
.bg-green {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 16% at 12% 18%,
      rgba(138, 156, 102, .36) 0%,
      rgba(138, 156, 102, 0) 72%),
    radial-gradient(45% 13% at 55% 42%,
      rgba(144, 162, 108, .20) 0%,
      rgba(144, 162, 108, 0) 74%),
    radial-gradient(50% 15% at 25% 66%,
      rgba(138, 156, 102, .18) 0%,
      rgba(138, 156, 102, 0) 74%),
    radial-gradient(55% 16% at 80% 88%,
      rgba(150, 162, 112, .16) 0%,
      rgba(150, 162, 112, 0) 76%);
  filter: blur(30px);
}

/* ---------- 2. 暖黄光线（沿整张长画布分布） ---------- */
.bg-bloom {
  position: absolute;
  inset: 0;
  background:
    /* 第一屏右上：最亮的一团太阳光 */
    radial-gradient(30% 9% at 86% 8%,
      rgba(243, 197, 120, .74) 0%,
      rgba(241, 201, 142, .30) 50%,
      rgba(241, 201, 142, 0) 76%),
    /* 中段右侧：两层很淡的暖光，让往下滚的过程一直是暖的 */
    radial-gradient(24% 8% at 93% 30%,
      rgba(241, 201, 143, .26) 0%,
      rgba(241, 201, 143, 0) 76%),
    radial-gradient(24% 8% at 90% 55%,
      rgba(238, 196, 138, .22) 0%,
      rgba(238, 196, 138, 0) 76%),
    /* 页尾右下：偏蜂蜜色的暖光，亮而不浑 */
    radial-gradient(48% 12% at 100% 98%,
      rgba(233, 172, 84, .55) 0%,
      rgba(240, 197, 130, .26) 52%,
      rgba(240, 197, 130, 0) 80%),
    /* 角落里再叠一层浅金高光，把“暗”提亮 */
    radial-gradient(30% 8% at 97% 97%,
      rgba(255, 224, 168, .45) 0%,
      rgba(255, 224, 168, 0) 72%),
    /* 右边缘贯穿整页的一条暖色，像反光 */
    linear-gradient(270deg,
      rgba(224, 178, 110, .30) 0%,
      rgba(224, 178, 110, .10) 12%,
      rgba(224, 178, 110, 0) 22%),
    /* 页尾左下：更深、更暖的米黄，压住画面 */
    radial-gradient(50% 14% at 0% 100%,
      rgba(204, 160, 96, .52) 0%,
      rgba(210, 170, 110, .24) 46%,
      rgba(212, 174, 116, 0) 78%),
    /* 页尾一段漫开的暖雾 */
    radial-gradient(40% 7% at 60% 99%,
      rgba(222, 185, 138, .18) 0%,
      rgba(222, 185, 138, 0) 74%);
  animation: bloom-drift 48s ease-in-out infinite alternate;
}

@keyframes bloom-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-1.2%, 1.5%, 0) scale(1.045); }
}

/* ---------- 3. 枝叶（只在页面顶部） ---------- */
/* 图形本身定义在 index.html 的 <defs> 里，这里只负责摆放 */
.bg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.bg-foliage {
  position: absolute;
  height: auto;
  overflow: visible;
  top: -9vh;
  left: -6%;
  width: clamp(270px, 31vw, 430px);
  opacity: .94;
}

/* ---------- 4. 颗粒 ---------- */
.bg-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .55;
  mix-blend-mode: soft-light;
}

/* ---------- 5. 暗角 ---------- */
.bg-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(var(--vignette-ink), .05) 0%,
      rgba(var(--vignette-ink), 0) 13%),
    linear-gradient(180deg,
      rgba(var(--vignette-ink), 0) 90%,
      rgba(var(--vignette-ink), .08) 100%);
}

/* ---------- 移动端 / 低性能设备：减少昂贵的合成 ---------- */
@media (max-width: 720px) {
  .bg-foliage { width: clamp(230px, 58vw, 310px); }
  .bg-bloom { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-bloom { animation: none; }
}

/* ---------- 6. 动效粒子（背景之上、文字之下） ---------- */
.bg-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  /* CSP 的高斯模糊范围 150 → 120 后，屏幕上的等效模糊约 32px；
     直接用 120px 会让粒子化进背景，看不见飘动 */
  filter: blur(var(--particle-blur));
  will-change: transform;
  transform: translate3d(-9999px, -9999px, 0);
}