/home/moonrcjl/template.moontelict.com/maxfy/assets/scss/components/_custom-animation.scss
@use '../utils' as *;

/*----------------------------------------*/
/*  2.5 Custom Animation
/*----------------------------------------*/



.mtFadeInUp {
  opacity: 0; /* Start invisible */
  animation: mtFadeInUp 2s ease-out forwards; /* 2 seconds duration, ease-out effect */
}
@keyframes mtFadeInUp {
  0% {
      opacity: 0;
      transform: translateY(30px); /* Start slightly below */
  }
  100% {
      opacity: 1;
      transform: translateY(0); /* End at original position */
  }
}


@keyframes mtslideInUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .mtfadeInLeft {
    opacity: 0; /* Start invisible */
    animation: mtfadeInLeft 2s ease-out forwards; /* 2 seconds duration, ease-out effect */
  }
  @keyframes mtfadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px); /* Start slightly to the left */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* End at original position */
    }
}

  .mtSkillInLeft {
    opacity: 0; /* Start invisible */
    animation: mtSkillInLeft 2s ease-out forwards; /* 2 seconds duration, ease-out effect */
  }
  @keyframes mtSkillInLeft {
    0% {
        opacity: 0;
        transform: translateX(-300px); /* Start slightly to the left */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* End at original position */
    }
}



  .slideinup{
    -webkit-animation-name:slideinup;
    animation-name:slideinup
}
@keyframes slideinup {
    0% {
      opacity: 0;
      transform: translateY(70px);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes slideinright {
    0% {
      opacity: 0;
      transform: translateX(70px);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes slideindown {
    0% {
      opacity: 0;
      transform: translateY(-70px);
    }
    100% {
      transform: translateY(0);
    }
  }

.slideinleft{
    -webkit-animation-name:slideinleft;
    animation-name:slideinleft
}
  @keyframes slideinleft {
    0% {
      opacity: 0;
      transform: translateX(-70px);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes slidebottomright {
    0% {
      opacity: 0;
      transform: translateX(100px) translateY(100px);
    }
    100% {
      transform: translateX(0) translateY(0);
    }
  }
  @keyframes slidetopleft {
    0% {
      opacity: 0;
      transform: translateX(-100px) translateY(-100px);
    }
    100% {
      transform: translateX(0) translateY(0);
    }
  }
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
    0% {
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-top-color: transparent;
      border-left-color: transparent;
    }
    75% {
      border-top-color: #fff;
      border-left-color: #fff;
      border-right-color: #fff;
      border-bottom-color: transparent;
    }
    100% {
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-top-color: transparent;
      border-left-color: transparent;
    }
  }
  /*img-animation**********************/
  .img-custom-anim-right {
    animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
    opacity: 0;
  }
  
  @keyframes img-anim-right {
    0% {
      transform: translateX(5%);
      clip-path: inset(0 0 0 100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }
  .img-custom-anim-left {
    animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
    opacity: 0;
  }
  
  @keyframes img-anim-left {
    0% {
      transform: translateX(-5%);
      clip-path: inset(0 100% 0 0);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }
  .img-custom-anim-top {
    animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 0;
  }
  
  @keyframes img-anim-top {
    0% {
      transform: translateY(-5%);
      clip-path: inset(0 0 100% 0);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }

  // start shap Y Animation
@keyframes mttranslateY2{
	0% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}

@keyframes mttranslateX2{
	0% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
  }
  100% {
    -webkit-transform: translateX(40px);
    -moz-transform: translateX(40px);
    -ms-transform: translateX(40px);
    -o-transform: translateX(40px);
    transform: translateX(40px);
  }
}

@include keyframes(borderanimate2){
    0% {
        transform: translate(-50%, -50%) scale(.8);
    }
	60%{
		opacity: 1;
	}
      100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
      }
}

@include keyframes(mt-rotate-center){
    0% {
		@include transform(rotate(0));
    }
    100% {
		@include transform(rotate(360deg));
    }
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

// Start Scaling Animation
@keyframes mt__scalingAnimation {
  0% {
    scale: 100%;
  }

  33.333% {
    scale: 0.5;
  }

  50% {
    scale: 0.7;
  }

  66.666% {
    scale: 0.9;
  }

  100% {
    scale: 100%;
  }
}