/* ===========================
   Image Optimization Styles
   =========================== */

/* Placeholder для изображений до загрузки */
img[data-src] {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #f8f8f8 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    min-height: 100px;
}

/* Плавное появление после загрузки */
img.loaded {
    animation: fadeIn 0.3s ease-in;
}

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

/* WebP support detection */
.no-webp img[data-webp] {
    content: url(attr(data-fallback));
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Aspect ratio boxes для предотвращения layout shift */
.aspect-ratio-box {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
}

.aspect-ratio-box--16-9 {
    padding-bottom: 56.25%;
}

.aspect-ratio-box--4-3 {
    padding-bottom: 75%;
}

.aspect-ratio-box--1-1 {
    padding-bottom: 100%;
}

.aspect-ratio-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}