@use "../utilities" as *;

/* START: Animate CSS */
@-webkit-keyframes sticky {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0%);
	}
}

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

@keyframes rotateImg {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@keyframes rotateImg-2 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

@keyframes rotateImg-two {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 var(--tj-color-common-white);
	}
	100% {
		box-shadow: 0 0 0 25px transparent;
	}
}

@keyframes pulse-two {
	0% {
		box-shadow: 0 0 0 0 rgba(247, 247, 247, 0.3);
	}
	100% {
		box-shadow: 0 0 0 25px transparent;
	}
}

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

	50% {
		transform: translateY(30px);
	}
}

@keyframes move-two {
	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(30px);
	}
}

@keyframes zoom-effect {
	0%,
	100% {
		transform: scale(1, 1);
	}
	50% {
		transform: scale(1.3, 1.3);
	}
}

@keyframes shine {
	0% {
		transform: skewX(-25deg) translateX(0);
	}
	100% {
		transform: skewX(-25deg) translateX(250%);
	}
}

@keyframes wobble-horizontal-hover {
	16.65% {
		transform: translateX(5px);
	}
	33.3% {
		transform: translateX(-3px);
	}
	49.95% {
		transform: translateX(4px);
	}
	66.6% {
		transform: translateX(-2px);
	}
	83.25% {
		transform: translateX(1px);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% - 40px));
	}
}
@keyframes rotateMarquee {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

@keyframes bounce {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateX(0) rotate(90deg);
	}
	40% {
		transform: translateX(6px) rotate(90deg);
	}
	60% {
		transform: translateX(3px) rotate(90deg);
	}
}
@keyframes bounce2 {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(6px);
	}
	60% {
		transform: translateY(3px);
	}
}
/* !END: Animate CSS */