/* ════════════════════════════════════════════════════════
   Lazy Loading — плавная загрузка изображений
   ════════════════════════════════════════════════════════ */

/* Базовый стиль для всех изображений */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Placeholder во время загрузки */
img[loading="lazy"] {
    background: oklch(94% 0.008 70);
    transition: opacity 0.3s ease-in-out;
}

/* Blur placeholder эффект (опционально) */
img[loading="lazy"]:not([src]) {
    opacity: 0;
}

img[loading="lazy"][src] {
    opacity: 1;
}

/* Picture контейнер */
picture {
    display: block;
    line-height: 0;
}

picture img {
    width: 100%;
    height: auto;
}

/* Aspect ratio контейнеры для избежания layout shift */
.img-wrapper {
    position: relative;
    overflow: hidden;
    background: oklch(94% 0.008 70);
}

.img-wrapper::before {
    content: '';
    display: block;
    padding-bottom: 100%; /* Квадрат по умолчанию, переопределяется через --aspect */
}

.img-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Предустановленные соотношения */
.img-wrapper--16x9::before  { padding-bottom: 56.25%; }
.img-wrapper--4x3::before   { padding-bottom: 75%; }
.img-wrapper--3x2::before   { padding-bottom: 66.67%; }
.img-wrapper--1x1::before   { padding-bottom: 100%; }
.img-wrapper--portrait::before { padding-bottom: 133.33%; }

/* Skeleton loader (пока изображение грузится) */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.img-skeleton {
    background: linear-gradient(
        90deg,
        oklch(94% 0.008 70) 0%,
        oklch(96% 0.008 70) 50%,
        oklch(94% 0.008 70) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

img[loading="lazy"]:not([complete]) {
    background: linear-gradient(
        90deg,
        oklch(94% 0.008 70) 0%,
        oklch(96% 0.008 70) 50%,
        oklch(94% 0.008 70) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Fade-in после загрузки */
img.loaded {
    animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ════════════════════════════════════════════════════════
   Пример использования в HTML:
   ════════════════════════════════════════════════════════
   
   <div class="img-wrapper img-wrapper--4x3">
       <?= renderImage('/assets/images/product.jpg', 'Товар', ['width' => 800, 'height' => 600]) ?>
   </div>
   
   ════════════════════════════════════════════════════════ */