/**
 * Performance Optimizations for Hostinger AI Theme
 * This file addresses choppy/glitchy scroll animations
 * Upload this file and enqueue it after style.min.css
 */

/* ==========================================================================
   1. GPU HARDWARE ACCELERATION
   Force GPU rendering for all animated elements
   ========================================================================== */

[data-aos],
.hostinger-ai-fade-up,
.aos-animate,
.aos-init {
    /* Enable GPU acceleration */
    will-change: opacity, transform;
    /* Ensure proper 3D context for GPU */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Remove will-change after animation completes to free GPU memory */
.aos-animate {
    will-change: auto;
}

/* ==========================================================================
   2. SMOOTHER ANIMATIONS
   Use optimized easing and timing
   ========================================================================== */

[data-aos^="fade"],
.hostinger-ai-fade-up {
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Reduce animation distance for less jarring effect */
[data-aos="fade-up"] {
    transform: translate3d(0, 30px, 0) !important;
}

[data-aos="fade-up"].aos-animate {
    transform: translate3d(0, 0, 0) !important;
}

/* ==========================================================================
   3. REDUCE ANIMATION STACKING
   Prevent too many animations at once
   ========================================================================== */

/* Stagger nested animations to prevent layout thrashing */
.hostinger-ai-fade-up .hostinger-ai-fade-up {
    transition-delay: 50ms !important;
}

.hostinger-ai-fade-up .hostinger-ai-fade-up .hostinger-ai-fade-up {
    transition-delay: 100ms !important;
}

/* ==========================================================================
   4. RESPECT USER PREFERENCES
   Disable animations for users who prefer reduced motion
   ========================================================================== */

@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;
    }
    
    [data-aos],
    .hostinger-ai-fade-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   5. SMOOTH SCROLLING OPTIMIZATION
   ========================================================================== */

html {
    scroll-behavior: smooth;
    /* Improve scroll paint performance */
    -webkit-overflow-scrolling: touch;
}

/* Contain layout shifts */
body {
    /* Prevent layout shifts during animation */
    overflow-x: hidden;
}

/* ==========================================================================
   6. IMAGE LOADING OPTIMIZATION
   Prevent layout shifts from images
   ========================================================================== */

.wp-block-image img,
.hostinger-ai-image img,
figure img {
    /* Reserve space for images */
    aspect-ratio: attr(width) / attr(height);
    /* Smooth image transitions */
    transition: opacity 0.3s ease;
}

/* Loading state for images */
img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
}

/* ==========================================================================
   7. CONTAIN PAINT AREAS
   Isolate repainting to specific areas
   ========================================================================== */

.wp-block-group,
.wp-block-columns,
.wp-block-column,
header,
footer,
main,
section {
    /* Isolate paint and layout calculations */
    contain: layout style;
}

/* Full containment for animation containers */
[data-aos] {
    contain: layout style paint;
}

/* ==========================================================================
   8. FIX COMMON JANK SOURCES
   ========================================================================== */

/* Prevent box-shadow animations causing repaints */
.wp-element-button,
.wp-block-button__link {
    /* Use transform for hover effects instead of box-shadow changes */
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
    transform: translateY(-2px);
}

/* Optimize navigation transitions */
.wp-block-navigation-item a {
    transition: color 0.15s ease !important;
}

/* ==========================================================================
   9. FONT LOADING OPTIMIZATION
   ========================================================================== */

/* Prevent FOUT (Flash of Unstyled Text) */
@font-face {
    font-display: swap;
}

/* ==========================================================================
   10. QUICK FIX FOR IMMEDIATE VISIBILITY
   Show content immediately if JS fails or is slow
   ========================================================================== */

/* Failsafe: show content after 3 seconds even if AOS hasn't initialized */
@keyframes show-content {
    to {
        opacity: 1;
        transform: none;
    }
}

.hostinger-ai-fade-up {
    animation: show-content 0.01ms 3s forwards;
}