/* ============================================
   Lazy Loading Image Optimization
   Thumbnail Box: <li class="godx-box vblock">
   ============================================ */

/* Base image lazy loading styles */
.godx-box img[loading="lazy"] {
    opacity: 1;
    width: 100%;
    height: auto;
}

.godx-box img[loading="lazy"].loaded {
    opacity: 1;
}

/* Skeleton shimmer animation while loading */
.godx-box img[loading="lazy"]:not(.loaded) {
    background: linear-gradient(
        110deg,
        rgba(26, 26, 26, 0.9) 0%,
        rgba(0, 255, 153, 0.15) 25%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(0, 255, 153, 0.15) 75%,
        rgba(26, 26, 26, 0.9) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2.5s ease-in-out infinite;
    position: relative;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Pulse breathing effect while loading */
.godx-box img[loading="lazy"]:not(.loaded) {
    animation: shimmer 2.5s ease-in-out infinite, pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
}

/* Prevent layout shift */
.godx-box img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

/* Thumbnail box link wrapper */
.godx-box a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    width: 100%;
}