/* ==========================================================================
   首页背景视频
   ==========================================================================

   参考站是"全屏 hero + 单页滚动"，本主题是"居中卡片 + 侧栏 + 瀑布流"。
   所以这里做成**最底层固定背景**，内容浮在其上，而不是套用 hero 布局
   （套 hero 会和侧栏、瀑布流打架）。

   清晰度变化由 JS 驱动这几个变量：
     --bgv-blur / --bgv-bright / --bgv-sat / --bgv-scale
   ========================================================================== */

:root {
    --bgv-blur: 22px;
    --bgv-bright: 0.32;
    --bgv-sat: 0.5;
    --bgv-scale: 1.1;
}

#bg-video-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* 背景层纯装饰，绝不能挡住点击 */
    pointer-events: none;
    background: var(--under-background, #f7f7f7);
}

#bg-video,
#bg-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* 铺满不变形 */
    object-fit: cover;
    object-position: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(var(--bgv-blur)) brightness(var(--bgv-bright)) saturate(var(--bgv-sat));
    transform: scale(var(--bgv-scale));
    will-change: opacity, filter, transform;
    transition: opacity 0.8s ease;
}

/* 视频默认透明，JS 在可以流畅播放后才淡入 */
#bg-video {
    opacity: 0;
    z-index: 2;
}

#bg-video-poster {
    z-index: 1;
}

/*
 * 暗化遮罩
 *
 * 视频本身亮度已经压到 0.32，但内容区上的文字仍需要对比度保障。
 * 这里再叠一层从上下加深的渐变，让顶栏和底部导航区域更稳。
 *
 * ⚠ 这层不只是"好看"：卡片半透明后，正文的对比度就要靠它兜住。
 *   所以调卡片透明度时，**不要**同时把这层减弱 ——
 *   两者是配套的，一起改很容易出现"图透出来了但字看不清"。
 */
#bg-video-veil {
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        linear-gradient(to bottom,
            rgb(0 0 0 / 30%) 0%,
            rgb(0 0 0 / 14%) 30%,
            rgb(0 0 0 / 18%) 70%,
            rgb(0 0 0 / 34%) 100%);
}

/*
 * 让页面底色透出视频
 *
 * 原本 body 是 --under-background（浅色 #f7f7f7e6 / 深色 #171c28e6，带 e6 不透明度）。
 * 视频在 z-index:0、body 底色在它之上，所以必须把底色让开。
 *
 * 这里不是直接设成透明：卡片之上留一层很淡的底色，
 * 保证正文在明亮的视频画面上依然能读。
 */
html.bgv-on body {
    background: transparent;
}

html.bgv-on .main_screen {
    position: relative;
    z-index: 1;
}

/*
 * 顶栏文字强制浅色
 *
 * ⚠ 这是个必须处理的组合问题：
 *
 * 白天模式下主题的配色是「浅底 + 深字」——
 *   --main = rgb(52 73 94)   深蓝灰
 * 但背景视频是"深色影院感"的画面，它盖在 body 浅底之上，
 * 于是顶栏那几行字变成**深色字压在深色视频上**，几乎看不见。
 * （用户实测："白天头像下字体颜色很暗，黑色背景看着不明显"）
 *
 * 所以启用背景视频时，顶栏文字不再跟随白天/夜晚模式，一律用浅色 ——
 * 因为此时的"背景"是视频，不是页面底色。
 *
 * 注意加 text-shadow：视频画面明暗不定，单靠白字在某些帧上仍会糊，
 * 一点投影能显著提升可读性。
 *
 * 只改顶栏（.cat_top）。正文卡片有自己的半透明底，不需要动，
 * 否则浅色模式下的正文会变成浅字压浅底，反而更糟。
 */
html.bgv-on .cat_top {
    color: #fff;
}

html.bgv-on .cat_top .webtitle {
    color: #fff;
    text-shadow: 0 2px 12px rgb(0 0 0 / 55%);
}

html.bgv-on .cat_top .description {
    /* 夜景下 0.7 太淡，提一点；同时保证够亮 */
    color: rgb(255 255 255 / 88%);
    opacity: 1;
    text-shadow: 0 1px 8px rgb(0 0 0 / 55%);
}

/*
 * 侧栏与卡片：给一点半透明，让视频"透"出来但文字仍清晰
 *
 * ⚠⚠ 这里是踩过坑的地方，改动前务必读 ⚠⚠
 *
 * CSS 规范：`backdrop-filter`（以及 filter / transform / perspective / contain）
 * 会**为 position:fixed 的后代元素创建新的包含块**。
 *
 * 我一开始写成：
 *     html.bgv-on .sidebar, html.bgv-on .cat_block, html.bgv-on .post_card { backdrop-filter: blur(10px); }
 * 结果移动端「底部栏」跑到了头像标题下面。
 * 原因：底部栏 `.cat_menu .right` 是 `position:fixed; bottom:0`，
 * 而它的父元素 `.cat_menu` **带 cat_block 类** —— 于是它的包含块
 * 从"视口"变成了 `.cat_menu`；而 `.cat_menu` 高度是 0（sticky、无内容），
 * 所以 bottom:0 就等于贴在它下沿，也就是标题下方。
 * 实测坐标：包含块为 .cat_menu 时 top=248，为视口时 top=764（视口高 844）。
 *
 * 所以规则是：**只给"叶子级视觉容器"加玻璃态，
 * 绝不给可能承载 fixed 子元素的布局容器加**。
 *
 * 目前只加在：
 *   .cat_block .little_card_title 等内部小块 —— 它们不含 fixed 子元素
 * 明确排除：
 *   .cat_menu        （含 fixed 的底部栏与抽屉）
 *   .sidebar         （含 fixed 的回到顶部等按钮）
 */
html.bgv-on .postlist_card_title,
html.bgv-on .links_part_grid,
html.bgv-on .footer_info_card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/*
 * 卡片半透明：让视频"透"出来。
 *
 * 数值取 55%：再低就开始伤害文字可读性了（尤其浅色模式 + 亮视频），
 * 所以同时把遮罩 #bg-video-veil 也调实一点来兜住对比度（见文件开头）。
 *
 * 这里**不用 backdrop-filter**：半透明底色视觉上接近毛玻璃，
 * 但不会创建包含块，没有上面说的那个副作用。
 */
html.bgv-on .cat_block,
html.bgv-on .post_card {
    background-color: color-mix(in srgb, var(--background) 55%, transparent);
}

/*
 * 侧栏弹窗
 *
 * ⚠ 这里有个我踩过的坑，务必看清：
 *
 * 弹窗 `.cat_tanchuang` 自己是 `position:fixed` + `backdrop-filter: blur(2rem)`。
 * 它内部的卡片一开始是不透明的白块，看起来像"三张白纸贴在毛玻璃上"，
 * 所以我把内部卡片调透明了（见下面）。
 *
 * 但同时我又犯了个错：加了条防回归规则，把弹窗自己的 backdrop-filter
 * 也一并撤掉了（理由写的是"里面可能有 fixed 元素"）。
 * 结果弹窗失去模糊，62% 的透明底根本挡不住背后内容 ——
 * 卡片和文字全部穿透上来，比改之前还难读。
 *
 * 教训：**弹窗这种"独立浮层"必须保留自己的模糊**，
 * 它和"父容器里含 fixed 子元素"是两回事。
 * 只有当 fixed 元素需要相对**视口**定位时，祖先的 backdrop-filter 才是问题；
 * 弹窗本身就是相对视口居中的，它作为包含块完全合理。
 *
 * 不用 backdrop-filter 的浏览器退回更实的底色，保证可读性。
 */
html.bgv-on .cat_tanchuang {
    background: color-mix(in srgb, var(--background) 72%, transparent);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.bgv-on .cat_tanchuang {
        background: color-mix(in srgb, var(--background) 94%, transparent);
    }
}

/*
 * 弹窗内部的卡片再透一点，去掉"一块一块"的碎裂感。
 *
 * 弹窗自己已经有模糊隔开背景，所以内层不需要再加任何模糊 ——
 * 让它更接近弹窗底色，只靠 .little_card_title 的留白区分，
 * 三块（Search / Tags / 统计）就"化"成一张连续的玻璃面板。
 */
html.bgv-on .cat_tanchuang .cat_block {
    background-color: color-mix(in srgb, var(--background) 26%, transparent);
}

/*
 * ⚠ 防回归保险 ⚠
 *
 * 只要某个容器**含有需要相对视口定位的 position:fixed 后代**，
 * 就必须撤掉它自己的 transform / filter / backdrop-filter ——
 * 否则会创建包含块，把那些 fixed 元素钉在它身上（移动端底部栏错位就是这么来的）。
 *
 * 用 :has() 自动兜底：以后往这些容器里再加 fixed 元素，
 * 甚至再手滑给它们加玻璃态，都不会重现那个 bug。
 *
 * ⚠ 不要把这个列表扩大化：只列"确实承载视口级 fixed 元素"的容器。
 *   .cat_menu            含 fixed 的底部栏（.right）与抽屉（.left）
 *   .sidebar             含 fixed 的回到顶部等按钮
 * 明确**不包含** .cat_tanchuang —— 它自己的模糊是必需的（见上）。
 * 老浏览器不支持 :has() 时整条规则被忽略，不影响正常显示。
 */
@supports selector(:has(*)) {
    html.bgv-on .cat_menu:has(.right),
    html.bgv-on .cat_menu:has(.left),
    html.bgv-on .cat_menu:has(.menu_off),
    html.bgv-on .sidebar:has(.anniu) {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        filter: none;
        transform: none;
    }
}

/* 不支持 color-mix 的老浏览器退回原来的纯色，不影响功能 */
@supports not (background-color: color-mix(in srgb, red 50%, transparent)) {
    html.bgv-on .cat_block,
    html.bgv-on .post_card {
        background-color: var(--background);
    }
}

/* 深色模式：底色换成深色，避免亮视频配浅色卡片刺眼 */
html.darkmode.bgv-on #bg-video-layer {
    background: #171c28;
}

/* 用户系统设置里开了"减少动态效果"就完全不显示视频，尊重无障碍偏好 */
@media (prefers-reduced-motion: reduce) {
    #bg-video-layer {
        display: none;
    }

    html.bgv-on body {
        background: var(--under-background);
    }
}