/**
 * Performance Boost Styles
 * Optimizations for smooth scrolling and faster rendering
 */

/* Smooth scrolling with hardware acceleration */
html {
    scroll-behavior: smooth;
}

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

/* Disable expensive effects during scroll */
body.is-scrolling .property-card::before,
body.is-scrolling .property-card::after {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.is-scrolling .property-card {
    /* Keep basic transform but disable complex ones */
    will-change: transform;
}

body.is-scrolling .property-card:hover {
    /* Disable hover during scroll */
    transform: none !important;
    pointer-events: auto;
}

/* Reduce effects on low-end devices */
@media (prefers-reduced-motion: reduce),
       (max-width: 768px),
       (pointer: coarse) {
    .property-card::before,
    .property-card::after {
        display: none !important;
    }
    
    .property-card {
        transition: transform 0.2s ease !important;
    }
    
    .property-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Optimize grid container */
.properties-grid {
    /* Enable CSS containment for better performance */
    contain: layout style;
    /* Use transform for better performance */
    will-change: contents;
}

/* Override expensive transitions in buttons */
.contact-btn,
.favorite-btn,
.share-btn,
.compare-btn,
.phone-btn,
.whatsapp-btn,
.view-toggle button {
    /* Only transition what's needed */
    transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease !important;
}

/* Optimize hover effects */
.property-card .property-image-media,
.property-image img {
    /* Faster image hover */
    transition: transform 0.25s ease !important;
}

/* Reduce repaints on scroll */
.sticky-header,
header[class*="sticky"] {
    will-change: transform;
    transform: translateZ(0);
}

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

/* Optimize infinite scroll banner */
.infinite-scroll-banner {
    contain: layout style;
    will-change: transform;
}

/* Optimize pagination buttons */
.pagination-btn {
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

/* Remove expensive box-shadow transitions */
.property-card,
.card,
[class*="card"] {
    /* Only transition transform and opacity for better performance */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* Optimize dropdown menus */
.dropdown-menu,
.dropdown-content,
[class*="dropdown"] {
    contain: layout style;
    will-change: opacity, transform;
}

/* Optimize filters section */
.filters-container,
.search-filters,
[class*="filter"] {
    contain: layout;
}

/* Improve paint performance for fixed elements */
.fixed,
[class*="fixed"] {
    will-change: transform;
    transform: translateZ(0);
}

/* Optimize modal animations */
.modal,
.modal-content {
    contain: layout style;
    will-change: opacity, transform;
}

/* Reduce layout thrashing */
img,
video,
iframe {
    /* Prevent images from causing layout shifts */
    height: auto;
    max-width: 100%;
}

/* Optimize search inputs */
input[type="search"],
input[type="text"],
.search-input {
    will-change: auto;
}

/* Remove will-change from non-animating elements after load */
.loaded .property-card:not(:hover) {
    will-change: auto;
}

/* Add loaded class via JS after page load */
body.loaded * {
    will-change: auto;
}

body.loaded *:hover,
body.loaded *:focus,
body.loaded *:active {
    will-change: transform;
}

/* Performance hint for browsers */
@media (prefers-reduced-data: reduce) {
    /* Reduce data usage */
    .property-image-media,
    .property-image img {
        content-visibility: auto;
    }
}

/* Optimize rendering for large lists */
.properties-grid > .property-card {
    /* Each card is independent */
    contain: layout style paint;
    content-visibility: auto;
    /* Reserve space to prevent layout shift */
    contain-intrinsic-size: 0 500px;
}

/* Faster font rendering */
.card-title,
.card-price,
h1, h2, h3, h4, h5, h6 {
    text-rendering: optimizeSpeed;
}

/* Critical performance: Disable expensive effects on mobile */
@media (max-width: 768px) {
    .property-card::before,
    .property-card::after {
        /* Disable chroma effect on mobile for better performance */
        display: none !important;
    }
    
    .property-card:hover {
        /* Simpler hover effect on mobile */
        transform: translateY(-2px) translateZ(0) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Optimize for high refresh rate displays */
@media (min-resolution: 120dpi) {
    * {
        /* Smoother animations on high-DPI screens */
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
}