/* ================================================
   HOVER & ANIMATION OPTIMIZATION
   Fixes flickering and improves browser compatibility
   ================================================ */

/* ==========================================
   1. GLOBAL PERFORMANCE OPTIMIZATIONS
   ========================================== */

/* Force hardware acceleration for better performance */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optimize animations for all elements with transitions */
*[class*="transition"],
*[class*="hover"],
*[class*="card"],
*[class*="btn"] {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* ==========================================
   2. CARD HOVER OPTIMIZATIONS
   ========================================== */

/* Benefit Cards */
.benefit-card-modern,
.modern-card,
.modern-why-card,
.modern-feature-card-large,
.stat-card-new {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease !important;
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

.benefit-card-modern:hover,
.modern-card:hover,
.modern-why-card:hover,
.modern-feature-card-large:hover,
.stat-card-new:hover {
    -webkit-transform: translateY(-4px) translateZ(0) !important;
    transform: translateY(-4px) translateZ(0) !important;
}

/* Icon Wrapper Optimization */
.benefit-icon-wrapper,
.modern-card-icon,
.why-card-icon,
.stat-icon-new {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

.benefit-card-modern:hover .benefit-icon-wrapper,
.modern-card:hover .modern-card-icon,
.modern-why-card:hover .why-card-icon {
    -webkit-transform: scale(1.1) rotate(5deg) translateZ(0) !important;
    transform: scale(1.1) rotate(5deg) translateZ(0) !important;
}

/* ==========================================
   3. BUTTON OPTIMIZATIONS
   ========================================== */

.btn-premium,
.btn-premium-outline,
.billing-toggle-btn,
button[class*="btn"] {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                transform 0.3s ease,
                box-shadow 0.3s ease !important;
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

.btn-premium:hover,
.btn-premium-outline:hover {
    -webkit-transform: translateY(-2px) translateZ(0) !important;
    transform: translateY(-2px) translateZ(0) !important;
}

/* ==========================================
   4. NAVIGATION OPTIMIZATIONS
   ========================================== */

.nav-link-modern,
.dropdown-item-modern,
.nav-link-mobile {
    transition: color 0.2s ease,
                background-color 0.2s ease !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

.dropdown-menu-modern {
    transition: opacity 0.3s ease,
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: opacity, transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* ==========================================
   5. PRICING CARD OPTIMIZATIONS
   ========================================== */

.pos-pricing-card,
.pricing-card,
.modern-pricing-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease !important;
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

.pos-pricing-card:hover,
.pricing-card:hover,
.modern-pricing-card:hover {
    -webkit-transform: translateY(-8px) scale(1.02) translateZ(0) !important;
    transform: translateY(-8px) scale(1.02) translateZ(0) !important;
}

/* ==========================================
   6. BILLING TOGGLE SLIDER OPTIMIZATION
   ========================================== */

.billing-toggle-slider {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

/* ==========================================
   7. IMAGE OPTIMIZATIONS
   ========================================== */

img,
.hero-dashboard-image,
.hero-section-col-two-laptop {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ==========================================
   8. ANIMATION OPTIMIZATIONS
   ========================================== */

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

/* ==========================================
   9. BROWSER-SPECIFIC FIXES
   ========================================== */

/* Safari specific fixes */
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .modern-navbar {
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
    }
}

/* Firefox specific fixes */
@-moz-document url-prefix() {
    .benefit-card-modern:hover,
    .modern-card:hover {
        transform: translateY(-4px) !important;
    }
}

/* Edge specific fixes */
@supports (-ms-ime-align: auto) {
    .benefit-card-modern,
    .modern-card {
        -ms-transform: translateZ(0);
    }
}

/* ==========================================
   10. TESTIMONIAL CARDS OPTIMIZATION
   ========================================== */

.testimonial-card-growth,
.testimonial-card {
    transition: transform 0.3s ease,
                box-shadow 0.3s ease !important;
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

.testimonial-card-growth:hover,
.testimonial-card:hover {
    -webkit-transform: translateY(-4px) translateZ(0) !important;
    transform: translateY(-4px) translateZ(0) !important;
}

/* ==========================================
   11. FEATURE CARDS OPTIMIZATION
   ========================================== */

.modern-feature-grid-card,
.modern-risk-card,
.modern-process-card-beautiful,
.modern-workflow-card,
.modern-smart-feature-card,
.modern-smart-feature-pk-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease !important;
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

.modern-feature-grid-card:hover,
.modern-risk-card:hover,
.modern-process-card-beautiful:hover,
.modern-workflow-card:hover,
.modern-smart-feature-card:hover,
.modern-smart-feature-pk-card:hover {
    -webkit-transform: translateY(-4px) translateZ(0) !important;
    transform: translateY(-4px) translateZ(0) !important;
}

/* ==========================================
   12. ACCORDION & COLLAPSE OPTIMIZATION
   ========================================== */

.accordion-button,
.accordion-item {
    transition: background-color 0.3s ease,
                border-color 0.3s ease !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

/* ==========================================
   13. GENERAL HOVER STATE OPTIMIZATION
   ========================================== */

/* Prevent text selection on hover elements */
.benefit-card-modern,
.modern-card,
.btn-premium,
.billing-toggle-btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Force GPU acceleration */
.benefit-card-modern::before,
.modern-card::before,
.pos-pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translateZ(-1px);
    transform: translateZ(-1px);
    pointer-events: none;
}

/* ==========================================
   14. MOBILE OPTIMIZATION
   ========================================== */

@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    .benefit-card-modern:hover,
    .modern-card:hover,
    .testimonial-card-growth:hover {
        transform: none !important;
    }
    
    /* Tap highlight removal */
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
}

/* ==========================================
   15. LOADING & INITIAL STATE OPTIMIZATION
   ========================================== */

/* Prevent FOUC (Flash of Unstyled Content) */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible,
.fade-in-up[style*="opacity: 1"] {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   16. Z-INDEX OPTIMIZATION
   ========================================== */

/* Ensure proper stacking context */
.modern-navbar {
    z-index: 1030 !important;
}

.dropdown-menu-modern {
    z-index: 1040 !important;
}

/* ==========================================
   END OF HOVER & ANIMATION OPTIMIZATION
   ========================================== */