@use '../utils' as *;

/*=============================
    01. Animation
===============================*/
.td-arrow-angle {
	--qode-hover-move-x: 110%;
	--qode-hover-move-y: 100%;
}
.td-arrow-svg-top-right {
	fill: currentColor;
	stroke: none;
}
.td-left-right{
    & .td-text{
        transform: translateY(1px);
    }
}
.td-arrow-angle path {
	transition: transform .38s cubic-bezier(.37,.08,.02,.93),opacity .18s ease-out;
}
.td-arrow-angle path:nth-of-type(1) {
	transform: translateX(0) translateY(0);
	opacity: 1;
	transition-delay: .15s,.15s;
}
.td-arrow-angle path:nth-of-type(2) {
	transform: translateX(calc(-1 * var(--qode-hover-move-x))) translateY(var(--qode-hover-move-y));
	opacity: .5;
	transition-delay: 0s,0s;
}
.td-left-right:hover .td-arrow-angle path:nth-of-type(2) {
	transform: translateX(0) translateY(0);
	opacity: 1;
	transition-delay: .15s,.15s;
}
.td-left-right:hover .td-arrow-angle path:nth-of-type(1) {
	transform: translateX(var(--qode-hover-move-x)) translateY(calc(-1 * var(--qode-hover-move-y)));
	opacity: 0;
	transition-delay: 0s,0s;
}

@keyframes zoom {
	0% {
			-webkit-transform: scale(1);
			transform: scale(1)
	}

	50% {
			-webkit-transform: scale(1.1);
			transform: scale(1.1)
	}

	100% {
			-webkit-transform: scale(1);
			transform: scale(1)
	}
}

@keyframes dash {
	to {
	  stroke-dashoffset: 0px;
	  stroke-dasharray: 3000;
	}
  }

// about text animation
@include keyframes(about-text){
	0% {
        width: 0;
    }

    100% {
		width: 100%;
    }
}

// borderanimate2
@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(rotate-infinite-2){
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
.rotate-infinite-2{
	-webkit-animation: rotate-infinite-2 15s linear infinite;
	animation: rotate-infinite-2 15s linear infinite;
}

@include keyframes(rotate-infinite){
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(-360deg);
	}
}
.rotate-infinite{
	-webkit-animation: rotate-infinite 15s linear infinite;
	animation: rotate-infinite 15s linear infinite;
}
@keyframes headerSlideDown {
	0% {
	 margin-top:-150px
	}
	100% {
	 margin-top:0
	}
}

 .td-animetion-right {
    animation: td-animetion-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
    opacity: 0;
  }

  @keyframes td-animetion-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;
    }
  }
  .td-animetion-left {
    animation: td-animetion-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
    opacity: 0;
  }

  @keyframes td-animetion-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;
    }
  }
  .td-animetion-top {
    animation: td-animetion-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 0;
  }

  @keyframes td-animetion-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;
    }
  }


// tdupdown
@keyframes tdupdown {
  0% {
    transform: translateY(0)
  }

  to {
    transform: translateY(-20px)
  }
}
.up-down{
  animation: tdupdown 1.5s infinite alternate;
}

// tdtranslateX2
@keyframes tdtranslateX2 {
  0% {
    transform: translateX(-30px)
  }

  to {
    transform: translateX(20px)
  }
}
.tdtranslateX2{
	animation: tdtranslateX2 4s infinite alternate;
}
// tdtranslateY2
@keyframes tptranslateY2 {
  0% {
    transform: translateY(-30px)
  }

  to {
    transform: translateY(20px)
  }
}
.tdtranslateY2{
  animation: tdtranslateY2 4s infinite alternate forwards;
}