/* ═══════════════════════════════════════════════════════════════
   🚀 PERFORMANCE BOOST CSS - 240Hz Smooth Scrolling
   ═══════════════════════════════════════════════════════════════ */

/* Enable GPU acceleration for common elements */
.header,
.nav-menu,
.hero-section,
.card,
.button,
.modal,
.dropdown-menu,
.auth-dropdown,
.page-container {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

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

body {
    /* Enable hardware acceleration for entire page */
    transform: translateZ(0);
    backface-visibility: hidden;
    
    /* Optimize font rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

/* Optimize transitions for 240Hz displays */
* {
    /* Use transform and opacity for animations (GPU accelerated) */
    transition-property: transform, opacity, background-color, box-shadow, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header performance optimizations */
.header {
    /* Use transform instead of changing background */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.header.scrolled {
    transform: translateY(0) translateZ(0);
    will-change: transform, box-shadow;
}

/* Card hover optimizations */
.card,
.feature-card,
.testimonial-card {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover,
.feature-card:hover,
.testimonial-card:hover {
    /* Use transform instead of margins/positioning */
    transform: translateY(-5px) translateZ(0);
    will-change: transform, box-shadow;
}

/* Button optimizations */
.button,
.btn,
button,
input[type="submit"] {
    /* Optimize button interactions */
    transition: transform 0.15s ease-out, 
                background-color 0.15s ease-out,
                box-shadow 0.15s ease-out;
    will-change: transform;
}

.button:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover {
    transform: translateY(-1px) translateZ(0);
}

.button:active,
.btn:active,
button:active,
input[type="submit"]:active {
    transform: translateY(0) translateZ(0);
}

/* Navigation optimizations */
.nav-menu {
    /* Optimize mobile menu animations */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link {
    transition: color 0.2s ease-out, background-color 0.2s ease-out;
}

/* Parallax and scroll effects optimization */
.parallax-element {
    will-change: transform;
    transform: translateZ(0);
}

/* Modal and overlay optimizations */
.modal,
.overlay {
    will-change: opacity, transform;
    transform: translateZ(0);
}

/* Dropdown optimizations */
.dropdown-menu,
.auth-dropdown {
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    transform: translateZ(0);
}

/* Image and media optimizations */
img,
video,
iframe {
    /* Optimize media rendering */
    will-change: auto;
    transform: translateZ(0);
}

/* Form element optimizations */
input,
textarea,
select {
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    will-change: auto;
}

/* Reduce layout thrashing */
.container,
.row,
.col {
    contain: layout style;
}

/* Optimize scrollable areas */
.scrollable,
.overflow-auto,
.overflow-y-auto,
.overflow-x-auto {
    /* Enable momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    /* Optimize scrolling performance */
    overscroll-behavior: contain;
}

/* Table optimizations */
table {
    /* Optimize table rendering */
    table-layout: fixed;
    contain: layout style;
}

/* Animation performance settings */
@media (prefers-reduced-motion: no-preference) {
    /* Enable smooth animations for users who want them */
    .animate-on-scroll {
        will-change: transform, opacity;
        transform: translateZ(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Disable animations for users who prefer reduced motion */
    *,
    ::before,
    ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-delay: 0s !important;
        transition-duration: 0s !important;
    }
}

/* 240Hz display optimizations */
@media (min-resolution: 200dpi) {
    /* Optimize for high refresh rate displays */
    * {
        transition-duration: 0.1s;
    }
    
    .header {
        transition-duration: 0.1s;
    }
    
    .card:hover,
    .button:hover {
        transition-duration: 0.1s;
    }
}

/* Critical performance rules */
.performance-critical {
    /* For elements that need maximum performance */
    contain: strict;
    will-change: transform;
    transform: translateZ(0);
    isolation: isolate;
}