<script lang="ts">
	import { env } from '$env/dynamic/public';
	import Countdown from '$lib/components/Countdown/Countdown.svelte';
	import { IconOutline } from 'svelte-heros-v2';
</script>

<svelte:head>
	<title>Craftattack</title>
</svelte:head>

<div class="absolute top-0 left-0 h-screen w-full overflow-hidden">
	<!-- svelte-ignore a11y-media-has-caption -->
	<video
		class="h-full w-full blur-sm object-cover"
		autoplay
		loop
		src="{env.PUBLIC_BASE_PATH}/vid/background.mp4"
	/>
	<div class="absolute top-0 left-0 w-full h-full bg-black opacity-70" />
</div>
<div class="absolute top-0 w-full">
	<div class="relative h-screen">
		<div class="flex flex-col items-center w-full pt-36">
			<img
				class="w-11/12 sm:w-3/4 pointer-events-none"
				src="{env.PUBLIC_BASE_PATH}/img/craftattack.webp"
				alt="Craftattack 6"
				width="1905"
				height="188"
			/>
			<div class="mt-4 sm:mt-10 lg:mt-16">
				<Countdown end={Date.parse(env.PUBLIC_START_DATE)} />
			</div>
		</div>
		<div class="absolute bottom-4 sm:bottom-6 lg:bottom-10 w-full flex justify-center">
			<button
				on:click={() => {
					window.scrollTo(0, window.innerHeight);
				}}
			>
				<div class="border-2 border-white rounded-full w-10 h-16 flex justify-center items-center">
					<div class="animate-[pleaseINeedAttention_1.5s_ease-in-out_infinite]">
						<IconOutline name="chevron-double-down-outline" width="34" height="34" />
					</div>
				</div>
			</button>
		</div>
	</div>
</div>

<style>
	@keyframes -global-pleaseINeedAttention {
		0% {
			margin-bottom: 15px;
			opacity: 0;
		}
		40% {
			opacity: 1;
		}
		80% {
			margin-bottom: -15px;
			opacity: 0;
		}
		100% {
			opacity: 0;
		}
	}
</style>
