.simple-media-optimization-loading {
    display: inline-block;
    position: relative;
    overflow: hidden;
    background-color: #e0e0e0; /* Light grey background */
    /* Ensure dimensions are applied even before loading */
    min-width: 50px; /* Example minimum width */
    min-height: 50px; /* Example minimum height */
    animation: simple-media-optimization-pulse 1.5s infinite ease-in-out;
}

/* The ::before pseudo-element is no longer needed for the pulse animation */

/* The actual image inside the picture element, initially hidden */
.simple-media-optimization-loading img {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* When the image is loaded, hide the skeleton and show the image */
.simple-media-optimization-loaded {
    background-color: transparent; /* Remove skeleton background */
}

/* The ::before pseudo-element is no longer used */

.simple-media-optimization-loaded img {
    opacity: 1; /* Fade in the loaded image */
}

@keyframes simple-media-optimization-pulse {
    0% {
        background-color: #e0e0e0; /* Start color */
    }
    50% {
        background-color: #d0d0d0; /* Mid color - slightly darker/different */
    }
    100% {
        background-color: #e0e0e0; /* End color - back to start */
    }
}