/**
 * Performance Overrides - perf-overrides.css
 * Replaces expensive "transition: all" with specific compositor-friendly properties.
 * "transition: all" causes the browser to evaluate EVERY CSS property on hover,
 * triggering full style recalculation. Specific transitions only recalculate what's needed.
 */

/* =====================================================
   Product Cards - most frequently hovered elements
   ===================================================== */
.carousel-product-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.carousel-product-card:hover {
    /* Keep only compositor-layer properties in transition */
}

/* =====================================================
   Category Section Cards
   ===================================================== */
.category-section {
    /* Replaces "transition: all 0.3s ease" - only animate visual properties, not layout */
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* =====================================================
   View All / Filter Buttons
   ===================================================== */
.view-all-link,
.filter-btn,
.filter-btn.active {
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
}

/* =====================================================
   Navigation Items & Header
   ===================================================== */
.header-nav-link,
.nav-link {
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* =====================================================
   Buttons (General)
   ===================================================== */
.btn,
.btn-primary,
.carousel-product-link {
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* =====================================================
   Tag Cards
   ===================================================== */
.tag-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* =====================================================
   FAQ Items
   ===================================================== */
.faq-item {
    transition: box-shadow 0.3s ease !important;
}

.faq-question i {
    transition: transform 0.3s ease !important;
}

/* =====================================================
   Feature Cards & Testimonials
   ===================================================== */
.feature-card-modern,
.testimonial-card-modern {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* =====================================================
   Scroll Buttons
   ===================================================== */
.scroll-btn,
.tags-scroll-btn {
    transition: background-color 0.2s ease, opacity 0.2s ease !important;
}

/* =====================================================
   Hero Buttons
   ===================================================== */
.hero-prev,
.hero-next {
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* =====================================================
   Reduce motion for users who prefer it
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}