/**
 * Loading States for Smooth Page Transitions
 * Prevents visual jumps and improves user experience during page load
 */

/* General loading skeleton for components */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

[data-theme="dark"] .loading-skeleton {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

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

/* Hero section loading states */
.hero-section.loading {
    background: #1a1a1a;
    min-height: 100vh;
}

.hero-section.loading .hero-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-section.loaded .hero-content {
    opacity: 1;
    transform: translateY(0);
}

/* Properties carousel loading */
.properties-carousel-section.loading .carousel-property-card {
    background: #2a2a2a;
    opacity: 0.6;
}

.properties-carousel-section.loaded .carousel-property-card {
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* Statistics section loading */
.property-statistics.loading .statistic-card {
    opacity: 0;
    transform: translateY(30px);
}

.property-statistics.loaded .statistic-card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Smooth page transitions */
.page-transition-enter {
    opacity: 0;
    transform: translateY(20px);
}

.page-transition-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Prevent flash of unstyled content (FOUC) */
.js-loading {
    visibility: hidden;
}

.js-loaded {
    visibility: visible;
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading state for images */
img[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img[data-loaded="true"] {
    opacity: 1;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .loading-skeleton {
        animation: none;
        background: #f0f0f0;
    }
    
    [data-theme="dark"] .loading-skeleton {
        background: #2a2a2a;
    }
    
    .hero-content,
    .statistic-card,
    .carousel-property-card,
    .js-loaded {
        animation: none !important;
        transition: none !important;
    }
}