/**
 * 图片懒加载样式
 */

/* 懒加载图片基础样式 - 完全透明，无背景 */
.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease;
    /* 移除背景色，避免显示占位符效果 */
}

/* 加载中状态 - 保持透明 */
.lazy-image.lazy-loading,
.lazy-image.loading {
    opacity: 0;
}

/* 加载完成状态 - 显示从下到上动画 */
.lazy-image.loaded {
    opacity: 1;
    background: none;
}

/* 加载错误状态 */
.lazy-image.error {
    opacity: 0.8;
    background: #161b22;
}

/* 扩展卡片中的懒加载图片 */
.extension-card .lazy-image {
    border-radius: 8px;
}

/* 详情页中的懒加载图片 */
.plugin-icon .lazy-image {
    border-radius: 12px;
}

/* 相关推荐中的懒加载图片 */
.related-sidebar-item .lazy-image {
    border-radius: 8px;
}

/* 截图网格中的懒加载图片 */
.screenshots-grid .lazy-image {
    border-radius: 8px;
    background-color: #0d1117;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .lazy-image {
        transition: opacity 0.2s ease;
    }
}

/* 恢复从下到上的动画效果 */
@media (prefers-reduced-motion: no-preference) {
    .lazy-image.loaded {
        animation: fadeInUp 0.4s ease;
    }
}

/* 从下到上的移动动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 减少动画的用户偏好 */
@media (prefers-reduced-motion: reduce) {
    .lazy-image,
    .lazy-image.loaded {
        animation: none;
        transition: opacity 0.1s ease;
    }
}