/* Lynux 五层叠加背景（移植自 Hermes 0.14 Backdrop.tsx）
 *
 * 4 个 fixed div 叠在 <body> 之上、z=0/1/2/3 之上；
 * 主内容通过 z>=10 浮在背景之上。
 *
 * z 索引与公式（参考 README 第七节补充说明）：
 *
 *   z=0   body 背景 = C_bg                                  基色
 *   z=1   .bg-filler        img 反相, 3.3% 透明度          difference
 *        D_1 = |B - (255 - I)| × α_1 + B × (1 - α_1), α_1 = 0.033
 *   z=2   .bg-glow          radial-gradient(0% 0%)         lighten
 *        G(r) = (1 - clamp(r/600, 0, 1)^2) × 0.22, α_2 = 0.22
 *   z=3   .bg-noise         SVG fractalNoise 0.85/4         color-dodge
 *        C_dodge(a, b) = min(255, a / (1 - b/255)), α_3 = 0.55 × mul
 *
 *  移植点：
 *    - 原 Backdrop.tsx 用 React <img>；lynux 是 SSR PHP，故用 background-image。
 *    - 0.14 用 JPG；这里用 WebP（>10× 小），filler-bg0.webp 已落在 public/assets/img/
 *    - prefers-reduced-motion 时关 noise + filler（移植 useGpuTier 的可访问性行为）。
 */

.bg-filler, .bg-glow, .bg-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* z=1：filler 反相纹理（与底色 difference 叠加）
 *
 * 原 Backdrop.tsx 用 <img class="invert">，lynux 改用 background-image + filter:
 *   img 反相：I' = 255 - I
 *   容器 difference：D_1 = |B - I'|
 *   透明度：α_1 = 0.033（让差异只贡献 3.3%）
 */
.bg-filler {
    background-image: url('/assets/img/filler-bg0.webp?v=6ab0e019');
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
    filter: invert(1);
    opacity: 0.033;
    mix-blend-mode: difference;
}

/* z=2：左上 → 右下的椭圆径向暖光 */
.bg-glow {
    background: radial-gradient(
        ellipse at 0% 0%,
        transparent 60%,
        var(--warm-glow) 100%
    );
    opacity: 0.22;
    mix-blend-mode: lighten;
}

/* z=3：SVG 程序化噪点（fractalNoise 0.85 / 4 octaves） */
.bg-noise {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' fill='%23eaeaea' filter='url(%23n)' opacity='0.6'/></svg>");
    background-size: 512px 512px;
    opacity: calc(0.55 * var(--noise-opacity-mul, 1));
    mix-blend-mode: color-dodge;
}

/* 可访问性：低运动偏好 → 关掉动态纹理层（移植 useGpuTier 行为） */
@media (prefers-reduced-motion: reduce) {
    .bg-noise { display: none; }
    .bg-filler { opacity: 0; }
}

/* 主内容必须浮在所有背景层之上。
 * 裸 `main` 已覆盖 main.site-main / main.admin-main —— 外壳改造后 <main> 不再带
 * .container（限宽移交给内层 .container），原先的 main.container 成了死选择器。 */
.site-header,
.site-footer,
main {
    position: relative;
    z-index: 10;
}

/* 暗色模式下让 main 容器半透明，让背景能看到 */
:root:not([data-theme="light"]) body .site-header {
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}