/* 图片懒加载占位：滚动进入视口前显示站点紫加载环，加载完成后淡入 */

img[loading="lazy"] {
    background-color: rgba(118, 18, 250, 0.07);
    background-position: center;
    background-repeat: no-repeat;
}

img[loading="lazy"].img-lazy--pending {
    /* 站点紫 #7612fa 加载环（内联 SVG + SMIL 旋转，无需额外图片请求） */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='none' stroke='%237612fa' stroke-opacity='0.18' stroke-width='4'/%3E%3Cpath d='M44 24a20 20 0 0 1-20 20' fill='none' stroke='%237612fa' stroke-width='4' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 24 24' to='360 24 24' dur='0.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-size: 28px 28px;
    /* 底色呼吸动画：即使 SVG 动效被浏览器忽略，占位区依然有明显加载感 */
    animation: img-lazy-pulse 1.6s ease-in-out infinite;
    /* 占位阶段图片本身还没有内容，恢复满不透明度，避免首页 Bento 图的 opacity-40 把加载环一起压暗 */
    opacity: 1;
}

/* 未预留高度的图片（正文富文本图、h-auto 图）先撑出占位区，否则加载动画不可见 */
img[loading="lazy"].img-lazy--pending.img-lazy--flat {
    min-height: 160px;
}

img[loading="lazy"].img-lazy--loaded {
    background-image: none;
    background-color: transparent;
    animation: img-lazy-fade .35s ease;
}

/* 用 filter 而不是 opacity 做淡入，避免首页 Bento 图这类自带 opacity 的图片淡入后跳变 */
@keyframes img-lazy-fade {
    from { filter: opacity(0); }
    to { filter: opacity(1); }
}

@keyframes img-lazy-pulse {
    0%, 100% { background-color: rgba(118, 18, 250, 0.07); }
    50% { background-color: rgba(118, 18, 250, 0.18); }
}

/* ---------- Swiper 轮播懒加载（Swiper 8 Lazy 模块） ---------- */

/* 未加载的轮播图先透明，避免空白闪屏；加载完成后淡入 */
.swiper-lazy {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.swiper-lazy.swiper-lazy-loaded {
    opacity: 1;
}

/* 轮播自带的加载环改成站点紫，并在图片加载完成后隐藏（Swiper 官方默认会一直转） */
.swiper-lazy-preloader {
    --swiper-preloader-color: #7612fa;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #b98cff;
}

img.swiper-lazy-loaded + .swiper-lazy-preloader {
    opacity: 0;
}