<script lang="ts">
	/* Topographic contour backdrop — decorative abstract texture. */
	interface Props {
		opacity?: number;
		stroke?: string;
	}
	let { opacity = 0.16, stroke = 'var(--line)' }: Props = $props();

	const rings = [
		'M120 40C200 20 360 30 470 90 560 140 560 250 470 300 360 360 180 350 110 290 50 240 50 80 120 40Z',
		'M150 80C220 65 350 75 440 125 510 165 510 245 440 285 350 335 200 325 145 275 95 230 95 115 150 80Z',
		'M185 120C245 110 340 120 410 160 465 192 465 240 410 270 340 305 225 297 180 257 140 222 140 150 185 120Z',
		'M220 158C268 150 330 160 382 192 422 217 422 245 382 266 330 293 250 287 215 255 185 227 185 178 220 158Z'
	];
</script>

<svg
	class="topo"
	viewBox="0 0 600 380"
	preserveAspectRatio="xMidYMid slice"
	aria-hidden="true"
	style="position:absolute;inset:0;width:100%;height:100%;opacity:{opacity};pointer-events:none"
>
	{#each rings as d, i (i)}
		<path {d} fill="none" {stroke} stroke-width={i === 1 ? 2 : 1.4} />
	{/each}
</svg>
