<script>
	export let onScrollDown;
</script>

<div class="cover">
	<div class="cover_logo">
		<img src="emc_logo.png" alt="EMC Logo">
	</div>
	<div class="cover_title">
		Minecraft's <span class="highlight">#1</span> Elytra Server
	</div>
	<div class="cover_subtitle highlight">
		Sky's the Limit!
	</div>
	<div class="cover_play">
		<a href="#" class="cover_play_button">elyctramc.net</a>
	</div>
	<div class="cover_quote">
		"Welcome to the first day of the rest of your life, Rookie" ~ John Elytra
	</div>
	
	<button class="scroll_down_btn" on:click={onScrollDown} aria-label="Scroll to content">
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
			<polyline points="6 9 12 15 18 9"></polyline>
		</svg>
	</button>
	
	<div class="overlay_gd"></div>
</div>

<style lang="scss">
	.cover {
		text-align: center;
		display: flex;
		flex-direction: column;
		height: 100vh;
		position: relative;

		background: radial-gradient(circle,rgba(63, 65, 76, 0.45) 2%, rgba(20, 24, 43, 1) 77%, rgba(20, 24, 43, 1) 0%), url(backdrop.png);
		background-size: cover;
		background-position: center;

		&:before,
		&:after {
			content: "";
			display: block;
			flex-grow: 1;
			min-height: 50px;
		}

		&_logo {
			display: flex;
			justify-content: center;
			align-items: center;

			img {
				height: 300px;
				width: auto;
				object-fit: contain;
				align-self: center;
			}
		}

		&_title {
			font-size: 50px;
			font-weight: 500;
			margin: 5px 0 10px;
			text-shadow: 0px 2px 2px #14182B;
		}

		&_subtitle {
			font-size: 40px;
			color: #9B959F;
			margin: 0 0 50px;
			font-style: italic;
			text-shadow: 0px 2px 2px #14182B;
		}

		&_quote {
			font-size: 20px;
			color: #9B959F;
			margin: 0 0 50px;
			font-style: italic;
		}

		&_play {
			margin: 0 0 50px;

			&_button {
				font-size: 38px;
				font-weight: 500;
				text-transform: uppercase;
				display: inline-flex;
				padding: 22px 34px;
				border: 2px solid;
				border-bottom-width: 3px;
				border-bottom-color: #020307;
				border-right-color: #020307;
				border-top-color: #3f414c;
				border-left-color: #3f414c;
				color: #9b959f;
				text-decoration: none;
				background: #14182b;
				border-radius: 10px;
				box-shadow: 1px 2px 8px 1px rgba(155,149,159,0.3) inset;
				text-shadow: 0px 0px 4px #57619E;
			}
		}

		.scroll_down_btn {
			position: absolute;
			bottom: 30px;
			left: 50%;
			transform: translateX(-50%);
			background: rgba(20, 24, 43, 0.6);
			border: 2px solid #70B0D0;
			color: #70B0D0;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.3s ease;
			z-index: 10;
			animation: bounce 2s infinite;

			&:hover {
				background: rgba(112, 176, 208, 0.2);
				transform: translateX(-50%) scale(1.1);
				box-shadow: 0 0 20px rgba(112, 176, 208, 0.4);
			}

			svg {
				width: 28px;
				height: 28px;
			}
		}

		@keyframes bounce {
			0%, 20%, 50%, 80%, 100% {
				transform: translateX(-50%) translateY(0);
			}
			40% {
				transform: translateX(-50%) translateY(-10px);
			}
			60% {
				transform: translateX(-50%) translateY(-5px);
			}
		}

		.overlay_gd {
			background: linear-gradient(180deg,rgba(20, 24, 43, 0) 0%, rgba(20, 24, 43, 1) 77%);
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100px;
			max-height: 20%;
		}
	}

	.highlight {
		color: #70B0D0;
	}
</style>