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

@keyframes gift-dot-y {
	0% {
		transform: translateY(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	100% {
		transform: translateY(-80px);
		opacity: 0;
	}
}
@keyframes gift-dot-y2 {
	0% {
		transform: translateY(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	100% {
		transform: translateY(-210px);
		opacity: 0;
	}
}

@keyframes gift-dot-x {
	0% {
		transform: translateX(0);
	}
	33% {
		transform: translateX(-5px);
	}
	66% {
		transform: translateX(3px);
	}
	100% {
		transform: translateX(-2px);
	}
}

@keyframes star-shimmer {
	0% {
		transform: scale(0.8);
	}
	50% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.8);
	}
}

@keyframes meter-move-1 {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(100px);
	}
	100% {
		transform: translateY(0px);
	}
}

@keyframes meter-move-2 {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(50px);
	}
	100% {
		transform: translateY(0px);
	}
}

.hero {
	.streak-complete {
		position: absolute;
		width: 40px;
		height: 30px;
		// background-color: $color_pink;
		left: 0;
		top: 0;
		z-index: 3;

		.dot {
			position: absolute;
			opacity: 0;

			img {
				width: 18px;
				height: 18px;
			}
		}

		&.one {
			.dot {
				&:nth-child(1) {
					top: 73px;
					left: 38px;
				}

				&:nth-child(2) {
					top: 70px;
					left: 30px;
				}

				&:nth-child(3) {
					top: 70px;
					left: 30px;
				}
			}
		}
	}
}
