<script lang="ts">
	// Crossfade + slow zoom and pan (the "Ken Burns" effect). Image-only — videos
	// fall back to the crossfade behaviour to avoid double-animation.

	interface Props {
		src: string;
		isVideo: boolean;
		durationMs: number;
	}

	let { src, isVideo, durationMs }: Props = $props();

	// Mild random pan so each slide feels different. Range chosen so the image never
	// pans out of frame given the object-fit: cover.
	const panX = Math.round((Math.random() - 0.5) * 6); // -3% .. +3%
	const panY = Math.round((Math.random() - 0.5) * 6);
</script>

<div
	class="absolute inset-0 flex items-center justify-center overflow-hidden bg-black"
	style="animation: kb-fade {durationMs}ms ease-out forwards;"
>
	{#if isVideo}
		<!-- svelte-ignore a11y_media_has_caption -->
		<video
			{src}
			autoplay
			muted
			playsinline
			class="h-full w-full object-contain"
		></video>
	{:else}
		<img
			{src}
			alt=""
			class="h-full w-full object-cover"
			style="animation: kb-zoom 10s ease-out forwards; transform-origin: {50 + panX}% {50 + panY}%;"
		/>
	{/if}
</div>

<style>
	@keyframes kb-fade {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
	@keyframes kb-zoom {
		from { transform: scale(1.0); }
		to   { transform: scale(1.1); }
	}
</style>
