/* ==========================================================================
   粉紫色流体 · web 底图   v1.0   封板 2026-10-19
   --------------------------------------------------------------------------
   配合 flow-bg.js 使用。这几个类名是引擎约定的，不要改：
     .bg-glow        容器（fixed 全屏，垫在所有内容下面）
     canvas          由 JS 挂载（推荐加 data-flow-canvas）
     .fallback       WebGL 不可用时的静态兜底光斑
     .veil           可选：首屏顶部白纱，给大标题留可读区（需页面 JS 滚动淡出）

   🔴 三条不要动的东西（动了就出事，原因见 README「硬约束」）：
     1. z-index:-1 + position:fixed —— 底图必须在内容之下且不参与滚动
     2. 容器 background 必须是 #FFFFFF —— 这层是「白纸」，云之外必须是纯白
     3. canvas 的 opacity 只能通过 --flow-opacity 调，不要在 JS 里改 style.opacity
   ========================================================================== */

.bg-glow{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  overflow:hidden;
  background:#FFFFFF;
  /* 整体浓淡：0.55 很淡 / 1 默认。浓淡主要靠 shader 的 CFG.alpha，
     这个变量是给「同一页面里想让底图再退一点」准备的 */
  --flow-opacity:1;
}

.bg-glow canvas{
  position:absolute; inset:0; display:block;
  width:100%; height:100%;
  opacity:var(--flow-opacity);
}

/* WebGL 不可用时的兜底：三层柔紫光斑堆一张静态云，保证版面观感不塌。
   颜色取自封板版的紫粉档（#E164FF / #CF5FFF / #CC4EFE），
   🔴 不要放 #8B5CF6 —— 它偏蓝（R−B 差 107），一进兜底就跟正常页成了两个色。
   改基色时这里也要跟着改。 */
.bg-glow .fallback{
  display:none;
  position:absolute; inset:-12%;
  background:
    radial-gradient(46% 42% at 26% 30%, rgba(225,100,255,.55) 0%, rgba(225,100,255,0) 70%),
    radial-gradient(54% 48% at 76% 64%, rgba(207,95,255,.52) 0%, rgba(207,95,255,0) 72%),
    radial-gradient(40% 38% at 48% 84%, rgba(204,78,254,.40) 0%, rgba(204,78,254,0) 70%);
  filter:blur(60px);
  opacity:var(--flow-opacity);
}

/* 顶部白纱：只在首屏给深色/橙色大标题留可读区。
   🔴 它必须随滚动淡出（页面 JS 改 --veil-op），否则作为 fixed 层会一直压在顶部，
      再叠上 nav 自己的渐隐白，顶部就成了永远的白色，云根本流不上来。 */
.bg-glow .veil{
  position:absolute; inset:0;
  opacity:var(--veil-op,1);
  transition:opacity .18s linear;
  background:linear-gradient(180deg,
    rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 9%,
    rgba(255,255,255,.08) 19%, rgba(255,255,255,.02) 28%,
    transparent 36%);
}

/* 矮屏（笔记本横屏）首屏高度不够，白纱收短一点，否则云几乎看不见 */
@media (max-height:700px){
  .bg-glow .veil{
    background:linear-gradient(180deg,
      rgba(255,255,255,.44) 0%, rgba(255,255,255,.22) 8%,
      rgba(255,255,255,.07) 17%, transparent 28%);
  }
}

/* ---------- 页面里配合用的两行（可选） ---------- */
/* 用了 .veil 就要加这段，否则白纱永远不散 */
/* JS:
   function onScroll(){
     const y = window.scrollY || 0;
     document.querySelector('.bg-glow')?.style.setProperty('--veil-op',
       Math.max(0, 1 - y / 260).toFixed(3));
   }
   addEventListener('scroll', onScroll, {passive:true}); onScroll();
*/