/* =================================================================
   PERFORMANCE OPTIMIZATIONS FOR MOBILE
   Critical CSS for above-the-fold content
================================================================= */

/* =================================================================
   1. CRITICAL PATH CSS - Load First
================================================================= */

/* Inline critical fonts */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 400;
    font-display: swap; /* Show fallback font while loading */
    src: local('Jost Regular'), local('Jost-Regular');
}

@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Jost SemiBold'), local('Jost-SemiBold');
}

/* =================================================================
   2. IMAGE LOADING OPTIMIZATIONS
================================================================= */

/* Prevent layout shift for images */
img {
    content-visibility: auto;
    contain-intrinsic-size: 400px 300px;
}

/* Lazy load images below fold */
img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

img.loaded,
.logo__image,
.brand-logo-image {
    background: none !important;
    animation: none !important;
}

.brand-logo-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%; /* Constrain to container width */
    max-height: 160px; /* Reasonable max height for logos */
    object-fit: contain; /* Preserve aspect ratio, show full logo */
    object-position: center;
}

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

/* =================================================================
   3. HERO IMAGE OPTIMIZATION
================================================================= */

#hero-new {
    /* Use smaller bg image for mobile */
    background-image: none;
    background-color: #1a1a2e;
}

@media (min-width: 768px) {
    #hero-new {
        background-image: url('/assets/images/hero-background-riyadh.webp');
    }
}

/* Preload hero image only on desktop */
@media (min-width: 768px) {
    #hero-new::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url('/assets/images/hero-background-riyadh.webp') center/cover no-repeat;
        z-index: -1;
    }
}

/* =================================================================
   4. REDUCE PAINT COMPLEXITY
================================================================= */

/* Simplify shadows on mobile */
@media (max-width: 767.98px) {
    .card,
    .solution-card,
    .btn {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }
    
    .card:hover,
    .solution-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    }
}

/* =================================================================
   5. MINIMIZE REPAINTS ON SCROLL
================================================================= */

/* Use transform instead of top/left */
.nav-link::after,
.footer .menu-link::before {
    will-change: transform, opacity;
}

/* =================================================================
   6. OPTIMIZE ANIMATIONS FOR MOBILE
================================================================= */

@media (max-width: 767.98px) {
    /* Reduce animation complexity */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
    
    /* Disable some heavy animations */
    .btn::after {
        display: none;
    }
    
    /* Simplify card hover */
    .card:hover,
    .solution-card:hover {
        transform: translateY(-4px) !important;
    }
}

/* =================================================================
   7. CONTENT VISIBILITY - Defer offscreen content
================================================================= */

/* Defer rendering of offscreen sections */
section:not(:first-of-type) {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* =================================================================
   8. REDUCE INITIAL BUNDLE SIZE
================================================================= */

/* Hide non-critical elements initially */
.scroll-reveal {
    content-visibility: auto;
}

/* Defer footer rendering */
footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}

/* =================================================================
   9. OPTIMIZE FONTS LOADING
================================================================= */

/* Prevent FOUT (Flash of Unstyled Text) */
.font-loading body {
    visibility: hidden;
}

.fonts-loaded body {
    visibility: visible;
}

/* =================================================================
   10. CRITICAL CSS ONLY
================================================================= */

/* Load only essential styles first */
@media (max-width: 767.98px) {
    /* Hide elements that are not visible initially */
    .d-lg-none {
        display: none !important;
    }
}