/* ============================================
   ANIMATION PERFORMANCE FIXES
   ============================================ */

/* 1. Replace all "transition: all" with specific properties */
.navbar {
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

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

.btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.feature-card {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    contain: layout style paint; /* Improve rendering performance */
    transform: translateZ(0); /* Force GPU acceleration */
    backface-visibility: hidden; /* Prevent flickering */
}

.method-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    contain: layout style paint;
}

/* 2. Reduce hover transforms */
.feature-card:hover,
.method-card:hover,
.package-card:hover {
    transform: translateY(-2px); /* Even more subtle */
}

.btn:hover {
    transform: translateY(-1px); /* Subtle lift */
}

/* 3. Optimize ticker animation - Always running */
.ticker-content {
    animation: ticker 15s linear infinite; /* Faster for continuous movement feel */
    animation-play-state: running !important; /* Force always running */
    will-change: transform; /* GPU acceleration for smooth animation */
}

/* Consider using this JavaScript to pause when off-screen:
const ticker = document.querySelector('.ticker-content');
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        ticker.style.animationPlayState = entry.isIntersecting ? 'running' : 'paused';
    });
});
observer.observe(ticker);
*/

/* 4. Smooth FAQ accordion - Simple max-height solution */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer {
    max-height: 500px; /* Adjust if needed for longer answers */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fix alignment - match question text padding */
.faq-answer p {
    transform: none !important;
    transition: none !important;
    padding: 20px 30px 30px 30px; /* Top Right Bottom Left - align with question */
    margin: 0;
    line-height: 1.7;
}

/* 5. Faster hero animations */
.hero-tag {
    animation: heroFadeIn 0.6s ease-out; /* Reduced from 1s */
}

.hero-title {
    animation: heroFadeIn 0.6s ease-out 0.1s both; /* Reduced delays */
}

.hero-subtitle {
    animation: heroFadeIn 0.6s ease-out 0.2s both;
}

.hero-buttons {
    animation: heroFadeIn 0.6s ease-out 0.3s both;
}

/* 6. Consolidate about section animations */
.about-content-wrapper.visible > * {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Remove individual delays, use nth-child instead */
.about-content-wrapper.visible > *:nth-child(1) { transition-delay: 0s; }
.about-content-wrapper.visible > *:nth-child(2) { transition-delay: 0.1s; }
.about-content-wrapper.visible > *:nth-child(3) { transition-delay: 0.2s; }
/* Stop at 3 elements max */

/* 7. Accessibility - Respect 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;
        scroll-behavior: auto !important;
    }

    .ticker-content {
        animation: none;
    }

    .feature-card,
    .method-card {
        opacity: 1;
        transform: none;
    }
}

/* 8. GPU-accelerated transforms only */
.feature-card,
.method-card,
.package-card {
    transform: translateZ(0); /* Simpler GPU trigger */
    backface-visibility: hidden; /* Prevent flickering */
    -webkit-font-smoothing: antialiased; /* Better text rendering */
}

/* 9. Optimize entrance animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0); /* Reduced from 30px */
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* 10. Use CSS containment for performance */
.service-section,
.methodology,
.faq-modern {
    contain: layout style;
}

/* 11. Optimize image animations */
.card-image img {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Hover effects removed */