/* 模块「文章美化」静态样式
 *
 * 所有规则都以 <body> 上的功能类为前提（mlyb-artlogo-on / mlyb-fb-on），
 * 关掉某个组件时对应的类不挂，这些规则完全不生效 —— 所以这里不需要再判断开关。
 *
 * 尺寸 / 底色 / 图片 / 时长等可变值由 module.php 以 :root CSS 变量内联注入，
 * 本文件只保留结构，便于浏览器缓存（改设置不需要用户重新下载这个文件）。
 */

/* ===== 文章卡片悬停 LOGO =====
 * 复用子比 .item-thumbnail 的两个伪元素：::before 半透明遮罩、::after 居中 LOGO。
 * 子比自身的悬停放缩（main.css:194 的 .posts-item:hover .item-thumbnail img）只作用于 <img>，
 * 我们动的是 img 的父容器伪元素，两者不冲突 —— 所以悬停时图片放缩 + 遮罩淡入可以同时发生。
 */
body.mlyb-artlogo-on .item-thumbnail {
    position: relative;
}

body.mlyb-artlogo-on .item-thumbnail::before {
    content: '';
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--mlyb-artlogo-bg, #000000) 45%, transparent);
    opacity: 0;
    z-index: 2;
    transition: opacity var(--mlyb-artlogo-speed, 0.4s);
    pointer-events: none;
}

body.mlyb-artlogo-on .item-thumbnail::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--mlyb-artlogo-size, 35%);
    height: var(--mlyb-artlogo-size, 35%);
    transform: translate(-50%, -50%) scale(1.15);
    background: var(--mlyb-artlogo-img, none) center / contain no-repeat;
    opacity: 0;
    z-index: 3;
    transition: opacity var(--mlyb-artlogo-speed, 0.4s),
                transform var(--mlyb-artlogo-speed, 0.4s);
    pointer-events: none;
}

body.mlyb-artlogo-on .item-thumbnail:hover::before {
    opacity: 1;
}

body.mlyb-artlogo-on .item-thumbnail:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--mlyb-artlogo-scale, 1));
}

/* 尊重系统「减少动态效果」偏好：去掉过渡，但保留静态样式 */
@media (prefers-reduced-motion: reduce) {
    body.mlyb-artlogo-on .item-thumbnail::before,
    body.mlyb-artlogo-on .item-thumbnail::after {
        transition: none;
    }
}

/* ===== 文章尾部横条 =====
 * 挂在 zib_article_content_after（版权声明之前，见 module.php 头部说明）。
 * 三条背景图沿用灵溪原版（紫 / 橙 / 绿），已转 webp，路径经 :root CSS 变量注入。
 *
 * 与原版的一处差异：用 cover 铺满，不用原版的重复平铺。
 * 原版第 1 条没写 background-size、第 2/3 条写 auto 100%，两种都会横向重复；
 * 这三张是带波浪形状的渐变图、不是无缝贴图，宽度超过 400px 就会露接缝。
 * cover 等比铺满裁切，不重复、无接缝，渐变被拉伸也看不出来。
 *
 * 圆角跟随子比的 --main-radius，与站内卡片保持一致。
 */
body.mlyb-fb-on .mlyb-fb-item {
    margin-top: 10px;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: var(--main-radius, 8px);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body.mlyb-fb-on .mlyb-fb-1 { background-image: var(--mlyb-fb-img1, none); }
body.mlyb-fb-on .mlyb-fb-2 { background-image: var(--mlyb-fb-img2, none); }
body.mlyb-fb-on .mlyb-fb-3 { background-image: var(--mlyb-fb-img3, none); }

/* 窄屏下横条文字普遍放不下，缩到 13px 并把左右内边距收紧 */
@media screen and (max-width: 640px) {
    body.mlyb-fb-on .mlyb-fb-item {
        font-size: 13px;
        padding: 0 8px;
    }
}