<script lang="ts">
	export let visible = true;
</script>

<div class="background" class:visible>
	<div class="drapery" />
	<img
		alt="curtain left"
		class="curtain-right"
		src="/curtain.png"
		srcset="
      /curtain.png,    <!-- Fallback for browsers that don't support the format -->
      /curtain.webp 1x,    <!-- 1x resolution for browsers that support WebP -->
      /curtain.webp 2x,    <!-- 2x resolution for browsers that support WebP -->
      /curtain.avif 1x,    <!-- 1x resolution for browsers that support AVIF -->
      /curtain.avif 2x     <!-- 2x resolution for browsers that support AVIF -->
    "
	/>
	<img
		alt="curtain right"
		class="curtain-left"
		src="/curtain.png"
		srcset="
      /curtain.png,    <!-- Fallback for browsers that don't support the format -->
      /curtain.webp 1x,    <!-- 1x resolution for browsers that support WebP -->
      /curtain.webp 2x,    <!-- 2x resolution for browsers that support WebP -->
      /curtain.avif 1x,    <!-- 1x resolution for browsers that support AVIF -->
      /curtain.avif 2x     <!-- 2x resolution for browsers that support AVIF -->
    "
	/>
</div>

<style>
	.background {
		opacity: 0.9;
		transition: transform 2s ease;
		transform: scale(1);
		top: 0px;
		position: absolute;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		pointer-events: none;
		user-select: none;
	}

	.drapery {
		background-image: url('/drapery.avif'), url('/drapery.webp'), 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);
		transition: transform 2s ease;
	}

	.visible .drapery {
		transform: translateY(0px) scaleY(1);
	}

	img.curtain-right {
		position: absolute;
		top: -30px;
		right: -50px;
		width: 400px;
		z-index: 2;
		filter: brightness(0.8) contrast(1.1) saturate(0.6);
		animation-delay: 0s;
		transform: translateX(120%) rotate(-10deg);
		transition: transform 2s ease;
	}

	.visible .curtain-right {
		transform: translateX(0%) rotate(0deg);
	}

	img.curtain-left {
		transform: scaleX(-1);
		position: fixed;
		top: -30px;
		left: -50px;
		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);
		transition: transform 2s ease;
	}

	.visible .curtain-left {
		transform: translateX(0%) rotate(0deg) scaleX(-1);
	}
</style>
