<!--
	Ported pixel-art header from the legacy mule-image React TopBar.
	- Tiled `desert.png` scrolling right→left under a dusk gradient.
	- 3×2 sprite-sheet of the mule cycling at 6 frames / 0.6s for a walk.
	- ASCII "Mulimago" wordmark on a black plate so the mule has company.

	The PNGs live in /static/mule/ so SvelteKit's static handler serves them
	at /mule/*; the import-via-Vite trick from the React version isn't
	necessary here.
-->
<script lang="ts">
	const MULIMAGO_ASCII = `▖  ▖  ▜ ▘
▛▖▞▌▌▌▐ ▌▛▛▌▀▌▛▌█▌
▌▝ ▌▙▌▐▖▌▌▌▌█▌▙▌▙▖`;

	interface Props {
		children?: import('svelte').Snippet;
	}
	let { children }: Props = $props();
</script>

<header class="mule-header relative flex h-16 items-center justify-between overflow-hidden border-b border-border px-4">
	<div class="relative flex items-center gap-3">
		<div class="mule-sprite h-12 w-14" aria-label="Mulimago" role="img"></div>
		<pre
			aria-label="Mulimago"
			class="rounded bg-black px-2 py-1 font-mono text-[8px] leading-[1.05] text-white"
			style="letter-spacing: 0;"
		>{MULIMAGO_ASCII}</pre>
	</div>

	<div class="relative flex items-center gap-3">
		{@render children?.()}
	</div>
</header>

<style>
	/*
	 * Two layers in the background: tiled desert.png on top scrolling
	 * right→left, dusk-sky gradient underneath. The 200px tile width is
	 * fixed so the `desert-scroll` keyframe moves by exactly one tile and
	 * loops seamlessly.
	 */
	.mule-header {
		background-image:
			url('/mule/desert.png'),
			linear-gradient(to bottom, #2b3a5c 0%, #6b6b8a 35%, #d68a5c 75%, #f0c188 100%);
		background-repeat: repeat-x, no-repeat;
		background-size:
			200px 100%,
			100% 100%;
		background-position: 0 bottom, 0 0;
		image-rendering: pixelated;
		animation: desert-scroll 24s linear infinite;
	}

	/* 3×2 sprite-sheet, 6-frame walk cycle. `steps(1)` makes each keyframe
	 * snap (no interpolation between frames). */
	.mule-sprite {
		background-image: url('/mule/mule-sprites.png');
		background-size: 300% 200%;
		background-repeat: no-repeat;
		image-rendering: pixelated;
		animation: mule-walk 0.6s steps(1) infinite;
	}

	@keyframes mule-walk {
		0% {
			background-position: 0% 0%;
		}
		16.66% {
			background-position: 50% 0%;
		}
		33.33% {
			background-position: 100% 0%;
		}
		50% {
			background-position: 0% 100%;
		}
		66.66% {
			background-position: 50% 100%;
		}
		83.33% {
			background-position: 100% 100%;
		}
		100% {
			background-position: 0% 0%;
		}
	}

	@keyframes desert-scroll {
		from {
			background-position-x: 0px, 0px;
		}
		to {
			background-position-x: -200px, 0px;
		}
	}
</style>
