/* ============================================================
   lazysizes 懒加载样式
   占位符 + 渐入效果 + 加载失败处理
   ============================================================ */

/* 懒加载图片初始状态：灰色占位 */
img.lazyload {
    background: #f0f0f0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* 加载中状态 */
img.lazyloading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: lazy-shimmer 1.5s infinite;
    opacity: 1;
}

/* 加载完成：渐入 */
img.lazyloaded {
    opacity: 1;
    background: none;
    animation: none;
}

/* 骨架屏闪烁动画 */
@keyframes lazy-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 图片容器内的懒加载图保持比例 */
.img img.lazyload,
.species-card .img img.lazyload,
.food-card .img img.lazyload {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 禁用懒加载的图片（首屏关键图） */
img.no-lazy {
    opacity: 1 !important;
    background: none !important;
}