/** ============================================================
 *  PERFORMANCE OPTIMIZED CSS
 *  Disables heavy animations during scroll
 *===============================================================*/

/* CRITICAL FIX: Disable gradient animation on header */
.menu-container {
    animation: none !important;
    background: linear-gradient(135deg, #111a4c 0%, #5e70d0 100%);
    background-attachment: fixed;
}

/* Smooth transition instead of animation */
.menu-container.sticky {
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/** ===============================================
 * REDUCE LAYER CREATION
 * Remove will-change from most elements
 *=================================================*/

/* Only apply will-change during active interactions */
[data-aos] {
    will-change: auto;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out !important;
}

/* Only enable will-change when in viewport */
[data-aos].aos-animate {
    will-change: opacity, transform;
}

/* Remove will-change after animation completes */
[data-aos].aos-animate[data-aos-once="true"] {
    will-change: auto;
}

/** ===============================================
 * OPTIMIZE FLOATING CIRCLES
 * Reduce animation complexity
 *=================================================*/

/* Disable floating animation during scroll */
html.is-scrolling .img-circle {
    animation: none !important;
}

/* Use CSS transform instead of complex animations */
.img-circle {
    animation: float 8s ease-in-out infinite;
    will-change: auto;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Simplified float animation */
@keyframes float {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -15px, 0);
    }
}

/* Stagger animation delays to reduce simultaneous animations */
.img-circle.one {
    animation-delay: 0s;
}

.img-circle.two {
    animation-delay: 2s;
}

.img-circle.three {
    animation-delay: 4s;
}

.img-circle.four {
    animation-delay: 6s;
}

/** ===============================================
 * REMOVE PROBLEMATIC ANIMATIONS
 *=================================================*/

/* DISABLED: Gradient shift animation causes constant repaints */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Disable gradient shift */
.header-gradient-animated {
    animation: none !important;
}

/** ===============================================
 * OPTIMIZE PARALLAX EFFECTS
 *=================================================*/

/* Use will-change sparingly on parallax elements */
.why-choose__image-card {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/** ===============================================
 * OPTIMIZE SLIDERS
 * Use GPU acceleration for transforms
 *=================================================*/

[data-slider-track] {
    transform: translate3d(0, 0, 0);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backface-visibility: hidden;
    perspective: 1000px;
}

/** ===============================================
 * DISABLE ANIMATIONS DURING SCROLL
 * CRITICAL: Only disable heavy animations, NOT AOS
 *=================================================*/

html.is-scrolling .img-circle {
    animation: none !important;
}

html.is-scrolling .floating-circle {
    animation: none !important;
}

/* KEEP AOS ANIMATIONS SMOOTH - Don't disable during scroll */
html.is-scrolling [data-aos] {
    /* AOS animations continue smoothly during scroll */
}

html.is-scrolling [data-aos].aos-animate {
    /* Animations play normally */
}

@keyframes fadeUpAnimation {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/** ===============================================
 * IMAGE OPTIMIZATION
 *=================================================*/

/* Lazy loaded images should have minimal impact */
img[loading="lazy"] {
    will-change: auto;
    decode: async;
}

/* Prevent layout shift during image load */
img[loading="lazy"][src] {
    display: block;
}

/** ===============================================
 * SMOOTH SCROLLING
 *=================================================*/

html {
    scroll-behavior: smooth;
}

/** ===============================================
 * REDUCE PAINT AREAS
 * Use overflow: hidden on containers
 *=================================================*/

.hero-slider,
.why-choose__stage,
.projects-section,
.about-float-wrapper {
    contain: layout style paint;
    overflow: hidden;
}

/** ===============================================
 * OPTIMIZE TEXT RENDERING
 *=================================================*/

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/** ===============================================
 * REDUCE TRANSFORM LAYERS
 *=================================================*/

/* Use transform3d for GPU acceleration */
.feature-card:hover,
.news-card:hover,
.stat-card:hover {
    transform: translate3d(0, -5px, 0);
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* After hover, remove will-change */
.feature-card:not(:hover),
.news-card:not(:hover),
.stat-card:not(:hover) {
    will-change: auto;
}