/* CyberForge Arcade — Lazy thumbnail visuals
 *
 * Companion styles for lazyThumbnails.js. The script swaps an image's
 * data-src into src when it's near the viewport; this file gives the
 * not-yet-loaded image a subtle shimmer placeholder and the loaded
 * image a soft fade-in so cards never pop in jarringly.
 */

/* Reserve space and show a shimmer until the real image is requested. */
.game-thumbnail.lazy-pending,
.sponsored-card-thumb img.lazy-pending {
    opacity: 0;
    /* Layered linear gradient gives a moving shimmer effect on the
       placeholder background while we wait. Honors the active theme via
       --glow-color-* fallbacks. */
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.10) 35%,
            rgba(255, 255, 255, 0.04) 70%
        ),
        rgba(0, 0, 0, 0.55);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: lazy-thumb-shimmer 1.6s ease-in-out infinite;
}

.game-thumbnail.lazy-loaded,
.sponsored-card-thumb img.lazy-loaded {
    opacity: 1;
    transition: opacity 0.35s ease;
    animation: none;
    background: none;
}

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

/* Reduced motion: no shimmer animation, just a static low-contrast bg. */
@media (prefers-reduced-motion: reduce) {
    .game-thumbnail.lazy-pending,
    .sponsored-card-thumb img.lazy-pending {
        animation: none;
    }
}