@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;
  }
}


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

@keyframes borderanimate2 {
  0% {
    transform: translate(-50%, -50%) scale(.8);
  }

  60% {
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}



// 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);
  }
}

// End shap Y Animation