/* ============================================
   Faetastic Smooth Animations
   Enhanced animations with transform and easing
   ============================================ */

/* Base animation setup */
.smooth-animated {
    animation-fill-mode: both;
    animation-duration: 0.8s;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Easing Functions */
.ease-smooth {
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ease-out-quart {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ease-out-expo {
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.ease-out-back {
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Initial states for elements - ENSURE ELEMENTS START HIDDEN */
.elementor-invisible,
.elementor-element.elementor-invisible {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    will-change: transform, opacity !important;
    /* Note: Do NOT use visibility:hidden as it causes flickering */
}

/* Elementor animation overrides for smoother experience */
.elementor-element[data-settings*="animation"],
.elementor-element[data-settings*="_animation"] {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition:
        opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: transform, opacity !important;
    /* Ensure element is rendered but invisible to prevent flicker */
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* Visible state - elements that have animated in */
.elementor-element[data-settings*="animation"].elementor-visible,
.elementor-element[data-settings*="_animation"].elementor-visible,
.elementor-element.elementor-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    /* Force GPU acceleration for smooth rendering */
    transform: translate3d(0, 0, 0) !important;
}

/* Specific animation types - INITIAL STATES */
.elementor-element[data-settings*='"_animation":"fadeIn"'],
.elementor-element[data-settings*='"animation":"fadeIn"'] {
    opacity: 0 !important;
    transform: translateY(30px) !important;
}

.elementor-element[data-settings*='"_animation":"fadeInUp"'],
.elementor-element[data-settings*='"animation":"fadeInUp"'] {
    opacity: 0 !important;
    transform: translateY(40px) !important;
}

.elementor-element[data-settings*='"_animation":"fadeInDown"'],
.elementor-element[data-settings*='"animation":"fadeInDown"'] {
    opacity: 0 !important;
    transform: translateY(-40px) !important;
}

.elementor-element[data-settings*='"_animation":"fadeInLeft"'],
.elementor-element[data-settings*='"animation":"fadeInLeft"'] {
    opacity: 0 !important;
    transform: translateX(-40px) !important;
}

.elementor-element[data-settings*='"_animation":"fadeInRight"'],
.elementor-element[data-settings*='"animation":"fadeInRight"'] {
    opacity: 0 !important;
    transform: translateX(40px) !important;
}

.elementor-element[data-settings*='"_animation":"zoomIn"'],
.elementor-element[data-settings*='"animation":"zoomIn"'] {
    opacity: 0 !important;
    transform: scale(0.95) !important;
}

/* Animation delays */
.elementor-element[data-settings*='"_animation_delay":200'],
.elementor-element[data-settings*='"animation_delay":200'] {
    transition-delay: 0.2s !important;
}

.elementor-element[data-settings*='"_animation_delay":400'],
.elementor-element[data-settings*='"animation_delay":400'] {
    transition-delay: 0.4s !important;
}

.elementor-element[data-settings*='"_animation_delay":500'],
.elementor-element[data-settings*='"animation_delay":500'] {
    transition-delay: 0.5s !important;
}

.elementor-element[data-settings*='"_animation_delay":600'],
.elementor-element[data-settings*='"animation_delay":600'] {
    transition-delay: 0.6s !important;
}

.elementor-element[data-settings*='"_animation_delay":700'],
.elementor-element[data-settings*='"animation_delay":700'] {
    transition-delay: 0.7s !important;
}

.elementor-element[data-settings*='"_animation_delay":800'],
.elementor-element[data-settings*='"animation_delay":800'] {
    transition-delay: 0.8s !important;
}

/* Keyframe Animations */
@keyframes smoothFadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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

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

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

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

@keyframes smoothZoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.95, 0.95, 1);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

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

/* Animation Classes */
.smooth-fade-in {
    animation-name: smoothFadeIn;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.smooth-fade-in-up {
    animation-name: smoothFadeInUp;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.smooth-fade-in-down {
    animation-name: smoothFadeInDown;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.smooth-fade-in-left {
    animation-name: smoothFadeInLeft;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.smooth-fade-in-right {
    animation-name: smoothFadeInRight;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.smooth-zoom-in {
    animation-name: smoothZoomIn;
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.smooth-slide-in-up {
    animation-name: smoothSlideInUp;
    animation-duration: 0.9s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Stagger animation delays for children */
.stagger-children > *:nth-child(1) {
    animation-delay: 0s;
}
.stagger-children > *:nth-child(2) {
    animation-delay: 0.1s;
}
.stagger-children > *:nth-child(3) {
    animation-delay: 0.2s;
}
.stagger-children > *:nth-child(4) {
    animation-delay: 0.3s;
}
.stagger-children > *:nth-child(5) {
    animation-delay: 0.4s;
}
.stagger-children > *:nth-child(6) {
    animation-delay: 0.5s;
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
    .smooth-animated,
    .elementor-element[data-settings*="animation"] {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .elementor-element[data-settings*="animation"] {
        transform: translateY(20px);
    }

    .elementor-element[data-settings*='"_animation":"fadeInUp"'] {
        transform: translateY(25px);
    }

    .elementor-element[data-settings*='"_animation":"fadeInLeft"'],
    .elementor-element[data-settings*='"_animation":"fadeInRight"'] {
        transform: translateY(20px);
    }
}

/* Hero section special animation */
.hero-animate {
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity 1s cubic-bezier(0.19, 1, 0.22, 1),
        transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.hero-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Counter animation enhancement */
.elementor-counter-number-wrapper {
    transition: transform 0.3s ease;
}

.elementor-counter-number-wrapper:hover {
    transform: scale(1.05);
}

/* Image hover animations */
.elementor-widget-image img {
    transition:
        transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.4s ease;
}

.elementor-widget-image:hover img {
    transform: scale(1.03);
}

/* Button hover enhancement */
.elementor-button {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* FORCE ALL ANIMATED ELEMENTS TO START HIDDEN - Homepage fix */
body .elementor-element.elementor-invisible[data-settings],
body .elementor-element[data-settings*="_animation"]:not(.elementor-visible),
body .elementor-element[data-settings*="animation"]:not(.elementor-visible) {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    /* Use opacity and transform only - no visibility:hidden to prevent flicker */
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
}

/* Card/Container hover lift effect */
.e-con:hover {
    transform: translateY(-2px);
    transition:
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s ease;
}

/* Navigation smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Loading state - ensure smooth initialization */
.page-loading .elementor-element[data-settings*="animation"] {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: none !important;
}

.page-loaded .elementor-element[data-settings*="animation"].elementor-visible,
.page-loaded .elementor-element[data-settings*="_animation"].elementor-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Extra smooth transition for elements with staggered delays */
.elementor-element[data-settings*="animation_delay"].elementor-visible,
.elementor-element[data-settings*="_animation_delay"].elementor-visible {
    opacity: 1 !important;
    transform: translateY(0) translate3d(0, 0, 0) !important;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}