@use '../utils' as *;
/*----------------------------------------*/
/*  2.1 Animations
/*----------------------------------------*/

@keyframes headerSlideDown {
    0% {
     margin-top:-150px
    }
    100% {
     margin-top:0
    }
}

@keyframes bar_anim {
	0%, 100% {
	  -webkit-clip-path: inset(-2px 0);
	  clip-path: inset(-2px 0);
	}
	42% {
	  -webkit-clip-path: inset(-2px 0 -2px 100%);
	  clip-path: inset(-2px 0 -2px 100%);
	}
	43% {
	  -webkit-clip-path: inset(-2px 100% -2px 0);
	  clip-path: inset(-2px 100% -2px 0);
	}
}



  
.uncover{
	display: flex;
	flex-direction: row;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
.uncover_slice{
	height: 100%;
	flex-grow: 1;
	background: #ffffff;
}
.box {
    position: relative;
    overflow: hidden;
}


.line-1 {
	stroke-dasharray: 1300;
	stroke-dashoffset: 2500;
	animation: dash 5s linear forwards infinite;
}
.line-2 {
	stroke-dasharray: 1000;
	stroke-dashoffset: 2000;
	animation: dash 5s linear forwards infinite;
}
@keyframes dash {
	to {
	  stroke-dashoffset: 0px;
	  stroke-dasharray: 1000;
	}
}
@keyframes dash-2 {
	to {
	  stroke-dashoffset: 0px;
	  stroke-dasharray: 3000;
	}
}

@include keyframes(tpSwing){
	0% {
			@include transform(rotate(6deg));
	}
	100% {
			@include transform(rotate(-6deg));
	}
}
.tpswing{
	animation: tpSwing 2s linear infinite alternate;
}

@keyframes tp_animation_spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}
.tp-live-anim-spin {
  animation: tp_animation_spin 6s linear infinite
}

@keyframes tdfadeUp {
	0% {
	  opacity: 0;
	  -webkit-transform: translateY(50px);
	  -ms-transform: translateY(50px);
	  transform: translateY(50px);
	}
  
	100% {
	  opacity: 1;
	  -webkit-transform: translateY(0);
	  -ms-transform: translateY(0);
	  transform: translateY(0);
	}

}

@keyframes mymove{
  0% {
    transform: scale(0.9);
  }

  50% {
      transform: scale(1);
  }
  100% {
      transform: scale(0.9);
  }
}

@keyframes levitate-lg {
  0% {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
  50% {
    -webkit-transform: translateY(30px) scale(1.01);
    transform: translateY(30px) scale(1.01);
  }
  100% {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}

@keyframes popups{
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes color-change {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}
@include keyframes(sliderTitle3){
	0% {background-position: 0%}
  100% {background-position: 100%}
}

.title-slide-gradient{
  @include gradient((90deg, #201b17 0%, #f96501 50%, #201b17 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  -moz-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate;
  -webkit-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate;
  animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate;
  background-size: 150% 150%;
}

@include keyframes(tpshake){
    10% {
        transform: translateY(-10px);
    }
    50% {
        transform: skew(15deg);
    }
    80% {
        transform: rotate(10deg);
    }
    100% {
        transform: translate(0);
    }
}
.tpshake{
	transition: all .4s ease;
}
.tpshake-wrap{
	&:hover{
		& .tpshake{
			animation-name: tpshake;
			animation-timing-function: ease-in-out;
			animation-duration: 0.4s;
			animation-iteration-count: 1;
		}
	}
}

@include keyframes(ripple-red){
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3)
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(2241, 42, 2, 0)
  }
}
.video-animetion{
  -webkit-transition: .5s -webkit-animation ripple-red 1s linear infinite;
  animation: ripple-red 1s linear infinite;
  -webkit-transition: .5s;
}

@keyframes upslide {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-20px);
	}
	60% {
		transform: translateY(-10px);
	}
}
.upslide{
	animation: upslide 4s linear forwards infinite alternate;
}

@keyframes upslide-1 {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-8px);
	}
	60% {
		transform: translateY(-4px);
	}
}
.upslide-1{
	animation: upslide-1 4s linear forwards infinite alternate;
}

@keyframes arrowLineRotation {
	to {
		transform: rotate(180deg);
	}
}

@keyframes arrowLineRotationRev {
	to {
		transform: rotate(-180deg);
	}
}

@keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }

    100% {
        stroke-dashoffset: 0;
    }
}