/*
 * Animations Performance Fix
 * Disable non-composited animations to improve CLS and performance
 * Only use transform and opacity for animations
 */

/* Disable box-shadow animations */
.section-divider,
.section-divider-icon {
    animation: none !important;
}

/* Disable box-shadow animations on pseudo elements */
.section-divider::before,
.section-divider::after {
    animation: none !important;
}

/* Disable text-shadow animations */
.section-divider-icon::before {
    animation: none !important;
}

/* Replace filter-based animations with opacity */
.hero-title {
    animation: titleFadeIn 1.2s ease-out forwards !important;
}

@keyframes titleFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Replace filter-based tagline animation */
.hero-tagline {
    animation: taglineFadeIn 1s ease-out 0.3s backwards !important;
}

@keyframes taglineFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Disable width-based animations */
.gold-line,
.hero-divider {
    animation: none !important;
}

/* Disable background-position animations */
.why-choose-title-highlight,
.highlight {
    animation: none !important;
}

/* Disable background-position animations on pseudo elements */
.section::after,
.why-choose-section::after,
.hero-background::after {
    animation: none !important;
}

/* Performance optimization: Use will-change for composited properties only */
.fade-in,
.slide-up,
.scale-in {
    will-change: transform, opacity;
}

/* Remove will-change after animation completes */
.fade-in:not(.animating),
.slide-up:not(.animating),
.scale-in:not(.animating) {
    will-change: auto;
}

/* Fix nav-link animations - disable width and color transitions */
.nav-link::after {
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    width: 100% !important;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: right;
}

.nav-link:hover::after,
.nav-link.active::after {
    opacity: 1 !important;
    transform: scaleX(1) !important;
}

/* Fix nav-link color and padding - use opacity instead */
.nav-link {
    transition: opacity 0.3s ease !important;
    padding-right: 0 !important;
}

.nav-link:hover,
.nav-link.active {
    padding-right: 0 !important;
    opacity: 0.85 !important;
}