/**
 * 延迟加载图片样式
 */

/* 基础样式 */
.lazy-load {
    transition: opacity 0.3s ease-in-out;
}

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

/* 已加载状态 */
.lazy-loaded {
    opacity: 1;
}

/* 加载错误状态 - 保持隐藏 */
.lazy-error {
    opacity: 0;
    display: none;
}

/* 占位图片样式 - 简化版本 */
.lazy-load[src*="data:image/svg+xml"] {
    background-color: transparent;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}


/* 淡入效果 */
.lazy-fade-in {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy-fade-in.lazy-loaded {
    opacity: 1;
}

/* 滑入效果 */
.lazy-slide-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
}

.lazy-slide-in.lazy-loaded {
    opacity: 1;
    transform: translateY(0);
}

/* 缩放效果 */
.lazy-scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease-in-out;
}

.lazy-scale-in.lazy-loaded {
    opacity: 1;
    transform: scale(1);
}

/* 模糊效果 */
.lazy-blur-in {
    filter: blur(5px);
    transition: filter 0.3s ease-in-out;
}

.lazy-blur-in.lazy-loaded {
    filter: blur(0);
}

/* 禁用加载动画的样式 */
.lazy-no-animation.lazy-loading {
    opacity: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .lazy-loading {
        opacity: 0;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .lazy-loading {
        opacity: 0;
    }
    
    .lazy-error {
        opacity: 0;
        display: none;
    }
}

/* 减少动画的设置 */
@media (prefers-reduced-motion: reduce) {
    .lazy-load,
    .lazy-fade-in,
    .lazy-slide-in,
    .lazy-scale-in,
    .lazy-blur-in {
        transition: none;
    }
    
    .lazy-loading {
        opacity: 0;
    }
    
    .lazy-load[src*="data:image/svg+xml"] {
        transition: none;
    }
}

/* 深色主题支持 */
@media (prefers-color-scheme: dark) {
    .lazy-load[src*="data:image/svg+xml"] {
        background-color: transparent;
    }
    
    .lazy-loading {
        opacity: 0;
    }
}

/* 打印样式 */
@media print {
    .lazy-loading {
        opacity: 0;
    }
    
    .lazy-load[src*="data:image/svg+xml"] {
        background: transparent;
        opacity: 0;
    }
}

/* 工具提示样式 */
.lazy-tooltip {
    position: relative;
    display: inline-block;
}

.lazy-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 1000;
}

.lazy-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    margin-bottom: -5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 1000;
}

.lazy-tooltip:hover::after,
.lazy-tooltip:hover::before {
    opacity: 1;
}

/* 调试模式样式 */
.lazy-debug .lazy-load {
    border: 2px dashed #ff6b6b;
}

.lazy-debug .lazy-loading {
    border-color: #feca57;
}

.lazy-debug .lazy-loaded {
    border-color: #48dbfb;
}

.lazy-debug .lazy-error {
    border-color: #ff3838;
}