@import url(style.css);

wrapper.scroll {
	display: block;
	scroll-snap-type: y mandatory;
	overflow-y: scroll;
	scrollbar-width: none;
	height: 100vh;
	height: 100dvh;
	&::-webkit-scrollbar {
		display: none;
	}
}

section {
	display: block;
	position: relative;
	margin: 0;
	padding: 1px;
	height: 100vh;
	height: 100dvh;
	scroll-snap-align: start;
}

button.down {
	mask-image: url("../pages/characters/down.png");
	bottom: 0px;
}

button.up {
	mask-image: url("../pages/characters/up.png");
	top: 0px;
}

button.scroll {
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background: transparent;
	border: 0px;
	width: 70px;
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	img {
		width: 100%;
	}
	&:hover::after {
		content: "";
		animation: shine 0.9s ease;
		animation-fill-mode: forwards;
		position: absolute;
		width: 100%;
		height: 580%;
		background: linear-gradient(
			to left,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0) 55%,
			rgba(255, 255, 255, 0.37) 71%,
			rgba(255, 255, 255, 1) 92%,
			rgba(255, 255, 255, 0) 100%
		);
		transform: rotate(-40deg);
		opacity: 0.22;
	}
}

#start {
	text-align: center;
	background: url(/_files/pages/characters/chaars.jpg);
	background-size: cover;
	background-position: center;
	a {
		border: 0;
		background: transparent;
		position: relative;
		overflow: hidden;
		display: block;
		margin: 0px auto;
		padding-top: 10px;
		max-width: 250px;
		height: fit-content;
		mask-repeat: no-repeat;
		mask-size: contain;
		mask-position: center;
		mask-image: url("../pages/characters/back-to-main-mask.png");
		&:hover::after {
			content: "";
			animation: shine 0.9s ease;
			animation-fill-mode: forwards;
			position: absolute;
			width: 100%;
			height: 480%;
			background: linear-gradient(
				to left,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 0) 55%,
				rgba(255, 255, 255, 0.37) 71%,
				rgba(255, 255, 255, 1) 92%,
				rgba(255, 255, 255, 0) 100%
			);
			transform: rotate(-40deg);
			opacity: 0.22;
		}
		img {
			width: 100%;
		}
	}
}

/* shine effect animation */
@keyframes shine {
	0% {
		top: -250%;
		right: -118%;
	}
	100% {
		top: -150%;
		right: 45%;
	}
}

#chara-1 {
	background: url(/_files/pages/characters/chaars_1.jpg);
	background-size: cover;
	background-position: center;
}

#chara-2 {
	background: url(/_files/pages/characters/chaars_2.jpg);
	background-size: cover;
	background-position: center;
}

@media screen and (max-width: 500px) {
	#start {
		background: url(/_files/pages/characters/m_chaars.jpg);
		background-size: cover;
		background-position: center;
	}
	#chara-1 {
		background: url(/_files/pages/characters/m_chaars_1.jpg);
		background-size: cover;
		background-position: center;
	}

	#chara-2 {
		background: url(/_files/pages/characters/m_chaars_2.jpg);
		background-size: cover;
		background-position: center;
	}
}