/* =========================================================
   视觉特效：图片滑动模糊（补充 25）/ hr 剪刀抽搐修复（补充 27）/ 背景图清晰化（补充 28）/ 脚注（补充 42）/ 卡片阴影与上下篇悬停（补充 30）/ 列表封面悬停放大（补充 54）。
   （原 custom.css 拆分；"补充 N" 是历史编号，站内注释按编号引用，不要重排）
   ========================================================= */

/* =========================================================
   补充 25：图片「滑到哪张、哪张模糊一次」
   - 受控目标与触发时机全部在 inject.head 的内联脚本里判定，CSS 只管两态：
     目标先加 .fx-blur（模糊），满足「进入视口 + 已就绪」后加 .fx-ready（清晰）。
   - 之所以不用 CSS 选择器去挑目标：站内不少图片是**没有 class 的裸 div + 内联背景图**
     （例如侧栏「最新文章」的 62x62 缩略图），按 class 猜必然漏（踩过）。
   - 开关仍然是 html.img-fx：脚本没跑就不加这个类，图片正常显示，不会整站糊掉。
   - 只在「进入视口」时播放：图片加载远早于滚动到它，按加载完成触发的话，
     等滑过去时早已清晰，等于没有效果。
   ========================================================= */
html.img-fx .fx-blur {
    filter: blur(18px) !important;
    opacity: .85;
    transition: filter .8s ease, opacity .8s ease;
}

html.img-fx .fx-blur.fx-ready {
    filter: blur(0) !important;
    opacity: 1;
}

/* 首页卡片封面（div.post-bg，背景图）的初始模糊交给 CSS：
   JS（inject.bottom）在首帧渲染之后才跑到，靠它加 .fx-blur 的话，
   视口内的封面会「先清晰渲染几十毫秒 -> 闪糊 -> 立即 ready」，
   0.8s 的过渡完全看不见。用 :not(.fx-ready) 反转，第一帧就是糊的，
   就绪后由 JS 加 .fx-ready 渐清晰。其他元素（裸 div 缩略图、img）仍走 .fx-blur。 */
html.img-fx .post-bg:not(.fx-ready) {
    filter: blur(18px) !important;
    opacity: .85;
    transition: filter .8s ease, opacity .8s ease;
}
html.img-fx .post-bg.fx-ready {
    filter: blur(0) !important;
    opacity: 1;
}

/* 夜间模式：主题原本会压亮度，这里同步一份，免得被上面的 filter 覆盖 */
html.img-fx[data-theme="dark"] img.fx-blur.fx-ready {
    filter: blur(0) brightness(.88) contrast(.95) !important;
}

/* =========================================================
   补充 26：「语言」下拉的 UI —— 固定文案 + 当前项打勾
   - 文案由 js/lang-switch.js 写在 data-label 属性上，用 content: attr() 渲染。
     主题的 translateBody 只翻译「文本节点」和 title/alt/placeholder，
     **不会碰自定义属性**，所以「简体中文」「繁體中文」在任何语言下都保持原字形。
   - 左侧留一个图标位：当前语言显示 fa-check，未选中的 visibility:hidden 占位，
     这样切换时不会跳动，版式也和「博文 / 声明」子菜单的「图标 + 文字」一致。
    本段必须放在文件最后；注意不要再写「从某段起到文件末尾整段替换」的补丁脚本，
      否则会把排在它后面的段落一起删掉（补充 26 曾被这样误删过一次）。
   ========================================================= */
#nav .nav-lang-item .menus_item_child .nav-lang-text::before,
#sidebar-menus .nav-lang-item .menus_item_child .nav-lang-text::before {
    content: attr(data-label);
}

#nav .nav-lang-item .menus_item_child .nav-lang-mark,
#sidebar-menus .nav-lang-item .menus_item_child .nav-lang-mark {
    visibility: hidden;
    margin-right: 2px;
}

#nav .nav-lang-item .menus_item_child li.active .nav-lang-mark,
#sidebar-menus .nav-lang-item .menus_item_child li.active .nav-lang-mark {
    visibility: visible;
}

/* =========================================================
   补充 27：修复 <hr> 剪刀图标「抽搐」
   - 主题里剪刀是 hr::before，top:-10px（悬停在 hr 盒子【外面】），
     :hover 时 left 从 5% 滑到 calc(95% - 20px)。于是：
     鼠标落到剪刀上 -> 触发 :hover -> 剪刀滑走 -> 鼠标底下没东西了 ->
     :hover 丢失 -> 剪刀弹回 -> 又命中 -> 再滑走 …… 无限循环 = 抽搐。
   - 修法一：让剪刀不参与命中测试，滑走后 :hover 依然稳定（光标本来就压在 hr 上）
   - 修法二：给 hr 补一块透明命中区 —— hr 本体只有 1px 高，不补的话
     虽然不抽搐了，但这个滑动效果也几乎触发不到
   ========================================================= */
/*  必须和主题的剪刀选择器完全对齐：
   主题是 .custom-hr / .container hr / .search-dialog hr 三个，
   其中 .custom-hr 是 <!-- more --> 摘要分隔线 —— 也就是页面上真正可见的那个，
   漏了它就等于没修（踩过一次）。 */
.custom-hr,
.container hr,
#article-container hr,
.search-dialog hr {
    position: relative;
}

.custom-hr::after,
.container hr::after,
#article-container hr::after,
.search-dialog hr::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    bottom: -16px;
}

.custom-hr::before,
.container hr::before,
#article-container hr::before,
.search-dialog hr::before {
    pointer-events: none !important;
}

/* =========================================================
   补充 28：让「背景图」也走先模糊后清晰
   - <img> 由「补充 25」处理；这里补两类 CSS 背景图：
     ① 文章卡片封面 div.post-bg、② 侧栏头像 .avatar-img > div
        —— 两者内部都没有文字，可以直接整块模糊；
         文章页的 #page-header 也带 post-bg 类，必须排除，否则会把文章标题一起糊掉
     
        原来那层「模糊的同一张图」::after 已删除，详见下面的说明。
   ========================================================= */
/* 卡片封面 / 头像 / 侧栏缩略图等，已统一改由「补充 25」的 .fx-blur 处理
   （它们多半是没有 class 的裸 div + 内联背景图，按 class 挑会漏）。 */

/* 头图（首页大图 / 文章头图）不再做「模糊 → 清晰」。
   
   这里原来用 ::after 叠了一层「同一张图 + 0.3 黑遮罩」并 `filter: blur(18px)`，
   等背景图就绪再加 .bg-ready 淡出，做出「先糊后清」的入场。
   现在整段删掉：头图直接显示为清晰的原背景图（暗色遮罩仍由主题的 ::before 负责）。
    img-fx.js 里的 hero() 也一并删了（它只负责写 --hero-img / 打 .bg-ready），
      别只在一边删 —— 只删 CSS 会留下永远不生效的 JS，只删 JS 会让头图停在模糊层上。 */

/* 把这几个内容层抬到遮罩之上（它们本来就是 absolute，只需补 z-index）。
   头图模糊层虽已删掉，这几条保留：主题的 ::before 遮罩仍在，标题需要压在它上面。 */
html.img-fx #page-header #site-info,
html.img-fx #page-header #post-info,
html.img-fx #page-header #scroll-down {
    z-index: 2;
}

/* =========================================================
   补充 42：脚注（由 scripts/md-extras.js 在渲染后生成）
   marked 不支持脚注，过滤器生成 .footnote-ref（正文上标）/ .footnotes（末尾列表）。
   这里只做最小美化：引用角标用主题蓝、列表比正文略小略淡，回跳箭头不换行。
   ========================================================= */
#article-container .footnote-ref a {
    text-decoration: none;
    color: var(--zx-accent);
    font-weight: 600;
}
#article-container .footnotes {
    font-size: 0.9em;
    color: rgba(0, 0, 0, 0.62);
}
#article-container .footnotes ol {
    padding-left: 1.5em;
}
#article-container .footnotes li {
    margin: 0.4em 0;
}
#article-container .footnote-backref {
    text-decoration: none;
    margin-left: 0.3em;
    color: var(--zx-accent);
}
html[data-theme="dark"] #article-container .footnotes {
    color: rgba(201, 201, 201, 0.75);
}

/* 脚注跳转的落点提示（JS 见 /js/anchor-scroll.js 的 isFootnote / flash）
   ------------------------------------------------------------------
   
   原来落点只做了"避开吸顶导航条"（scroll-padding-top: 72px），于是目标**停在视口最顶上** ——
   文末那片小字里根本认不出跳到了哪一条。现在 JS 把脚注目标改成**垂直居中**，这里补"灰底闪两下"。
     · 用 animation 而不是靠 JS 定时器改样式：结束即自动回到原样，不残留状态、不怕被打断；
     · 跑 2 次 = 闪两下（0.45s × 2 ≈ 0.9s），类名由 JS 在 animationend 后摘掉，连点同一条会重播；
     · 只动 background-color —— 纯重绘，不触发重排，不会把后面的 li 挤动；
     · 一个 keyframes 同时管亮/暗两套主题：用一个**半透明中灰**，叠在白底上偏灰、
       叠在深色底上偏亮，两边都看得见（省掉两套 keyframes 和一次深色覆盖）。
        只动 background-color，不加 outline / 位移，避免跳转时其它元素跟着动。 */
#article-container .footnotes > ol > li.zx-fn-flash {
    border-radius: 4px;
    animation: zx-fn-flash 0.45s ease-in-out 2;
}

/*
   复用同一套 keyframes 闪它自己。落点逻辑在 JS 里保持贴顶不变。 */
#article-container sup[id^='fnref-'].zx-fn-flash {
    border-radius: 4px;
    animation: zx-fn-flash 0.45s ease-in-out 2;
}
@keyframes zx-fn-flash {
    0%,
    100% {
        background-color: rgba(127, 127, 127, 0);
    }
    50% {
        background-color: rgba(127, 127, 127, 0.26);
    }
}

/* =========================================================
   
   - 静止  0 8px 29px -6px rgba(0,0,0,.29)
   - 悬停  0 16px 41px -8px rgba(0,0,0,.41)   ← 夜间 .76 / .85
   
   
     所以 #post / 详情页那块也进 hover（它整片可悬停，加 hover 不会误触）
   - 过渡：主题 glass 规则里有 `transition: box-shadow .3s ease`，这里不重复写
   ========================================================= */
#body-wrap .recent-post-item,
#aside-content .card-widget,
#post,
.layout > div:first-child:not(.recent-posts) {
    box-shadow: 0 8px 29px -6px rgba(0, 0, 0, 0.29) !important;
}

#body-wrap .recent-post-item:hover,
#aside-content .card-widget:hover,
#post:hover,
.layout > div:first-child:not(.recent-posts):hover {
    box-shadow: 0 16px 41px -8px rgba(0, 0, 0, 0.41) !important;
}

html[data-theme="dark"] #body-wrap .recent-post-item,
html[data-theme="dark"] #aside-content .card-widget,
html[data-theme="dark"] #post,
html[data-theme="dark"] .layout > div:first-child:not(.recent-posts) {
    box-shadow: 0 8px 29px -6px rgba(0, 0, 0, 0.76) !important;
}

html[data-theme="dark"] #body-wrap .recent-post-item:hover,
html[data-theme="dark"] #aside-content .card-widget:hover,
html[data-theme="dark"] #post:hover,
html[data-theme="dark"] .layout > div:first-child:not(.recent-posts):hover {
    box-shadow: 0 16px 41px -8px rgba(0, 0, 0, 0.85) !important;
}

/* =========================================================
   
   
     本站是蝴蝶新版，标记是 nav#pagination.pagination-post > a.pagination-related，
     
   - 三件事：
     1) 左右平分：两张卡片 50% / 50%；若只有一张（相邻文章缺失）则独占整行
     2) 悬停时「只有」封面：由暗到明（opacity .4 → .8）+ 平滑放大（scale 1.1）
     3) 去掉主题默认的「悬停时文字上滑、换成文章摘要」的切换
   - 封面底色沿用文章内联的 var(--default-bg-color)（即主题色 #49b1f5），
     它被压在卡片 #000 底上、再乘 0.4 透明度 → 就是那块暗蓝；
     悬停升到 0.8 即「由暗到明」。
   ========================================================= */

/*
#pagination.pagination-post {
    background: #000 !important;
}

/* --- 1) 左右平分 --- */
#pagination.pagination-post .pagination-related {
    flex: 1 1 0 !important;
    width: 50% !important;
    min-width: 0;
}

/* 只有一侧时（相邻文章不存在）独占整行，避免半张空白 */
#pagination.pagination-post .pagination-related:only-child {
    flex: 1 1 100% !important;
    width: 100% !important;
}

/* 窄屏（主题在 768px 以下已改为纵向排列）保持独占整行
   注意：必须用 flex: 0 0 auto。纵向排列时 flex-basis 作用于「高度」，
   
*/
@media (max-width: 768px) {
    #pagination.pagination-post .pagination-related,
    #pagination.pagination-post .pagination-related:only-child {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 150px !important;
    }
}

/*
*/
#pagination.pagination-post .pagination-related .cover {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    /* div.cover（文章没设封面时）走 background，一并给定规整 */
    background-size: cover !important;
    background-position: center !important;
    opacity: 0.4 !important;
    transform: none;
    /* 保留 filter 过渡：本站的图片模糊渐显系统会给 img 加 filter */
    transition: transform 0.6s ease, opacity 0.6s ease, filter 375ms ease-in 0.2s !important;
    will-change: transform, opacity;
}

#pagination.pagination-post .pagination-related:hover .cover {
    opacity: 0.8 !important;
    transform: scale(1.1) !important;
}

/* --- 3) 只要图片效果：文字保持不动，去掉「换成摘要」的切换 --- */
#pagination.pagination-post .pagination-related .info-2 {
    display: none !important;
}

#pagination.pagination-post .pagination-related .info-1,
#pagination.pagination-post .pagination-related:not(.no-desc):hover .info-1 {
    opacity: 1 !important;
    transform: translate(0, -50%) !important;
}


/* =========================================================
   补充 54：分类/标签/归档列表封面悬停放大
   - 主题只给了「悬停缩略图本身」的放大（.imgHover extend 到
     .article-sort-item-img :first-child），但缩略图只有 100x70，
     鼠标悬在整行上没反应，观感与首页「悬停整卡放大」不一致。
   - 这里补「悬停整行 -> 封面放大」。
   - 关键：这些 img 带 .fx-blur（补充 25），其 html.img-fx .fx-blur 的
     transition(0,2,1) 会顶掉主题 .imgHover 的 transition(0,2,0)，
     transform 过渡被吃掉 -> 缩放瞬间跳变没动画。这里用 (0,3,0) 的
     更高优先级把 transition 补全（保留 fx 的 filter/opacity，追加 transform）。
   ========================================================= */
.article-sort-item .article-sort-item-img :first-child {
    transition: filter .8s ease, opacity .8s ease, transform .6s;
}
.article-sort-item:hover .article-sort-item-img :first-child {
    transform: scale(1.1);
}