**
 * 通用懒加载样式
 * 支持普通图片和背景图片的懒加载
 */

/* 懒加载图片基础样式 */
img[data-src] {
    background-color: #f5f5f5;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIHN0cm9rZT0iI2RkZCIgc3Ryb2tlLXdpZHRoPSI0Ii8+CjxwYXRoIGQ9Ik0yMCAxMkMyMCAxMS40NDc3IDIwLjQ0NzcgMTEgMjEgMTFIMjlDMjkuNTUyMyAxMSAzMCAxMS40NDc3IDMwIDEyVjI4QzMwIDI4LjU1MjMgMjkuNTUyMyAyOSAyOSAyOUgyMUMyMC40NDc3IDI5IDIwIDI4LjU1MjMgMjAgMjhWMTJaIiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMiIvPgo8Y2lyY2xlIGN4PSIyNCIgY3k9IjE2IiByPSIyIiBmaWxsPSIjY2NjIi8+CjxwYXRoIGQ9Ik0yMCAyNEwyMyAyMUwyNiAyNEwyOSAyMSIgc3Ryb2tlPSIjY2NjIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    transition: opacity 0.3s ease-in-out;
}

/* 背景图片懒加载 */
.lazy-bg {
    background-color: #f5f5f5;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIHN0cm9rZT0iI2RkZCIgc3Ryb2tlLXdpZHRoPSI0Ii8+CjxwYXRoIGQ9Ik0yMCAxMkMyMCAxMS40NDc3IDIwLjQ0NzcgMTEgMjEgMTFIMjlDMjkuNTUyMyAxMSAzMCAxMS40NDc3IDMwIDEyVjI4QzMwIDI4LjU1MjMgMjkuNTUyMyAyOSAyOSAyOUgyMUMyMC40NDc3IDI5IDIwIDI4LjU1MjMgMjAgMjhWMTJaIiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMiIvPgo8Y2lyY2xlIGN4PSIyNCIgY3k9IjE2IiByPSIyIiBmaWxsPSIjY2NjIi8+CjxwYXRoIGQ9Ik0yMCAyNEwyMyAyMUwyNiAyNEwyOSAyMSIgc3Ryb2tlPSIjY2NjIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
    transition: background-image 0.3s ease-in-out;
}

/* 小图片特殊处理 */
img[data-src].lazy-small {
    background-size: 16px 16px;
}

/* 中等图片占位图标 */
img[data-src].lazy-medium {
    background-size: 24px 24px;
}

/* 加载完成状态 */
img[data-src].lazy-loaded {
    background-image: none;
    background-color: transparent;
}

.lazy-bg.lazy-loaded {
    background-color: transparent;
}

/* 加载中动画 */
.lazy-loading {
    position: relative;
    overflow: hidden;
}

.lazy-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: loading-shimmer 1.5s infinite;
    z-index: 1;
}

@keyframes loading-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* 加载错误状态 */
.lazy-error {
    background-color: #f8f8f8;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIHN0cm9rZT0iI2ZmNjY2NiIgc3Ryb2tlLXdpZHRoPSI0Ii8+CjxwYXRoIGQ9Ik0xNSAxNUwyNSAyNU0yNSAxNUwxNSAyNSIgc3Ryb2tlPSIjZmY2NjY2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
}

/* 只对没有明确尺寸的图片设置最小占位 */
img[data-src]:not([width]):not([height]):not([style*="width"]):not([style*="height"]) {
    min-height: 40px;
    min-width: 40px;
}

/* 有明确尺寸的图片保持原有尺寸，不设置最小值 */
img[data-src][width],
img[data-src][height],
img[data-src][style*="width"],
img[data-src][style*="height"] {
    min-height: auto;
    min-width: auto;
}

/* 响应式优化 */
@media (max-width: 768px) {
    img[data-src] {
        background-size: 16px 16px;
    }
    
    img[data-src].lazy-small {
        background-size: 12px 12px;
    }
    
    img[data-src].lazy-medium {
        background-size: 20px 20px;
    }
    
    .lazy-bg {
        background-size: 30px 30px;
    }
}

/* 无JavaScript降级样式 */
.no-js img[data-src] {
    background-image: none;
    background-color: transparent;
}

.no-js .lazy-bg {
    background-image: none;
    background-color: transparent;
}

/* 打印样式 */
@media print {
    img[data-src] {
        background-image: none !important;
        background-color: transparent !important;
    }
    
    .lazy-bg {
        background-image: none !important;
        background-color: transparent !important;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    img[data-src] {
        background-color: #000;
        color: #fff;
    }
    
    .lazy-bg {
        background-color: #000;
    }
    
    .lazy-error {
        background-color: #000;
        border: 2px solid #fff;
    }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
    img[data-src],
    .lazy-bg,
    .lazy-loading::before {
        transition: none !important;
        animation: none !important;
    }
}