/*----------------------------------------
	04. animation css
----------------------------------------*/

@use "../abstract" as *;


// icon animation 
@keyframes iconltr {
	49% {
		transform: translateX(30%);
	}

	50% {
		opacity: 0;
		transform: translateX(-30%);
	}

	51% {
		opacity: 1;
	}
}

@keyframes iconrtl {
	49% {
		transform: translateX(-30%);
	}

	50% {
		opacity: 0;
		transform: translateX(30%);
	}

	51% {
		opacity: 1;
	}
}

@keyframes iconlbtr {
	49% {
		transform: translateX(30%) translateY(-30%);
	}

	50% {
		opacity: 0;
		transform: translateX(-30%) translateY(30%);
	}

	51% {
		opacity: 1;
	}
}



// text animation 
@keyframes textup {
	49% {
		transform: translateY(-10px);
	}

	50% {
		opacity: 0;
		transform: translateY(10px);
	}

	51% {
		opacity: 1;
	}
}

/* line animation css - start
================================================== */


.line_wrap {
	top: 0px;
	inset-inline-start: calc(50% - 875px);
	bottom: 0px;
	width: 120px;
	z-index: 1;
	display: block;
	position: absolute;
	border-left: 1px solid #E8E8E8;

	@media #{$xl} {
		inset-inline-start: calc(50% - 710px);
		width: 100px;
	}
}

.line_wrap:before {
	width: 1px;
	left: -1px;
	content: "";
	height: 100px;
	position: absolute;
	animation: scroll1 15s linear infinite;
	background-image: var(--clr-theme-2);
}

.line_wrap .line_item {
	width: 100%;
	float: left;
	height: 100%;
	position: relative;
	display: inline-block;
	border-right: 1px solid #E8E8E8;
}

.line_wrap .line_item:before {
	width: 1px;
	right: -1px;
	content: "";
	height: 100px;
	position: absolute;
}

.line_wrap .line_item:nth-child(odd):before {
	animation: scroll2 15s linear infinite;
	background-image: linear-gradient(0deg, transparent, #000000);
}

.line_wrap .line_item:nth-child(even):before {
	animation: scroll1 15s ease-out infinite;
	background-image: linear-gradient(0deg, #000000, transparent);
}

.line_wrap.line_white {
	border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.line_wrap.line_white:before {
	background-image: linear-gradient(0deg, #ffffff, transparent);
}

.line_wrap.line_white .line_item {
	border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.line_wrap.line_white .line_item:nth-child(odd):before {
	background-image: linear-gradient(0deg, transparent, #ffffff);
}

.line_wrap.line_white .line_item:nth-child(even):before {
	background-image: linear-gradient(0deg, #ffffff, transparent);
}

@keyframes scroll1 {
	0% {
		top: 0px;
		opacity: 1;
	}

	50% {
		top: 50%;
	}

	100% {
		top: 100%;
		opacity: 1;
	}
}

@keyframes scroll2 {
	0% {
		opacity: 1;
		bottom: 0px;
	}

	50% {
		bottom: 50%;
	}

	100% {
		bottom: 100%;
		opacity: 1;
	}
}

/* line animation css - end
================================================== */


// body-line animation
.body-line {
	@media #{$lg,$md, $sm, $xs} {
		display: none;
	}



	&:before {
		display: none;
	}

	&.line_wrap .line_item::before {
		display: none;
	}
}

// banner-line animation 
.banner-line {
	@media #{$lg,$md,$sm, $xs} {
		display: none;
	}

	&.line_wrap {
		z-index: 2;
		border-left: 1px solid #2D2D2D;
		overflow-Y: clip;
	}

	&.line_wrap::before,
	&.line_wrap::after {
		width: auto;
		left: 1px;
		content: "\f101";
		font-family: flaticon_armado_-_militery_service_themeset !important;
		height: 10px;
		background: transparent;
		background-image: none;
		background-image: none;
		position: absolute;
		animation: scroll1 15s linear infinite;
		color: var(--clr-theme-2);
		transform: rotate(90deg);
	}

	&.line_wrap::after {
		animation-delay: 8s;
		top: -10px;
	}

	&.line_wrap .line_item {
		border-right: 1px solid #2D2D2D;
	}

	&.line_wrap .line_item::before,
	&.line_wrap .line_item::after {
		width: auto;
		right: 1px;
		content: "\f101";
		font-family: flaticon_armado_-_militery_service_themeset !important;
		height: 10px;
		background: transparent;
		background-image: none;
		position: absolute;
		animation: scroll2 15s linear infinite;
		color: var(--clr-theme-2);
		transform: rotate(-90deg);
	}

	&.line_wrap .line_item::after {
		animation-delay: 8s;
		bottom: -10px;
	}
}



// animation rotate
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}


// border-animation 
.border-animation {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.border-animation::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	box-sizing: border-box;
	height: 0;
	border-top: 1px solid transparent;
	border-left: 1px solid transparent;
	transition: all .5s ease;
}

.border-animation::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	box-sizing: border-box;
	height: 0;
	border-bottom: 1px solid transparent;
	border-right: 1px solid transparent;
	transition: all .5s ease;
}

.single-feature:hover .border-animation::after,
.single-feature:hover .border-animation::before {
	border-color: var(--clr-theme-2);
	width: 100%;
	height: 100%;
}

// translate horizontal animation
@include keyframes(translateX) {
	0% {
		@include transform(translateX(-80px));
	}

	100% {
		@include transform(translateX(40px));
	}
}

// translate vertical animation
@include keyframes(translateY) {
	0% {
		@include transform(translateY(-80px));
	}

	100% {
		@include transform(translateY(40px));
	}
}

@include keyframes(translateY) {
	0% {
		@include transform(translateY(-40px));
	}

	100% {
		@include transform(translateY(0px));
	}
}


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

	100% {
		width: 100%;
	}
}


// play-svg style 
.play-svg {
	width: 160px;

	&:hover {
		.st3 {
			// animation: dash 3s linear;
			stroke-dashoffset: 0;
		}
	}

	.st0 {
		fill: none;
		stroke: #FFFFFF;
		stroke-width: 4;
		stroke-linecap: round;
		stroke-miterlimit: 10;
	}

	.st1 {
		clip-path: url(#SVGID_2_);
	}

	.st2 {
		fill: #FFAF00;
	}

	.st3 {
		fill: none;
		stroke: #FFAF00;
		stroke-width: 4;
		stroke-linecap: round;
		stroke-miterlimit: 10;
		stroke-dasharray: 300;
		stroke-dashoffset: 300;
		transition: .5s;
	}

	@keyframes dash {
		from {
			stroke-dashoffset: 1500;
		}

		to {
			stroke-dashoffset: 0;
		}
	}




}

// panel  
@keyframes panel {

	0% {
		width: 100%;

	}


	100% {
		width: 0;

	}
}

@keyframes panelTop {

	0% {
		height: 100%;

	}


	100% {
		height: 0;

	}
}

@keyframes panelBottom {

	0% {
		height: 100%;

	}


	100% {
		height: 0;

	}
}

// shine 
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}

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

// title-anim 

.title-anim-part-1,
.title-anim-part-2 {
	position: relative;
	display: block;
	width: 100%;
	height: 120px;
	overflow: hidden;

	@media #{$xl} {
		height: 90px;
	}

	@media #{$lg} {
		height: 80px;
	}

	@media #{$md} {
		height: 60px;
	}

	@media #{$sm,$xs} {
		height: 52px;
	}

	@media #{$xxs} {
		height: 40px;
	}
}

.title-anim-part-1 {
	>span {
		position: absolute;


		@media (min-width: 576px) {
			transform: translateY(100%);
		}
	}
}

.title-anim-part-2 {
	>span {
		position: absolute;

		@media (min-width: 576px) {
			transform: translateY(-100%);
		}
	}
}

.swiper-slide-active {
	.title-anim-part-1 {
		>span {
			@media (min-width: 576px) {
				animation: .7s titleAnim .5s ease forwards;
			}
		}
	}

	.title-anim-part-2 {
		>span {
			@media (min-width: 576px) {
				animation: .7s titleAnim .7s ease forwards;
			}
		}
	}
}

@keyframes titleAnim {
	100% {
		transform: translateY(0%);
	}
}

// noise effect style 
.noise-wrapper {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: .1;
	overflow: hidden;
	z-index: -1;
}

.noise {
	position: absolute;
	top: -500px;
	right: -500px;
	bottom: -500px;
	left: -500px;
	background: transparent url(../img/bg/noise.png) 0 0;
	background-size: 320px 320px;
	opacity: .7;
	-webkit-animation: noise 1s steps(8, end) infinite both;
	animation: noise 1s steps(8, end) infinite both;
}

.noise-2 {
	position: absolute;
	top: 0;
	right: -100px;
	bottom: -100px;
	left: -100px;
	right: -100px;
	-webkit-animation: noise 1s steps(8, end) infinite both;
	animation: noise 1s steps(8, end) infinite both;
	height: 100%;
	width: 100%;
	z-index: -1;
}

@-webkit-keyframes noise {
	0% {
		transform: translateX(0px, 0px);
	}

	10% {
		transform: translate(-100px, 100px);
	}

	20% {
		transform: translate(150px, -100px);
	}

	30% {
		transform: translate(-100px, 100px);
	}

	40% {
		transform: translate(100px, -150px);
	}

	50% {
		transform: translate(-100px, 200px);
	}

	60% {
		transform: translate(-200px, -100px);
	}

	70% {
		transform: translateY(50px, 100px);
	}

	80% {
		transform: translate(100px, -150px);
	}

	90% {
		transform: translate(0px, 200px);
	}

	100% {
		transform: translate(-100px, 100px);
	}
}

@keyframes noise {
	0% {
		transform: translateX(0px, 0px);
	}

	10% {
		transform: translate(-100px, 100px);
	}

	20% {
		transform: translate(150px, -100px);
	}

	30% {
		transform: translate(-100px, 100px);
	}

	40% {
		transform: translate(100px, -150px);
	}

	50% {
		transform: translate(-100px, 200px);
	}

	60% {
		transform: translate(-200px, -100px);
	}

	70% {
		transform: translateY(50px, 100px);
	}

	80% {
		transform: translate(100px, -150px);
	}

	90% {
		transform: translate(0px, 200px);
	}

	100% {
		transform: translate(-100px, 100px);
	}
}

/*======================================
Animate slide-left 
========================================*/

@keyframes slide-left {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	to {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

/*======================================
Hero-6 Animation 
========================================*/
.slider-active {

	& .ax-hero6__title,
	& .ax-hero6__sub-title,
	& .hero-btn {
		animation-fill-mode: both;
		animation-name: fadeInUp;
	}
}

.slider-active .ax-hero6__title {
	animation-delay: .6s;
	animation-duration: .8s;
}

.slider-active .ax-hero6__sub-title {
	animation-delay: .8s;
	animation-duration: 1s;
}

.slider-active .hero-btn {
	animation-delay: .9s;
	animation-duration: 1.1s;
}