/* ===========================================================
   background.css — 全局背景：4 个径向光斑 + 噪点纹理
   光斑固定在 viewport，滚动时轻微视差（JS 控制 transform）
   =========================================================== */

/* 背景画布：fixed 全屏，位于所有内容之下 */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  overflow: hidden;
  background-color: var(--bg-base);
}

/* 4 个光斑层，各自绝对定位 + 缓慢视差 */
.bg-glow {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  will-change: transform;
}

.bg-glow--1 {
  background: var(--glow-1);
}

.bg-glow--2 {
  background: var(--glow-2);
}

.bg-glow--3 {
  background: var(--glow-3);
}

.bg-glow--4 {
  background: var(--glow-4);
}

/* 噪点层：SVG feTurbulence 内联 data-URL，opacity 0.04 */
.bg-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* 光斑缓慢呼吸（不抢戏，时长 12s+） */
@keyframes bg-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  50%      { transform: translate3d(0, -1%, 0) scale(1.04); opacity: 0.92; }
}

.bg-glow--1 { animation: bg-breathe 16s ease-in-out infinite; }
.bg-glow--2 { animation: bg-breathe 20s ease-in-out infinite -3s; }
.bg-glow--3 { animation: bg-breathe 18s ease-in-out infinite -6s; }
.bg-glow--4 { animation: bg-breathe 22s ease-in-out infinite -9s; }

@media (prefers-reduced-motion: reduce) {
  .bg-glow--1, .bg-glow--2, .bg-glow--3, .bg-glow--4 {
    animation: none;
  }
}