/**
 * Advanced Image Optimizer - Public Styles
 */

/* Lazy Loading Transitions */
.aio-lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.aio-lazy.aio-loaded {
    opacity: 1;
}

/* Ensure proper sizing */
img[width][height] {
    height: auto;
    max-width: 100%;
}

/* Picture element images */
picture img {
    width: 100%;
    height: auto;
}

/* Prevent CLS with aspect ratio */
img {
    max-width: 100%;
    height: auto;
}

/* Skeleton loader placeholder */
.aio-lazy:not(.aio-loaded) {
    background: #f0f0f1;
}

/* Smooth background loading */
.aio-lazy-bg {
    transition: background-image 0.3s ease-in-out;
}

.aio-lazy-bg.aio-bg-loaded {
    /* Background image applied via JS */
}