/* Performance Optimizations for Flow Surf Website */

/* GPU acceleration for body to improve animation performance */
body {
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Will-change hints for frequently animated elements */
.mode-button {
    will-change: transform, box-shadow;
}

.tab-button {
    will-change: transform;
}

.btn {    will-change: transform;
}

/* Contain layout/paint for better performance */
.leaderboard-container {
    contain: layout paint;
}

.profile-container {
    contain: layout paint;
}

/* Optimize table rendering */
table {
    contain: layout style;
}

/* Reduce backdrop-filter on mobile for better performance */
@media (max-width: 768px) {
    header,
    .container,
    .mode-button,
    .tab-button {
        backdrop-filter: none;
    }
    
    /* Simplify animations on mobile */
    .mode-button::before,
    .tab-button::after {
        display: none;
    }
}

/* Optimize for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}