/**
 * 懒加载相关样式
 */

/* 懒加载占位符样式 */
.lazy:not(.loaded) {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: #f0f0f0;
}

/* 图片加载完成后的动画效果 */
.lazy.loaded, .lazy.lazy-loaded {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* 加载中的占位样式 */
.lazy.loading {
    background-image: url('/static/images/loading.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}

/* 图片加载出错样式 */
.lazy.error {
    background-image: url('/static/images/error.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 为图片容器提供明确尺寸，避免布局偏移 */
.book-cover-container {
    position: relative;
    overflow: hidden;
}

/* 确保模态框中的懒加载图片立即加载 */
.modal .lazy:not(.loaded) {
    opacity: 1;
    background-color: transparent;
}