/* Image Optimization Styles */

/* Lazy loading placeholder */
img[loading="lazy"] {
    background-color: #f0f0f0;
    min-height: 100px;
}

/* Blur-up effect for lazy loading */
img[loading="lazy"][data-src] {
    filter: blur(5px);
    transition: filter 0.3s;
}

img[loading="lazy"][data-src].loaded {
    filter: blur(0);
}

/* Background image lazy loading */
.bg-layer[data-bg] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-layer[data-bg].loading {
    background-image: none !important;
    background-color: #f0f0f0;
}

/* Fade in animation for loaded images */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

img.loaded,
.bg-layer[data-bg].loaded {
    animation: fadeIn 0.5s ease-in;
}

/* Responsive image container */
.image-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 40.36%; /* 1100x444 aspect ratio */
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Prevent layout shift */
img {
    width: 100%;
    height: auto;
    display: block;
}

/* Slider background optimization */
.banner-carousel .swiper-slide .bg-layer {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Intersection Observer fallback */
.no-js img[loading="lazy"],
.no-js .bg-layer[data-bg] {
    display: none;
}