@charset "UTF-8";
/* ==========================================================================
   backdrop.css · 液态背景层（极光光斑 + 颗粒噪点 + 蒙层）
   --------------------------------------------------------------------------
   结构（见 CONTRACT.md §3）：
     .backdrop > .backdrop__blob--1..5 + .backdrop__grain + .backdrop__veil
   性能红线：所有漂浮动画【只】动 transform / opacity，且元素带 will-change: transform
            → 全部走合成层，主线程不参与，稳定 60fps。
   质感红线：5 个光斑用不同大小/位置/颜色 + 不同周期（34~62s）制造错位「液态」感；
            颗粒噪点用来消除径向渐变的色带（banding），这是「高级感」的关键。
   ========================================================================== */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  overflow: hidden;
  pointer-events: none;
  /* 背景层是纯装饰：声明包含性，避免其重绘影响内容 */
  contain: strict;
  /* 全站唯一的渐变底色来源（body 不再重复铺一层，实测那是 100% 被遮挡的无效绘制）。
     position: fixed + inset: 0 → 渐变只有视口大小，每个滚动位置看到的是同一套
     颜色层次（实测每屏 14 档可分辨明度）；同时用兜底纯色避免极端情况下露白。 */
  background-color: var(--bg-app-solid);
  background-image: var(--bg-app);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ==========================================================================
   1. 光斑基类
   ========================================================================== */

.backdrop__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: var(--blob-opacity, 0.62);
  filter: blur(var(--blob-blur, 85px));
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  /* 光斑只做加法/柔光混合，避免在浅底上形成灰浊块 */
  mix-blend-mode: normal;
  backface-visibility: hidden;
}

/* -- 1 玫瑰粉：左上主光，最大最亮，全站色彩支点 -- */
.backdrop__blob--1 {
  --blob-blur: 96px;
  --blob-opacity: 0.72;
  top: -16vmax;
  left: -20vmax;
  width: 84vmax;
  height: 84vmax;
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(255, 122, 173, 0.95) 0%,
    rgba(255, 150, 192, 0.72) 34%,
    rgba(255, 186, 214, 0.34) 62%,
    rgba(255, 186, 214, 0) 76%
  );
  animation: blob-drift-1 42s var(--ease-in-out-soft) infinite;
}

/* -- 2 浅紫：右上，与粉形成冷暖对撞
   实测教训：原 rgba(168,138,240,0.85) 太强，在粉底上合成了【纯紫 #e6dcff】
   （R−B = −25），紫色像素一度占 11.7%，与「粉色为主」的方向直接相反。
   现按数值求解改为「藕紫粉」，并降低不透明度，保证叠加后仍 R−B > 0（偏粉）。
   它现在只负责给粉底加一点冷调层次，不再抢主色。 */
.backdrop__blob--2 {
  --blob-blur: 100px;
  --blob-opacity: 0.46;
  top: 6vmax;
  right: -24vmax;
  width: 68vmax;
  height: 68vmax;
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(224, 178, 226, 0.8) 0%,
    rgba(232, 190, 226, 0.5) 38%,
    rgba(240, 206, 228, 0.22) 66%,
    rgba(240, 206, 228, 0) 78%
  );
  animation: blob-drift-2 54s var(--ease-in-out-soft) infinite;
}

/* -- 3 蜜桃：左下，暖色托底 -- */
.backdrop__blob--3 {
  --blob-blur: 92px;
  --blob-opacity: 0.58;
  bottom: -22vmax;
  left: 2vmax;
  width: 76vmax;
  height: 76vmax;
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(255, 172, 136, 0.8) 0%,
    rgba(255, 202, 174, 0.5) 36%,
    rgba(255, 224, 204, 0.22) 64%,
    rgba(255, 224, 204, 0) 78%
  );
  animation: blob-drift-3 62s var(--ease-in-out-soft) infinite;
}

/* -- 4 玫瑰金：右中，细碎高光 -- */
.backdrop__blob--4 {
  --blob-blur: 72px;
  --blob-opacity: 0.54;
  bottom: 18vmax;
  right: -8vmax;
  width: 44vmax;
  height: 44vmax;
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(226, 160, 132, 0.85) 0%,
    rgba(238, 192, 168, 0.52) 40%,
    rgba(246, 216, 200, 0.2) 68%,
    rgba(246, 216, 200, 0) 80%
  );
  animation: blob-drift-4 34s var(--ease-in-out-soft) infinite;
}

/* -- 5 柔粉光晕：画面中央的提亮核心
   注：原先用近白 #fffdfa（chroma≈5），在粉底上等于「漂白剂」，
   会把中部的粉又洗淡。改为带明显粉调的柔光，只提亮、不抽色。 */
.backdrop__blob--5 {
  --blob-blur: 70px;
  --blob-opacity: 0.5;
  top: 30%;
  left: 24%;
  width: 40vmax;
  height: 40vmax;
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(255, 214, 232, 0.9) 0%,
    rgba(255, 196, 222, 0.52) 42%,
    rgba(255, 188, 218, 0.18) 70%,
    rgba(255, 188, 218, 0) 82%
  );
  animation: blob-drift-5 48s var(--ease-in-out-soft) infinite;
}

/* ==========================================================================
   2. 五段互质周期漂浮（错位即「液态」）
   ========================================================================== */

@keyframes blob-drift-1 {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 0.68;
  }
  25% {
    transform: translate3d(6vmax, 4vmax, 0) scale(1.12) rotate(18deg);
    opacity: 0.78;
  }
  50% {
    transform: translate3d(-2vmax, 8vmax, 0) scale(1.04) rotate(36deg);
    opacity: 0.6;
  }
  75% {
    transform: translate3d(-7vmax, 2vmax, 0) scale(1.14) rotate(12deg);
    opacity: 0.74;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 0.68;
  }
}

@keyframes blob-drift-2 {
  0% {
    transform: translate3d(0, 0, 0) scale(1.05) rotate(0deg);
    opacity: 0.56;
  }
  30% {
    transform: translate3d(-8vmax, 6vmax, 0) scale(0.94) rotate(-22deg);
    opacity: 0.66;
  }
  60% {
    transform: translate3d(-3vmax, -5vmax, 0) scale(1.16) rotate(-42deg);
    opacity: 0.5;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1.05) rotate(0deg);
    opacity: 0.56;
  }
}

@keyframes blob-drift-3 {
  0% {
    transform: translate3d(0, 0, 0) scale(1.02);
    opacity: 0.52;
  }
  35% {
    transform: translate3d(9vmax, -6vmax, 0) scale(1.18);
    opacity: 0.62;
  }
  70% {
    transform: translate3d(2vmax, -10vmax, 0) scale(0.92);
    opacity: 0.44;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1.02);
    opacity: 0.52;
  }
}

@keyframes blob-drift-4 {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 0.48;
  }
  33% {
    transform: translate3d(-6vmax, -7vmax, 0) scale(1.2) rotate(28deg);
    opacity: 0.6;
  }
  66% {
    transform: translate3d(4vmax, -3vmax, 0) scale(0.88) rotate(-16deg);
    opacity: 0.4;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 0.48;
  }
}

@keyframes blob-drift-5 {
  0% {
    transform: translate3d(0, 0, 0) scale(0.98);
    opacity: 0.42;
  }
  40% {
    transform: translate3d(5vmax, 7vmax, 0) scale(1.22);
    opacity: 0.54;
  }
  75% {
    transform: translate3d(-6vmax, 3vmax, 0) scale(1.06);
    opacity: 0.36;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(0.98);
    opacity: 0.42;
  }
}

/* ==========================================================================
   3. 颗粒噪点（消除渐变色带，务必保持 3%~6% 极低不透明度）
   SVG feTurbulence 内联 data-URI，零网络请求。
   ========================================================================== */

.backdrop__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  /* 颗粒本身是静态纹理，不需要 will-change */
}

/* ==========================================================================
   4. 蒙层：只做「柔化对比 + 暗角」，绝不再漂白粉色
   --------------------------------------------------------------------------
   原实现顶部叠了 rgba(255,255,255,0.34) 的白色，等于在粉底上又刷一层白，
   把光斑的粉色洗淡一道 —— 这是「开屏一片苍白」的直接成因之一。
   现在改为：顶部用极淡的暖粉提亮（不是白），底部用玫瑰棕压暗收边，
   四周加轻微暗角把视线收拢到中间。
   ========================================================================== */

.backdrop__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    /* 顶部提亮：刻意做得很轻（0.22 → 0.10）且是暖粉而非白色。
       原因：首屏 hero 正好落在顶部，若这里用较浓的白或亮粉，会持续把首屏洗淡 ——
       原先的 rgba(255,255,255,0.34) 纯白正是「开屏一片苍白」的成因之一。 */
    linear-gradient(
      to bottom,
      rgba(255, 240, 247, 0.1) 0%,
      rgba(255, 240, 247, 0) 26%,
      rgba(214, 130, 170, 0.05) 70%,
      rgba(176, 88, 132, 0.14) 100%
    ),
    /* 四周暗角：把视线收拢到中间，同时增加背景层次 */
    radial-gradient(
      124% 96% at 50% 44%,
      rgba(255, 255, 255, 0) 38%,
      rgba(163, 74, 120, 0.05) 72%,
      rgba(140, 56, 100, 0.11) 100%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ==========================================================================
   5. 深色主题 · 夜色玫瑰背景
   底色转为深玫瑰棕，光斑改为发光粉紫/玫瑰金夜光（不是简单反相）
   ========================================================================== */

html[data-theme="dark"] .backdrop__blob--1 {
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(255, 111, 165, 0.6) 0%,
    rgba(196, 74, 122, 0.4) 34%,
    rgba(120, 44, 78, 0.18) 64%,
    rgba(120, 44, 78, 0) 78%
  );
}

html[data-theme="dark"] .backdrop__blob--2 {
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(146, 116, 232, 0.5) 0%,
    rgba(104, 80, 190, 0.32) 38%,
    rgba(70, 52, 140, 0.14) 66%,
    rgba(70, 52, 140, 0) 80%
  );
}

html[data-theme="dark"] .backdrop__blob--3 {
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(214, 154, 131, 0.42) 0%,
    rgba(168, 106, 92, 0.28) 38%,
    rgba(110, 64, 62, 0.14) 66%,
    rgba(110, 64, 62, 0) 80%
  );
}

html[data-theme="dark"] .backdrop__blob--4 {
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(var(--gold-rgb), 0.4) 0%,
    rgba(196, 138, 112, 0.26) 40%,
    rgba(130, 82, 70, 0.12) 68%,
    rgba(130, 82, 70, 0) 80%
  );
}

html[data-theme="dark"] .backdrop__blob--5 {
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(255, 214, 235, 0.26) 0%,
    rgba(214, 150, 190, 0.16) 42%,
    rgba(140, 92, 130, 0.08) 70%,
    rgba(140, 92, 130, 0) 84%
  );
}

html[data-theme="dark"] .backdrop__grain {
  opacity: 0.06;
  mix-blend-mode: soft-light;
}

html[data-theme="dark"] .backdrop__veil {
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 214, 235, 0.06) 0%,
      rgba(255, 214, 235, 0) 30%,
      rgba(12, 6, 12, 0.24) 72%,
      rgba(8, 4, 8, 0.5) 100%
    ),
    radial-gradient(
      124% 96% at 50% 44%,
      rgba(8, 4, 8, 0) 34%,
      rgba(8, 4, 8, 0.22) 74%,
      rgba(6, 2, 6, 0.44) 100%
    );
}

/* ==========================================================================
   6. 移动端性能：缩小模糊半径与光斑尺寸（视觉几乎不变，GPU 负载大幅下降）
   ========================================================================== */

@media (max-width: 520px) {
  .backdrop__blob--1 {
    --blob-blur: 56px;
    width: 106vmax;
    height: 106vmax;
  }

  .backdrop__blob--2 {
    --blob-blur: 58px;
    width: 88vmax;
    height: 88vmax;
  }

  .backdrop__blob--3 {
    --blob-blur: 54px;
    width: 96vmax;
    height: 96vmax;
  }

  .backdrop__blob--4 {
    --blob-blur: 46px;
    width: 60vmax;
    height: 60vmax;
  }

  .backdrop__blob--5 {
    --blob-blur: 40px;
    width: 54vmax;
    height: 54vmax;
  }

  .backdrop__grain {
    background-size: 128px 128px;
    opacity: 0.04;
  }
}

/* 低性能/省流量设备：直接关掉最耗时的旋转与缩放幅度 */
@media (max-width: 380px) {
  .backdrop__blob {
    --blob-blur: 38px;
  }
}

/* ==========================================================================
   7. 可访问性：reduced-motion 下彻底停止背景漂浮（静态光斑仍保留氛围）
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .backdrop__blob {
    animation: none !important;
    will-change: auto;
    transform: translate3d(0, 0, 0);
    opacity: var(--blob-opacity, 0.6);
  }
}