/* Performance Optimization CSS */

/* ===== WORKFLOW IMAGES FIX ===== */
.workflow-img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    height: auto !important;
}

/* ===== LAZY LOADING PLACEHOLDERS ===== */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

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

/* ===== CRITICAL CSS OPTIMIZATION ===== */
/* Above-the-fold content optimized for immediate rendering */

/* ===== WILL-CHANGE OPTIMIZATION ===== */
.hero-grid,
.workflow-item,
.feature-card {
    will-change: transform;
}

/* ===== REDUCE PAINT COMPLEXITY ===== */
.workflow-img {
    contain: layout style paint;
}

/* ===== SCROLL PERFORMANCE ===== */
html {
    scroll-behavior: smooth;
}

/* ===== ANIMATION PERFORMANCE ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== FONT LOADING OPTIMIZATION ===== */
@font-face {
    font-family: 'Inter';
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: local('Inter Regular'), local('Inter-Regular');
}

@font-face {
    font-family: 'Merriweather';
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: local('Merriweather Bold'), local('Merriweather-Bold');
}

/* ===== CONTAINMENT FOR PERFORMANCE ===== */
.workflow-showcase {
    contain: layout style;
}

.workflow-grid {
    contain: layout;
}