feat: add drapery

src/routes/+page.svelte

@@ -5,6 +5,7 @@
 	import Maskenball from '$lib/components/maskenball.svelte';
 </script>
 
+<div class="drapery" />
 <img class="curtain-right" src="/curtain.png" />
 <img class="curtain-left" src="/curtain.png" />
 <Confetti />
@@ -20,6 +21,30 @@
 		justify-content: center;
 		margin-top: 50px;
 	}
+	.drapery {
+		background-image: url('/drapery.png');
+		position: absolute;
+		top: -50px;
+		left: 0px;
+		width: 100vw;
+		height: 300px;
+		background-repeat: repeat-x;
+		background-size: 500px;
+		z-index: 3;
+		filter: brightness(1.2) contrast(1.2) saturate(1.3) hue-rotate(-15deg)
+			drop-shadow(0px 0px 50px black);
+		animation: draperyIn 2s 2s ease forwards;
+		animation-delay: 2s;
+		transform: translateY(-500px) scaleY(0);
+	}
+	@keyframes draperyIn {
+		from {
+			transform: translateY(-500px) scaleY(0);
+		}
+		to {
+			transform: translateY(0px) scaleY(1);
+		}
+	}
 	img.curtain-right {
 		position: fixed;
 		top: -30px;
@@ -28,12 +53,12 @@
 		z-index: 2;
 		filter: brightness(0.8) contrast(1.1) saturate(0.6);
 		animation: moveInRight 2s ease forwards;
-		animation-delay: 0.5s;
-		transform: translateX(100%);
+		animation-delay: 2s;
+		transform: translateX(120%) rotate(-10deg);
 	}
 	@keyframes moveInRight {
 		from {
-			transform: translateX(100%) rotate(-10deg);
+			transform: translateX(120%) rotate(-10deg);
 		}
 		to {
 			transform: translateX(15%) rotate(0deg);
@@ -47,15 +72,14 @@
 		width: 400px;
 		z-index: 2;
 		filter: brightness(0.8) contrast(1.1) saturate(0.6);
-
 		animation: moveInLeft 2s ease forwards;
-		animation-delay: 0.5s;
-		transform: translateX(-100%);
+		animation-delay: 2s;
+		transform: translateX(-120%) rotate(10deg) scaleX(-1);
 	}
 
 	@keyframes moveInLeft {
 		from {
-			transform: translateX(-100%) rotate(10deg) scaleX(-1);
+			transform: translateX(-120%) rotate(10deg) scaleX(-1);
 		}
 		to {
 			transform: translateX(-15%) rotate(0deg) scaleX(-1);