/* C:\xampp\htdocs\killiman\public\css\lazy-load.css */

/* ============================================ */
/* LAZY LOADING - STYLES DE BASE */
/* ============================================ */

/* Placeholder pour les images en chargement */
img.lazy {
    background: #0a0a1a;
    min-height: 100px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

img.lazy.loaded {
    opacity: 1;
}

img.lazy.error {
    opacity: 1;
    background: rgba(255,107,107,0.1);
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6b6b;
    font-size: 12px;
}

/* Placeholder pour les vidéos */
video.lazy {
    background: #0a0a1a;
    min-height: 200px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

video.lazy.loaded {
    opacity: 1;
}

video.lazy.ready {
    opacity: 1;
}

/* Placeholder pour les backgrounds */
.lazy-bg {
    background-color: #0a0a1a;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.6s ease;
}

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

/* ============================================ */
/* ANIMATION DE CHARGEMENT */
/* ============================================ */

.lazy-placeholder {
    position: relative;
    overflow: hidden;
    background: #1a1a2e;
}

.lazy-placeholder::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* ============================================ */
/* PROGRESS BAR DE CHARGEMENT (optionnel) */
/* ============================================ */

.lazy-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #6B2D8B, #C084E8, #4ABCCC);
    z-index: 9999;
    width: 0%;
    transition: width 0.3s ease;
}