/*
* style.css 
* Example CSS for Animation - look to Elementor keyframes (defualt things) to copy and overrid it.
* https://gist.github.com/stoffl6781/d28ed53e2e350e7b89e78c6e2f2471de
*/

.lueurSVG {
  clip-path: inset(-60px 0% 100% -60px);
}

/* Custom Slide Animations */
.customSlideDown:not(.lueur) {
  animation-name: customSlideDown;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.customSlideDown.lueur .elementor-heading-title {
  animation-name: customSlideDown;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-duration: 1.25s;
}

.customSlideDown.lueur.animated .elementor-heading-title {
  animation-play-state: running;
}

.customSlideDown.lueur .lueurSVG {
  animation: clipPathAnimation 2500ms linear forwards;
}

@keyframes customSlideDown {
  0% {
    filter: opacity(0);
    transform: translate3d(0, 15px, 0);
    /* transform: translateY(15px) */
  }
  100% {
    filter: opacity(1);
    transform: translate3d(0, 0, 0);
    /* transform: translateY(0) */
  }
}

.customSlideleft:not(.lueur) {
  animation-name: customSlideLeft;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.customSlideleft.lueur .elementor-heading-title {
  animation-name: customSlideLeft;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-duration: 1.25s;
}

.customSlideleft.lueur.animated .elementor-heading-title {
  animation-duration: 1.25s;
  animation-play-state: running;
}

.customSlideleft.lueur .lueurSVG {
  animation: clipPathAnimation 2500ms linear forwards;
}

@keyframes customSlideLeft {
  0% {
    filter: opacity(0);
    /* transform: translateX(-15px); */
    transform: translate3d(-15px, 0, 0);
  }
  100% {
    filter: opacity(1);
    /* transform: translateX(0px); */
    transform: translate3d(0, 0, 0);
  }
}

.customSlideRight:not(.lueur) {
  animation-name: customSlideRight;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.customSlideRight.lueur .elementor-heading-title {
  animation-name: customSlideRight;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.customSlideRight.lueur.animated .elementor-heading-title {
  animation-duration: 1.25s;
  animation-play-state: running;
}

.customSlideRight.lueur .lueurSVG {
  animation: clipPathAnimation 2500ms linear forwards;
}

@keyframes customSlideRight {
  0% {
    filter: opacity(0);
    /* transform: translateX(15px); */
    transform: translate3d(15px, 0, 0);
  }
  100% {
    filter: opacity(1);
    /* transform: translateX(0px); */
    transform: translate3d(0, 0, 0);
  }
}

.customSlideUp:not(.lueur) {
  animation-name: customSlideUp;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.customSlideUp.lueur .elementor-heading-title {
  animation-name: customSlideUp;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.customSlideUp.lueur.animated .elementor-heading-title {
  animation-duration: 1.25s;
  animation-play-state: running;
}
.customSlideUp.lueur .lueurSVG {
  animation: clipPathAnimation 2500ms linear forwards;
}

@keyframes customSlideUp {
  0% {
    filter: opacity(0);
    /* transform: translateY(-15px); */
    transform: translate3d(0, -15px, 0);
  }
  100% {
    filter: opacity(1);
    /* transform: translateY(0px); */
    transform: translate3d(0, 0, 0);
  }
}

.elementor-invisible.lueur {
  visibility: visible !important;
}

.elementor-invisible.lueur .elementor-heading-title {
  visibility: hidden;
}