<script lang="ts">
	import mask from './mask.svg?raw';
</script>

<div class="wrapper">
	<div class="invert">
		{@html mask}
	</div>
	<div class="">
		{@html mask}
	</div>
</div>

<style>
	@import './mask.css';

	.wrapper {
		filter: drop-shadow(0px 0px 40px #be8630aa) drop-shadow(0px 0px 5px black)
			drop-shadow(0px 0px 5px black) drop-shadow(0px 0px 5px black);
		position: relative;
		z-index: 5;
		width: 100%;
		display: flex;
		justify-content: center;
		height: 50%;
		max-height: 50vh;
	}

	.wrapper > div {
		max-width: 40vw;
	}

	.wrapper > div > :global(svg) {
		overflow: visible;
		max-width: 100%;
		will-change: contents;
		transform: translateZ(1px);
		height: 100%;
		width: auto;
	}

	.wrapper > div :global(path) {
		animation-duration: 8s !important;
		stroke: #d9c556;
	}

	.invert {
		transform: scaleX(-1) translateX(-2.5px);
	}
</style>
