$hiw0card1: hiw0card1 10s ease-in-out infinite;
$hiw0card2: hiw0card2 10s ease-in-out infinite;
$hiw0card3: hiw0card3 10s ease-in-out infinite;
$hiw0card4: hiw0card4 10s ease-in-out infinite;
.how-to-play {
	&.temp {
		padding: 83px 38px 97px;
		background: $color_purple_2;
		.header {
			margin-bottom: 35px;
			position: relative;
			z-index: 20;
			h2 {
				font-family: $font_secondary;
				font-size: 69px;
				line-height: 69px;
				font-style: italic;
				font-weight: normal;
				text-align: center;
			}
		}
		.content {
			width: 299px;
			margin: 0 auto;
		}
		.item {
			margin-bottom: 34px;
			position: relative;
			&:last-child {
				margin-bottom: 0;
			}
			&::before {
				content: '';
				width: 280px;
				height: calc(100% + 300px);
				display: block;
				position: absolute;
				z-index: 1;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background: url('../img/layout/bg-how-to-play-mobile.svg') no-repeat center center;
				background-size: auto 100%;
			}
			.arrow-right-animation {
				position: relative;
				z-index: 30;
				display: flex;
				align-items: center;
				width: 299px;
				height: 67px;
				margin-bottom: 4px;
				.animation-stage {
					height: 30px;
					width: 102px;
					display: flex;
					justify-content: space-between;
				}
				.dotted-arrow {
					position: relative;
					height: 100%;
					img {
						height: 100%;
						width: auto;
					}
				}
			}
			article {
				border: 1.25px solid $color_blue;
				background-color: $color_purple;
				position: relative;
				padding: 20px 24px;
				min-height: 395px;
				text-align: center;
				z-index: 20;
				.number {
					position: absolute;
					top: 0;
					left: 0;
					height: 57.97px;
					width: 53.74px;
					border: 1.25px solid $color_blue;
					border-top: none;
					border-left: none;
					text-align: center;
					line-height: 57.97px;
					font-size: 30px;
					color: #651fff;
					font-family: $font_score;
				}
				.thumb {
					width: 234px;
					margin: 0 auto 18px;
					display: flex;
					align-items: flex-end;
				}
				h3 {
					font-family: $font_secondary;
					color: $color_pink;
					font-style: italic;
					font-weight: normal;
					font-size: 30px;
					line-height: 33px;
					margin-bottom: 10px;
				}
				p {
					font-size: 15px;
					line-height: 27px;
					.pink {
						font-weight: bold;
					}
				}
			}
			.animation-stage {
				position: relative;
			}
			&.view {
				.card1 {
					animation: $hiw0card1;
				}
				.card2 {
					animation: $hiw0card2;
				}
				.card3 {
					animation: $hiw0card3;
				}
				.card4 {
					animation: $hiw0card4;
				}
			}
			.hiw-0 {
				.animation-stage {
					width: 234px;
					height: 234px;
				}
				img {
					max-width: 100%;
					width: auto;
					height: auto;
				}
				.static {
					position: relative;
					top: -7px;
					width: 246px;
					height: 246px;
				}
				.screen {
					overflow: hidden;
					position: absolute;
					width: 101px;
					height: 200px;
					top: 1px;
					left: 70px;
				}
				.card {
					position: absolute;
					width: 89px;
					height: 69px;
					left: 6px;
				}
				.card1,
				.card3 {
					top: 26px;
					transform: translate(250px, 0);
				}
				.card2,
				.card4 {
					top: 107px;
					transform: translate(250px, 0);
				}

				.dot {
					position: absolute;
					opacity: 0;
					top: 20px;
					left: 70px;

					img {
						width: 18px;
						height: 18px;
					}
				}
			}
			.hiw-1 {
				.animation-stage {
					width: 234px;
					height: 234px;
				}
				img {
					max-width: 100%;
					width: auto;
					height: auto;
				}
				.static {
					position: relative;
					top: -7px;
					width: 246px;
					height: 246px;
				}

				.text {
					overflow: hidden;
					position: absolute;
					width: 86px;
					height: 37px;
					top: 123px;
					left: 77px;
				}

				.letter-a {
					position: absolute;
					width: 6px;
					height: 14px;
					top: 87px;
					left: 93px;

					svg {
						path {
							fill: #310167;
						}
					}
				}

				.correct {
					position: absolute;
					width: 39px;
					height: 39px;
					top: 42px;
					left: 78px;
					opacity: 0;
				}

				.check {
					position: absolute;
					width: 16px;
					height: 13px;
					top: 53px;
					left: 90px;
					transform: scale(0);
				}

				.dot {
					position: absolute;
					opacity: 0;

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

					&:nth-child(1) {
						top: 55px;
						left: 90px;
					}

					&:nth-child(2) {
						top: 55px;
						left: 90px;
					}

					&:nth-child(3) {
						top: 55px;
						left: 90px;
					}
				}
			}
			.hiw-2 {
				.animation-stage {
					width: 234px;
					height: 234px;
				}

				.static {
					position: relative;
					width: 234px;
					height: 234px;

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

				.streaks {
					position: absolute;
					border-radius: 50%;
					top: 0;
					left: 5px;
					overflow: hidden;
					width: 234px;
					height: 234px;

					.streak {
						position: absolute;
						width: 38px;
						height: 224px;

						&:nth-child(1) {
							left: 23px-5px;
							top: 59px;
						}

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

						&:nth-child(3) {
							left: 118px-5px;
							top: 59px;
						}

						&:nth-child(4) {
							left: 166px-5px;
							top: 59px;
						}

						.dot {
							position: absolute;
							left: 13px;
							top: 10px;
							width: 12px;
							height: 12px;
						}
					}
				}

				.dot-container {
					.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;
							}
						}

						.star-three {
							position: absolute;
							left: 74px;
							top: 80px;
							opacity: 0;
						}
					}

					&.two {
						.dot {
							&:nth-child(1) {
								top: 73px;
								left: 80px;
								display: none;
							}

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

							&:nth-child(3) {
								top: 70px;
								left: 80px;
								display: none;
							}
						}

						.star-three {
							position: absolute;
							left: 125px;
							top: 80px;
							opacity: 0;
							display: none;
						}
					}

					&.three {
						.dot {
							&:nth-child(1) {
								top: 73px;
								left: 128px;
								display: none;
							}

							&:nth-child(2) {
								top: 72px;
								left: 127px;
							}

							&:nth-child(3) {
								top: 76px;
								left: 128px;
							}
						}

						.star-three {
							position: absolute;
							left: 152px;
							top: 95px;
							opacity: 0;
							width: 10px;
							height: 10px;
						}
					}

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

							&:nth-child(2) {
								top: 70px;
								left: 175px;
								display: none;
							}

							&:nth-child(3) {
								top: 75px;
								left: 175px;
							}
						}

						.star-three {
							position: absolute;
							left: 172px;
							top: 85px;
							opacity: 0;
						}
					}
				}
			}

			.hiw-3 {
				.animation-stage {
					width: 234px;
					height: 234px;
				}

				.static {
					position: relative;
					width: 234px;
					height: 234px;

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

				.gift {
					position: absolute;
					top: 27px;
					left: 44px;
				}

				.star-one {
					position: absolute;
					opacity: 0;

					&.one {
						left: 100px;
						top: 90px;
					}
				}

				.star-two {
					position: absolute;
					opacity: 0;

					&.one {
						left: 140px;
						top: 80px;
					}
				}

				.star-three {
					position: absolute;
					opacity: 0;

					&.one {
						left: 120px;
						top: 90px;
					}
				}

				.dots {
					.dot {
						position: absolute;
						opacity: 0;

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

						&:nth-child(1) {
							top: 90px;
							left: 100px;
						}

						&:nth-child(2) {
							top: 90px;
							left: 120px;
						}

						&:nth-child(3) {
							top: 90px;
							left: 120px;
						}

						&:nth-child(4) {
							top: 90px;
							left: 150px;
						}
					}
				}
			}
		}
		.you-win {
			position: absolute;
			width: 191px;
			height: 82px;
			top: -35px;
			right: -40px;

			svg {
				width: 50px;
				height: 42px;
				right: 15px;
				top: 16px;
				position: absolute;
			}
		}
		@include media-breakpoint-up(md) {
			padding: 117.25px 40px 112.43px;
			.header {
				margin-bottom: 40px;
				h2 {
					font-size: 75px;
					line-height: 78px;
				}
			}
			.content {
				width: 672px;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
			.item {
				width: calc(50% - 13px);
				margin-bottom: 22px;
				&::before {
					width: 305.03px;
					height: calc(100% + 236px);
					background: url('../img/layout/bg-how-to-play.svg') no-repeat center center;
					background-size: 100% auto;
					top: auto;
					bottom: -174px;
					transform: translateX(-50%);
				}
				.arrow-right-animation {
					height: 69px;
					margin-bottom: 9px;
				}
				article {
					min-height: 463.49px;
					.thumb {
						margin-bottom: 20px;
					}
				}
			}
		}
		@include media-breakpoint-up(xl) {
			padding: 211px 40px 230px;
			.header {
				margin-bottom: 82px;
				h2 {
					font-size: 100px;
					line-height: 103px;
				}
			}
			.content {
				width: 100%;
				max-width: 1502px;
			}
			.item {
				width: calc(25% - 22px);
				margin-bottom: 0;
				&::before {
					width: 334px;
					height: 815px;
				}
				.arrow-right-animation {
					margin-bottom: 17px;
				}
				article {
					min-height: 470px;
					.thumb {
						margin-bottom: 22px;
					}
				}
			}
		}
	}
}

@keyframes hiw0card1 {
	0% {
		transform: translate(250px, 0);
	}
	10% {
		transform: translate(0, 0);
	}
	37.5% {
		transform: translate(0, 0);
	}
	47.5% {
		transform: translate(-250%, 0);
	}
	100% {
		transform: translate(-250%, 0);
	}
}
@keyframes hiw0card2 {
	0% {
		transform: translate(250px, 0);
	}
	2.5% {
		transform: translate(250px, 0);
	}
	12.5% {
		transform: translate(0, 0);
	}
	40% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(-250%, 0);
	}
	100% {
		transform: translate(-250%, 0);
	}
}
@keyframes hiw0card3 {
	0% {
		transform: translate(250px);
	}
	52.5% {
		transform: translate(250px);
	}
	62.5% {
		transform: translate(0, 0);
	}
	90% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(-250%, 0);
	}
}
@keyframes hiw0card4 {
	0% {
		transform: translate(250px);
	}
	50% {
		transform: translate(250px);
	}
	60% {
		transform: translate(0, 0);
	}
	87.5% {
		transform: translate(0, 0);
	}
	97.5% {
		transform: translate(-250%, 0);
	}
	100% {
		transform: translate(-250%, 0);
	}
}
