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

<div class="background" class:visible>
	<div class="drapery">
		{#each Array.from({ length: 5 }) as _}
			<picture>
				<source srcset="/drapery.avif" type="image/avif" />
				<source srcset="/drapery.webp" type="image/webp" />
				<img alt="drapery" src="/drapery.png" />
			</picture>
		{/each}
	</div>
	<picture>
		<source srcset="/curtain.avif" type="image/avif" />
		<source srcset="/curtain.webp" type="image/webp" />
		<img alt="curtain left" class="curtain-right" src="/curtain.png" />
	</picture>

	<picture>
		<source srcset="/curtain.avif" type="image/avif" />
		<source srcset="/curtain.webp" type="image/webp" />
		<img alt="curtain right" class="curtain-left" src="/curtain.png" />
	</picture>
</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 {
		position: absolute;
		top: -50px;
		left: 50vw;
		width: fit-content;
		height: 250px;
		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) translateX(-50%) scaleY(0);
		transition: transform 2s ease;
		white-space: nowrap;
	}
	.drapery img {
		height: 100%;
		width: auto;
		margin-left: -5px;
		object-fit: cover;
		display: inline;
	}

	.visible .drapery {
		transform: translateY(0px) scaleY(1) translateX(-50%);
	}

	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>
