@use '../utils' as *;

/*----------------------------------------*/
/*   Animations
/*----------------------------------------*/
@keyframes slideInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
		-ms-transform: translateX(-2000px);
		transform: translateX(-2000px);
	}

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

.slideInLeft {
	-webkit-animation-name: slideInLeft;
	animation-name: slideInLeft;
	animation-timeline: view();
    animation-range: entry 20% cover 40%;
}



/* text-slide */
@keyframes text-slide-animation-1 {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

/* text-slide */
@keyframes text-slide-animation-2 {
    0% {
        -webkit-transform: translateX(-90%);
        transform: translateX(-90%);
    }
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@keyframes pulse-yellow {
	0% {
		box-shadow: 0 0 0 0 rgba($color: #D0F701, $alpha: .4), 0 0 0 0 rgba($color: #D0F701, $alpha: .4);
	}

	40% {
		box-shadow: 0 0 0 40px rgba($color: #D0F701, $alpha: 0), 0 0 0 0 rgba($color: #D0F701, $alpha: .4);
	}

	80% {
		box-shadow: 0 0 0 40px rgba($color: #D0F701, $alpha: 0), 0 0 0 30px rgba($color: #D0F701, $alpha: 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba($color: #D0F701, $alpha: 0), 0 0 0 30px rgba($color: #D0F701, $alpha: 0);
	}
}

@keyframes pulse-teal {
	0% {
		box-shadow: 0 0 0 0 rgba($color: #0F756D, $alpha: .4), 0 0 0 0 rgba($color: #0F756D, $alpha: .4);
	}

	40% {
		box-shadow: 0 0 0 40px rgba($color: #0F756D, $alpha: 0), 0 0 0 0 rgba($color: #0F756D, $alpha: .4);
	}

	80% {
		box-shadow: 0 0 0 40px rgba($color: #0F756D, $alpha: 0), 0 0 0 30px rgba($color: #0F756D, $alpha: 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba($color: #0F756D, $alpha: 0), 0 0 0 30px rgba($color: #0F756D, $alpha: 0);
	}
}

@keyframes pulse-white {
	0% {
		box-shadow: 0 0 0 0 rgba($color: #fff, $alpha: .4), 0 0 0 0 rgba($color: #fff, $alpha: .4);
	}

	40% {
		box-shadow: 0 0 0 40px rgba($color: #fff, $alpha: 0), 0 0 0 0 rgba($color: #fff, $alpha: .4);
	}

	80% {
		box-shadow: 0 0 0 40px rgba($color: #fff, $alpha: 0), 0 0 0 30px rgba($color: #fff, $alpha: 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba($color: #fff, $alpha: 0), 0 0 0 30px rgba($color: #fff, $alpha: 0);
	}
}

@keyframes pulse-green {
	0% {
		box-shadow: 0 0 0 0 rgba($color: #88DE7D, $alpha: .4), 0 0 0 0 rgba($color: #88DE7D, $alpha: .4);
	}

	40% {
		box-shadow: 0 0 0 40px rgba($color: #88DE7D, $alpha: 0), 0 0 0 0 rgba($color: #88DE7D, $alpha: .4);
	}

	80% {
		box-shadow: 0 0 0 40px rgba($color: #88DE7D, $alpha: 0), 0 0 0 30px rgba($color: #88DE7D, $alpha: 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba($color: #88DE7D, $alpha: 0), 0 0 0 30px rgba($color: #88DE7D, $alpha: 0);
	}
}



.pulse-yellow {
	animation: pulse-yellow 3s linear infinite;
}
.pulse-teal {
	animation: pulse-teal 3s linear infinite;
}
.pulse-white {
	animation: pulse-white 3s linear infinite;
}
.pulse-green {
	animation: pulse-green 3s linear infinite;
}

@keyframes oit-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes oit-fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes oit-growBar {
  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    transform: scaleY(1);
  }
}