//==========================
//        Animations
//==========================

// Animated
.animated:not(.dialog-widget-content) {
  animation-duration: calc(#{$normal-time}) !important;

  &.animated-fast {
    animation-duration: calc(#{$fast-time}) !important;
  }

  &.animated-slow {
    animation-duration: calc(#{$slow-time}) !important;
  }
}

.animated-fast {
  animation-duration: calc(#{$fast-time}) !important;
}

.animated-slow {
  animation-duration: calc(#{$slow-time}) !important;
}

.h-kenBurnsNeuron {
  transition-property: transform;
  transition-timing-function: linear;

  &--out {
    transform: scale(1.3);
  }

  &--active {
    transition-duration: 20s;

    &.h-kenBurnsNeuron--out {
      transform: scale(1);
    }

    &.h-kenBurnsNeuron--in {
      transform: scale(1.3);
    }
  }
}

body:not(.elementor-editor-active) {
  .h-neuron-animation {
    &--wow {
      &:not(.active) {
        animation-name: none;
        opacity: 0;

        &:not(.swiper-slide-duplicate) {
          visibility: hidden; // Fix of jumping animation in delay
        }
      }

      &.active {
        opacity: 1;
      }
    }
  }
}

.h-neuron-animation {
  &--fadeIn {
    animation-name: fadeIn;
    animation-timing-function: ease;
  }

  &--slideUp {
    animation-name: slideUp;
    animation-timing-function: $authenticMotion;
  }

  &--slideDown {
    animation-name: slideDown;
    animation-timing-function: $authenticMotion;
  }

  &--slideFromLeft {
    animation-name: slideFromLeft;
    animation-timing-function: $authenticMotion;
  }

  &--slideFromRight {
    animation-name: slideFromRight;
    animation-timing-function: $authenticMotion;
  }

  &--scaleIn {
    animation-name: scaleIn;
    animation-timing-function: $authenticMotion;
  }

  &--curtainUp {
    animation-name: curtainUp;
    animation-timing-function: $easeOutQuart;
  }

  &--curtainDown {
    animation-name: curtainDown;
    animation-timing-function: $easeOutQuart;
  }

  &--curtainFromLeft {
    animation-name: curtainFromLeft;
    animation-timing-function: $easeOutQuart;
  }

  &--curtainFromRight {
    animation-name: curtainFromRight;
    animation-timing-function: $easeOutQuart;
  }

  &--specialOne {
    animation-name: specialOne;
    transform-origin: top;
    animation-duration: 700ms;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  &--tiltUp {
    animation-name: tiltUp;
    animation-timing-function: $authenticMotion;
  }

  &--tiltDown {
    animation-name: tiltDown;
    animation-timing-function: $authenticMotion;
  }

  &--clipFromRight {
    animation-name: clipFromRight;
    animation-duration: $slow-time;
    animation-timing-function: $authenticMotion;
  }

  &--clipFromLeft {
    animation-name: clipFromLeft;
    animation-duration: $slow-time;
    animation-timing-function: $authenticMotion;
  }

  &--clipUp {
    animation-name: clipUp;
    animation-duration: $slow-time;
    animation-timing-function: $authenticMotion;
  }

  &--clipBottom {
    animation-name: clipBottom;
    animation-duration: $slow-time;
    animation-timing-function: $authenticMotion;
  }

  &--reverse {
    animation-fill-mode: forwards;
    animation-direction: reverse;
  }
}

// Elementor Button Hover Animation
.elementor-animation {
  &-neuron-animation {
    &--slideRight {
      background-size: 200% 100%;
      background-repeat: no-repeat;
      background-position: right bottom;

      &:hover {
        background-position: left bottom;
      }
    }

    &--slideDown {
      background-size: 100% 200%;
      background-repeat: no-repeat;
      background-position: center bottom;

      &:hover {
        background-position: center top;
      }
    }

    &--slideLine span {
      position: relative;
      overflow: hidden;
      ::after {
        content: '';
        display: block;
        width: 300%;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        background: linear-gradient(
          90deg,
          currentColor 0,
          currentColor 33%,
          transparent 33%,
          transparent 66%,
          currentColor 66%,
          currentColor 100%
        );
        transform: translateX(-66%);
        transition: all 1.2s cubic-bezier(0.53, 0.95, 0.28, 1.03);
      }

      &:hover::after {
        transform: translateX(0);
      }
    }

    &--iconForward {
      .elementor-button-icon {
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      }

      &:hover {
        .elementor-button-icon {
          transform: translateX(5px);
        }
      }
    }

    &--playCircle {
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      svg {
        overflow: visible;
        transform: rotate(-90deg);

        path:last-child {
          stroke-dashoffset: 0;
          stroke-dasharray: 440;
          stroke-width: 2px;
          transition: stroke-dashoffset 1s ease, opacity 1s ease;
        }

        path:first-child {
          transform: rotate(90deg);
          transform-origin: 50% 50%;
          transition: transform 200ms ease-out;
        }
      }

      &:hover {
        svg {
          path:last-child {
            opacity: 1;
            stroke-dashoffset: -440;
          }
          path:first-child {
            transform: scale(1.1) rotate(90deg);
          }
        }
      }
    }
  }
}

// Elementor
.zoomIn {
  animation-name: scaleIn;
  animation-timing-function: $authenticMotion;
}

// fadeIn
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

// slideUp
@keyframes slideUp {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 20);
    opacity: 0;
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
}

// slideDown
@keyframes slideDown {
  0% {
    transform: matrix(1, 0, 0, 1, 0, -20);
    opacity: 0;
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
}

// slideFromLeft
@keyframes slideFromLeft {
  0% {
    transform: matrix(1, 0, 0, 1, -20, 0);
    opacity: 0;
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
}

// slideFromRight
@keyframes slideFromRight {
  0% {
    transform: matrix(1, 0, 0, 1, 20, 0);
    opacity: 0;
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
}

// scaleIn
@keyframes scaleIn {
  0% {
    transform: matrix(0.92, 0, 0, 0.92, 0, 0);
    opacity: 0;
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
}

// Curtain Up
@keyframes curtainUp {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}

// Curtain Down
@keyframes curtainDown {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

// Curtain Left
@keyframes curtainFromLeft {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

// Curtain Right
@keyframes curtainFromRight {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

// clipUp
@keyframes clipUp {
  0% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

// clipBottom
@keyframes clipBottom {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

// clipFromLeft
@keyframes clipFromLeft {
  0% {
    clip-path: polygon(0 0, 0 0, 0% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

// clipFromRight
@keyframes clipFromRight {
  0% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

// tiltUp
@keyframes tiltUp {
  0% {
    transform: matrix(0.92, 0.03, 0, 0.92, 0, 20);
    opacity: 0;
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
}

// tiltDown
@keyframes tiltDown {
  0% {
    transform: matrix(0.92, -0.03, 0, 0.92, 0, 20);
    opacity: 0;
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
}

// specialOne
@keyframes specialOne {
  0% {
    transform: rotateX(75deg) rotateY(10deg) rotateZ(-9deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
  }
}

// Rotate
@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
