/* ── Lazy Loading & Image Optimization ───────────────────────────────────── */

/* Blur-up effect podczas ładowania */
.img-lazy {
    background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%);
    transition: opacity 0.3s ease;
}

.img-lazy[src*="placehold"] {
    opacity: 0.5;
}

/* Picture tag dla WebP */
picture {
    display: block;
    width: 100%;
    height: 100%;
}

picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Loading state */
@keyframes shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

.card-thumb.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.05) 50%,
        rgba(255,255,255,0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}