/* =========================================================================
   V8Club - Skeleton / fade-in for images
   作用：图片加载前显示微弱的扫光占位（不会跳，因为图都有 width/height），
        加载完成后 0.45s 淡入。
   零依赖、纯 CSS、自动工作（无需修改 <img> 标签）。

   升级用法：如需在特定图上启用扫光效果，给 <img> 加 data-skeleton 即可。
   示例：<img src="..." data-skeleton ...>
   ========================================================================= */

@keyframes v8-skeleton-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes v8-fade-in {
    from { opacity: 0; transform: scale(1.01); }
    to   { opacity: 1; transform: scale(1); }
}

/* 1. 全局兜底：所有 <img> 加载完成后淡入（无副作用） */
img {
    transition: opacity .25s ease;
}

/* 2. 可选：给标记了 data-skeleton 的图片开启扫光（自动由浏览器加载状态控制） */
img[data-skeleton] {
    background-color: #eef0f4;
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0)   0%,
        rgba(255, 255, 255, .55) 50%,
        rgba(255, 255, 255, 0)  100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: v8-skeleton-shimmer 1.4s ease-in-out infinite;
}

/* 3. 加载完成后：去掉扫光、淡入显示 */
img[data-skeleton].is-loaded,
img.is-loaded {
    animation: v8-fade-in .45s ease-out both;
    background-image: none;
    background-color: transparent;
}

/* 4. 尊重用户偏好：开启"减少动效"则关掉扫光和淡入 */
@media (prefers-reduced-motion: reduce) {
    img[data-skeleton] { animation: none; }
    img.is-loaded       { animation: none; }
    img                 { transition: none; }
}