/* Performance optimizations CSS */

/* Critical above-the-fold styles - load inline */
.critical-above-fold {
    /* Styles for content visible immediately on page load */
    background-color: var(--bs-dark);
    color: var(--bs-light);
}

/* Lazy loading improvements */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy-load.loaded {
    opacity: 1;
}

/* Optimize images */
img {
    max-width: 100%;
    height: auto;
}

/* Reduce layout shifts */
.card-img-top {
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* Faster transitions */
.btn, .card {
    transition: transform 0.2s ease-in-out;
}

/* Optimize font loading */
@font-face {
    font-family: 'FontAwesome';
    font-display: swap;
}

/* Preload critical resources */
.preload-critical {
    content: '';
    display: none;
    background-image: 
        url('../learnmate-logo.png'),
        url('../icons/icon-192x192.png');
}

/* Minimize reflows */
.fixed-height {
    min-height: 200px;
}

/* GPU acceleration for animations */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

/* Reduce paint complexity */
.simple-shadow {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Optimize table performance */
.table-fixed {
    table-layout: fixed;
}

/* Faster scrolling */
.smooth-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Memory optimization */
.contain-layout {
    contain: layout;
}

.contain-paint {
    contain: paint;
}

/* Reduce DOM complexity */
.simplified-structure {
    contain: layout style paint;
}