/**
 * Smooth Parallax Animator CSS
 * Provides smooth transitions for parallax animated elements
 */

/* Base styles for parallax elements */
.custom_parallax {
    /* Enable hardware acceleration */
    transform: translate3d(0, 0, 0);

    /* Smooth transitions for all transform changes */
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);

    /* Ensure element doesn't cause reflow */
    backface-visibility: hidden;
    perspective: 1000px;

    /* Improve rendering performance */
    will-change: transform;
}

/* Enhanced smoothness for elements currently animating */
.custom_parallax.parallax-animating {
    /* Slightly faster transition while actively animating */
    transition-duration: 0.5s;

    /* Enhanced easing for ultra-smooth animation */
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Reduced motion styles removed - always show full animations */

/* Fallback for browsers that don't support transform3d */
.no-transforms .custom_parallax {
    transition: none;
}

/* Ensure smooth scrolling on the page doesn't conflict */
html {
    scroll-behavior: smooth;
}

/* Performance optimization: prepare elements for animation */
.custom_parallax {
    /* Create new stacking context to prevent repaint issues */
    isolation: isolate;

    /* Optimize for transform animations */
    transform-style: preserve-3d;

    /* Prevent subpixel rendering issues */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Force hardware acceleration */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
}

/* Smooth scrolling optimization */
* {
    -webkit-overflow-scrolling: touch;
}

/* Container optimization for Elementor */
.elementor-widget .custom_parallax,
.elementor-element .custom_parallax {
    /* Ensure Elementor containers don't interfere */
    transform-origin: center center;

    /* Maintain aspect ratio during animation */
    box-sizing: border-box;
}