/* Lazy Loading Styles for Xantolo Website */

/* Base styles for lazy images */
.lazy-image {
    opacity: 0.3;
    transition: opacity 0.3s ease-in-out;
    background-color: #f5f5f5;
    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                      linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                      linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    animation: placeholderShimmer 1.5s linear infinite;
}

.lazy-image.lazy-loaded {
    opacity: 1;
    background: none;
    animation: none;
}

.lazy-image.lazy-error {
    opacity: 0.5;
    background-color: #ffebee;
    background-image: none;
    animation: none;
}

/* Shimmer animation for placeholders */
@keyframes placeholderShimmer {
    0% {
        background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    }
    100% {
        background-position: 20px 20px, 20px 30px, 30px 10px, 10px 20px;
    }
}

/* Background image lazy loading */
[data-bg] {
    background-color: #f5f5f5;
    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                      linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                      linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    animation: placeholderShimmer 1.5s linear infinite;
    transition: all 0.3s ease-in-out;
}

[data-bg].bg-loaded {
    animation: none;
}

[data-bg].bg-error {
    background-color: #ffebee;
    background-image: none;
    animation: none;
}

/* Content animation classes */
.lazy-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.lazy-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays for multiple elements */
.lazy-animate:nth-child(1) { transition-delay: 0.1s; }
.lazy-animate:nth-child(2) { transition-delay: 0.2s; }
.lazy-animate:nth-child(3) { transition-delay: 0.3s; }
.lazy-animate:nth-child(4) { transition-delay: 0.4s; }
.lazy-animate:nth-child(5) { transition-delay: 0.5s; }
.lazy-animate:nth-child(6) { transition-delay: 0.6s; }

/* Special handling for destination cards */
.destination-card.lazy-animate {
    transform: translateY(30px) scale(0.95);
}

.destination-card.lazy-animate.animate-in {
    transform: translateY(0) scale(1);
}

/* Mosaic gallery items */
.mosaic-item.lazy-animate {
    transform: translateY(40px) rotate(2deg);
    opacity: 0;
}

.mosaic-item.lazy-animate.animate-in {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
}

/* Action cards */
.action-card.lazy-animate {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
}

.action-card.lazy-animate.animate-in {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Highlight cards */
.highlight-card.lazy-animate {
    transform: translateX(-20px);
    opacity: 0;
}

.highlight-card.lazy-animate.animate-in {
    transform: translateX(0);
    opacity: 1;
}

/* Video lazy loading */
video[data-src], iframe[data-src] {
    background-color: #000;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><rect width="100" height="60" fill="%23f0f0f0"/><polygon points="40,20 40,40 60,30" fill="%23666"/></svg>');
    background-size: 100px 60px;
    background-repeat: no-repeat;
    background-position: center;
}

video[data-src].lazy-loaded, iframe[data-src].lazy-loaded {
    background: none;
}

/* Loading text for images */
.lazy-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #f0f0f0;
    border-top: 3px solid #007acc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.lazy-image.lazy-loaded::after {
    display: none;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .lazy-animate {
        transform: translateY(15px);
    }
    
    .destination-card.lazy-animate {
        transform: translateY(20px) scale(0.98);
    }
    
    .mosaic-item.lazy-animate {
        transform: translateY(20px);
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .lazy-image,
    .lazy-animate,
    [data-bg] {
        transition: opacity 0.2s ease-out;
    }
    
    .lazy-animate {
        transform: none;
    }
    
    .lazy-animate.animate-in {
        transform: none;
    }
    
    @keyframes placeholderShimmer {
        0%, 100% {
            opacity: 0.3;
        }
        50% {
            opacity: 0.5;
        }
    }
}

/* Print styles - load all images for printing */
@media print {
    .lazy-image {
        opacity: 1;
        background: none;
    }
    
    [data-bg] {
        animation: none;
    }
}