feat: update some stuff

src/routes/+layout.svelte

@@ -4,7 +4,10 @@
 <slot />
 
 <style global>
-	:global(html) {
+	:global(html, body) {
+		height: 100%;
+		margin: 0;
+		padding: 0;
 		background-color: black;
 		/* background-image: url(/confetti.png); */
 		background-size: 80%;

src/routes/+page.svelte

@@ -1,60 +1,65 @@
 <script lang="ts">
 	import Button from '$lib/components/button.svelte';
 	import Confetti from '$lib/components/confetti.svelte';
+	import Curtains from '$lib/components/curtains.svelte';
 	import Mask from '$lib/components/mask.svelte';
 	import Maskenball from '$lib/components/maskenball.svelte';
 	import { onMount } from 'svelte';
-	let curtainsIn = false;
-	let curtainsOut = false;
+	let curtainsVisible = false;
+	let buttonVisible = false;
+	let maskVisible = false;
 
 	onMount(() => {
+		curtainsVisible = true;
 		setTimeout(() => {
-			curtainsIn = true;
-		}, 2000);
+			buttonVisible = true;
+		}, 1500);
 	});
 </script>
 
-<div class="background {curtainsIn ? 'curtains-in' : ''} {curtainsOut ? 'curtains-out' : ''}">
-	<div class="drapery" />
-	<img alt="curtain left" class="curtain-right" src="/curtain.png" />
-	<img alt="curtain right" class="curtain-left" src="/curtain.png" />
-</div>
 <Confetti />
-<div class="mask-anim">
-	<!-- <Mask /> -->
-</div>
-<!-- <Maskenball /> -->
+<Curtains visible={curtainsVisible} />
 <div class="center">
-	<Button on:click={() => (curtainsOut = true)}>Enter the Dungeon</Button>
+	{#if maskVisible}
+		<Mask />
+		<Maskenball />
+	{/if}
+
+	{#if buttonVisible}
+		<span class="enter-button" class:visible={buttonVisible}>
+			<Button
+				on:click={() => {
+					curtainsVisible = false;
+					buttonVisible = false;
+					setTimeout(() => {
+						maskVisible = true;
+					}, 1000);
+				}}>Enter the Dungeon</Button
+			>
+		</span>
+	{/if}
+	>
 </div>
 
 <style>
-	.background {
-		opacity: 0.9;
-		transition: transform 2s ease;
-		transform: scale(1);
-		top: 0px;
-		position: absolute;
-		width: 100vw;
-	}
-
-	.background.curtains-out {
-		transform: scale(4) translateY(-100vh);
-	}
-
 	.center {
 		display: grid;
-		justify-content: center;
 		position: absolute;
 		height: 100vh;
 		width: 100vw;
 		top: 0px;
-		align-items: center;
-		animation: fadeIn 5s ease forwards;
-		animation-delay: 1s;
+		transform: translateY(-5%);
+		place-content: center;
+	}
+
+	.enter-button {
 		opacity: 0;
 	}
 
+	.enter-button.visible {
+		animation: fadeIn 5s ease forwards;
+	}
+
 	@keyframes fadeIn {
 		from {
 			opacity: 0;
@@ -64,87 +69,8 @@
 		}
 	}
 
-	.drapery {
-		background-image: url('/drapery.png');
-		background-position: center top;
-		position: absolute;
-		top: -50px;
-		left: 0px;
-		width: 100vw;
-		height: 300px;
-		background-repeat: repeat-x;
-		background-size: 600px 200px;
-		z-index: 3;
-		filter: brightness(1.2) contrast(1.2) saturate(1.3) hue-rotate(-15deg)
-			drop-shadow(0px 0px 50px black);
-		transform: translateY(-500px) scaleY(0);
-	}
-
-	.curtains-in .drapery {
-		animation: draperyIn 2s ease forwards;
-	}
-
-	@keyframes draperyIn {
-		from {
-			transform: translateY(-500px) scaleY(0);
-		}
-		to {
-			transform: translateY(0px) scaleY(1);
-		}
-	}
-	img.curtain-right {
-		position: fixed;
-		top: -30px;
-		right: 0px;
-		width: 400px;
-		z-index: 2;
-		filter: brightness(0.8) contrast(1.1) saturate(0.6);
-		animation-delay: 0s;
-		transform: translateX(120%) rotate(-10deg);
-	}
-
-	.curtains-in .curtain-right {
-		animation: moveInRight 2s ease forwards;
-	}
-
-	@keyframes moveInRight {
-		from {
-			transform: translateX(120%) rotate(-10deg);
-		}
-		to {
-			transform: translateX(15%) rotate(0deg);
-		}
-	}
-	.mask-anim {
-		margin-top: 100px;
-	}
-	img.curtain-left {
-		transform: scaleX(-1);
-		position: fixed;
-		top: -30px;
-		left: 0px;
-		width: 400px;
-		z-index: 2;
-		filter: brightness(0.8) contrast(1.1) saturate(0.6);
-		animation-delay: 0s;
-		transform: translateX(-120%) rotate(10deg) scaleX(-1);
-	}
-
-	.curtains-in .curtain-left {
-		animation: moveInLeft 2s ease forwards;
-	}
-
-	@keyframes moveInLeft {
-		from {
-			transform: translateX(-120%) rotate(10deg) scaleX(-1);
-		}
-		to {
-			transform: translateX(-15%) rotate(0deg) scaleX(-1);
-		}
-	}
-
-	:global(#confetti) {
-		position: relative;
-		z-index: -1;
+	:global(canvas) {
+		position: relative !important;
+		z-index: -1 !important;
 	}
 </style>