/* Lazy loading helpers for heavy media (images & backgrounds).
   Dizaynni o‘zgartirmasdan faqat yuklanish bosqichini boshqaradi. */

/* Skeleton shimmer animatsiyasi (hammasiga umumiy) */
@keyframes lazyShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Background-lar uchun (hero, breadcrumb va h.k.) */
.lazy-bg {
    /* Mavjud dizayn foniga mos quyuq fallback */
    background-color: #0f172a;
    /* Skeleton preview – yumshoq gradient */
    background-image: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0.08) 0%,
        rgba(148, 163, 184, 0.22) 20%,
        rgba(148, 163, 184, 0.08) 40%,
        rgba(148, 163, 184, 0.08) 100%
    );

    animation: lazyShimmer 1.4s linear infinite;
}

.lazy-bg.lazy-bg--loaded {
    /* JS real background-image ni qo‘yganidan so‘ng skeletonni o‘chirib yuboramiz */
    animation: none;
    background-color: transparent;
    transition: background-image 0.4s ease-out, background-color 0.4s ease-out;
}

/* Rasmlar uchun skeleton + fade-in */
img[data-lazy-img] {
    opacity: 0;
    /* Skeleton preview rangi – dizaynga mos kulrang gradient */
    background-image: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0.10) 0%,
        rgba(148, 163, 184, 0.24) 20%,
        rgba(148, 163, 184, 0.10) 40%,
        rgba(148, 163, 184, 0.10) 100%
    );
    background-size: 200% 100%;
    animation: lazyShimmer 1.4s linear infinite;
    transition: opacity 0.4s ease-out;
}

img[data-lazy-img].lazy-img--loaded {
    opacity: 1;
    animation: none;
    background-image: none;
}