/**
 * 🖼️ KAMPYERI LAZY LOADING STYLES
 * Performance optimized styles for lazy loading images
 */

/* Base lazy loading styles */
.lazy-load {
    background: #f3f4f6;
    transition: opacity 0.3s ease;
    min-height: 200px;
    display: block;
    width: 100%;
}

.lazy-load:not(.loaded) {
    opacity: 0.7;
}

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

.lazy-load.error {
    background-image: url('/images/default-camp-area.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Placeholder animation */
.lazy-load:not(.loaded)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1.5s infinite;
}

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

/* Responsive optimizations */
@media (max-width: 768px) {
    .lazy-load {
        min-height: 150px;
    }
}

/* Reduce layout shifts */
img[loading="lazy"] {
    aspect-ratio: attr(width) / attr(height);
}

/* Performance hint for browsers */
img[loading="lazy"] {
    content-visibility: auto;
    contain-intrinsic-size: 400px 300px;
}