/* ========================================
   PERFORMANCE OPTIMIZATION CSS
   Lazy loading, image optimization, faster rendering
   ======================================== */

/* Lazy loading images - FAST transition */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

img[loading="lazy"].loaded,
img.loaded {
    opacity: 1;
}

/* Prevent image layout shift */
img {
    max-width: 100%;
    height: auto;
}

/* Blog images - prevent cut off on mobile */
@media (max-width: 767px) {
    .blog-card-img img,
    .featured-blog-img img,
    .blog-featured-img img,
    .related-post-img img {
        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* Optimize font rendering */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reduce paint areas */
.main-wrapper,
section,
.container {
    contain: layout style;
}

/* Hardware acceleration for animations */
.swiper-slide,
.tech-card,
.logo-card,
.dropdown-menu {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize scrolling */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Preloader optimization - ULTRA FAST */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

#preloader.loaded {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

/* Critical above-the-fold content */
.hero-section,
.hero-it-solution,
.main-header {
    content-visibility: visible;
}

/* Below-the-fold content - lazy render */
.brand-logo,
.testimonial-section,
.footer-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* Image aspect ratio to prevent layout shift */
.tech-card img,
.logo-card img,
.service-icon-img {
    aspect-ratio: attr(width) / attr(height);
}

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

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

/* Optimize swiper/carousel */
.swiper-wrapper {
    will-change: transform;
}

.swiper-slide {
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

/* Reduce repaints on hover */
.btn,
.nav-link,
.dropdown-link {
    will-change: background-color, color;
}

/* Font display optimization */
@font-face {
    font-display: swap;
}