/* Kenburns effect */

.elementor-widget-image.animate.kenburn.active .elementor-widget-container {
    overflow: hidden;
}

.elementor-widget-image.animate.kenburn.active picture,
.elementor-widget-image.animate.kenburn.active img {
    animation: kenburns 20s ease-in-out both;
}

@keyframes kenburns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}


/* =========================
// TEXT REVEAL GSAP
// set opacity to 0 before js has initialized
// to avoid ugly flash, then we will be setting opacity: 1 via the active class
// ========================= */
span.text-reveal {
    opacity: 0;
}

span.text-reveal.active,
.elementor-editor-active span.text-reveal {
    opacity: 1;
}


.slider-text-reveal .line,
.text-reveal .line {
    overflow: hidden;
}

.slider-text-reveal .word,
.text-reveal .word {
    display: inline-block;
}

/* =========================
// TUNE ELEMENTOR NATIVE TRANSITIONS
// those are similar to gsap fade in/out etc, 
// but do not repeat
// ========================= */

@keyframes customfadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -10%, 0);
        /* less movement for subtler effect */
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes customfadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-10%, 0, 0);
        /* less movement for subtler effect */
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes customfadeInRight {
    from {
        opacity: 0;
        transform: translate3d(10%, 0, 0);
        /* less movement for subtler effect */
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes customfadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 10%, 0);
        /* less movement for subtler effect */
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInDown {
    animation-name: customfadeInDown !important;
}

.fadeInLeft {
    animation-name: customfadeInLeft !important;
}

.fadeInRight {
    animation-name: customfadeInRight !important;
}

.fadeInUp {
    animation-name: customfadeInUp !important;
}

/* Stronger motion only inside hero-slide */
.ch-header .fadeInDown,
.hero-slide .fadeInDown {
    animation-name: heroFadeInDown !important;
}

.ch-header .fadeInLeft,
.hero-slide .fadeInLeft {
    animation-name: heroFadeInLeft !important;
}

.ch-header .fadeInRight,
.hero-slide .fadeInRight {
    animation-name: heroFadeInRight !important;
}

.ch-header .fadeInUp,
.hero-slide .fadeInUp {
    animation-name: heroFadeInUp !important;
}

/* Overridden keyframes with bigger travel (extra 100 percent) */
@keyframes heroFadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -25px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes heroFadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-25px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes heroFadeInRight {
    from {
        opacity: 0;
        transform: translate3d(25px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes heroFadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 25px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* =========================
// GSAP Fade in transitions
// set opacity to 0 before js has initialized
// ========================= */

body:not(.elementor-editor-active) .gsapFadeInDown,
body:not(.elementor-editor-active) .gsapFadeInLeft,
body:not(.elementor-editor-active) .gsapFadeInRight,
body:not(.elementor-editor-active) .gsapFadeInUp,
body:not(.elementor-editor-active) .gsapFadeIn {
    opacity: 0;
}