/* ========================================
   图片懒加载样式 - 高光扫过效果
   适用于所有页面的图片和图标
   ======================================== */

/* 确保容器有相对定位 */
.site-card,
.ranking-item,
.mobile-ranking-item,
.article-thumb,
.article-card,
.content-banner-card,
.partner-item,
.top-site-card {
    position: relative;
}

/* 图片基础样式 */
img.site-icon,
img.ranking-icon,
img.mobile-ranking-icon,
.article-thumb img,
img.partner-banner-img,
.content-banner-card img {
    background: #f0f0f0;
    transition: opacity 0.3s ease;
    display: block;
}

/* 未加载状态 - 半透明并显示背景色 */
img.site-icon:not(.loaded),
img.ranking-icon:not(.loaded),
img.mobile-ranking-icon:not(.loaded),
.article-thumb img:not(.loaded),
img.partner-banner-img:not(.loaded),
.content-banner-card img:not(.loaded) {
    opacity: 0.5;
    background: linear-gradient(90deg, #e8e8e8 0%, #f5f5f5 50%, #e8e8e8 100%);
}

/* 加载完成状态 */
img.site-icon.loaded,
img.ranking-icon.loaded,
img.mobile-ranking-icon.loaded,
.article-thumb img.loaded,
img.partner-banner-img.loaded,
.content-banner-card img.loaded {
    opacity: 1;
}

/* 高光扫过动画 - 在图片上方覆盖一层 */
img.site-icon:not(.loaded)::before,
img.ranking-icon:not(.loaded)::before,
img.mobile-ranking-icon:not(.loaded)::before,
.article-thumb img:not(.loaded)::before,
img.partner-banner-img:not(.loaded)::before,
.content-banner-card img:not(.loaded)::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: shimmer 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
}

/* 高光扫过动画关键帧 */
@keyframes shimmer {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

/* 文章缩略图特殊处理 */
.article-thumb {
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
    border-radius: 8px;
}

.article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 站点图标容器需要overflow hidden才能看到动画 */
.site-card,
.ranking-item,
.mobile-ranking-item {
    overflow: hidden;
}

img.site-icon,
img.ranking-icon,
img.mobile-ranking-icon {
    border-radius: 8px;
    position: relative;
}

/* 优化性能：减少重绘 */
img.site-icon,
img.ranking-icon,
img.mobile-ranking-icon,
.article-thumb img,
img.partner-banner-img {
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 禁用动画的媒体查询（尊重用户偏好） */
@media (prefers-reduced-motion: reduce) {

    img.site-icon:not(.loaded)::before,
    img.ranking-icon:not(.loaded)::before,
    img.mobile-ranking-icon:not(.loaded)::before,
    .article-thumb img:not(.loaded)::before,
    img.partner-banner-img:not(.loaded)::before,
    .content-banner-card img:not(.loaded)::before {
        animation: none !important;
    }
}

/* 移动端优化 - 减慢动画速度 */
@media (max-width: 768px) {

    img.site-icon:not(.loaded)::before,
    img.ranking-icon:not(.loaded)::before,
    img.mobile-ranking-icon:not(.loaded)::before,
    .article-thumb img:not(.loaded)::before,
    img.partner-banner-img:not(.loaded)::before,
    .content-banner-card img:not(.loaded)::before {
        animation-duration: 2.5s;
    }
}