/**
 * Performance Optimizations
 * GPU acceleration hints and layout optimization
 */

/* GPU acceleration for animated elements */
.toast,
.modal,
.popup,
.dropdown-menu,
.challenge-success-modal,
.challenge-hero,
[class*="slide-"],
[class*="fade-"] {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Prevent layout thrashing on scroll */
.fixed-header,
.sticky-nav,
[class*="fixed-"] {
    will-change: scroll-position;
    contain: layout;
}

/* Optimize table rendering */
table.large-dataset {
    contain: layout style paint;
}

/* Optimize image rendering */
img {
    content-visibility: auto;
}

/* Reduce paint area for hidden elements */
.hidden,
[hidden] {
    contain: strict;
}

/* Optimize animations */
@media (prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
    }
}

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

/* Contain repaints to specific areas */
.card,
.prediction-card,
.match-card {
    contain: layout paint;
}

/* Optimize scrollable containers */
.scrollable-list,
.match-list,
.predictions-list {
    contain: layout style paint;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}