/* ========================================
   FOUC (Flash of Unstyled Content) Prevention
   ======================================== */

/* Hide entire page until CSS is loaded */
html:not(.loaded) {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Show page with smooth fade-in when loaded */
html.loaded {
    visibility: visible !important;
    opacity: 1 !important;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Prevent layout shift during load */
html:not(.loaded) body {
    overflow: hidden;
}

html.loaded body {
    overflow: visible;
}

/* Ensure critical elements are hidden until styled */
html:not(.loaded) .hero-section-slider,
html:not(.loaded) .modern-breadcrumb,
html:not(.loaded) header,
html:not(.loaded) .service-section,
html:not(.loaded) .about-section {
    visibility: hidden;
    opacity: 0;
}

/* Show elements when page is loaded */
html.loaded .hero-section-slider,
html.loaded .modern-breadcrumb,
html.loaded header,
html.loaded .service-section,
html.loaded .about-section {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

/* Prevent flash of wrong font */
html:not(.loaded) * {
    font-family: system-ui, -apple-system, sans-serif !important;
}

/* Critical CSS for loader - always visible */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure loader shows even before CSS loads */
html:not(.loaded) #loader {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}