/* =====================================================
   Lazy Loading de Imagens - ClubeMix
   =====================================================
   Descrição: Estilos para imagens com lazy loading
   Data: 2025-11-09
   ===================================================== */

/* Imagem Lazy */
img.lazy {
    opacity: 0;
    transition: opacity 0.3s;
    background: rgba(30, 30, 30, 0.5);
    min-height: 200px;
}

img.lazy.loaded {
    opacity: 1;
}

/* Placeholder enquanto carrega */
img.lazy::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 215, 0, 0.1) 0%,
        rgba(255, 215, 0, 0.2) 50%,
        rgba(255, 215, 0, 0.1) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

img.lazy.loaded::before {
    display: none;
}

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

/* Container de Imagem */
.image-container {
    position: relative;
    overflow: hidden;
    background: rgba(30, 30, 30, 0.5);
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Background Lazy */
[data-bg-image] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.3s;
}

[data-bg-image]:not(.bg-loaded) {
    opacity: 0;
}

[data-bg-image].bg-loaded {
    opacity: 1;
}