implement category-based lazy loading to improve initial page load

Add Intersection Observer-based lazy loading for recipe categories to dramatically reduce initial render time. Categories render progressively as users scroll, reducing initial DOM from 240 cards to ~30-50 cards.

Performance improvements:
- First 2 categories render eagerly (~30-50 cards) for fast perceived load
- Remaining categories lazy-load 600px before entering viewport
- Categories render immediately during active search for instant results
- "In Season" section always renders first as hero content

Implementation:
- Add LazyCategory component with IntersectionObserver for vertical lazy loading
- Wrap MediaScroller categories with progressive loading logic
- Maintain scroll position with placeholder heights (300px per category)
- Keep search functionality fully intact with all 240 recipes searchable
- Horizontal lazy loading not implemented (IntersectionObserver doesn't work well with overflow-x scroll containers)

src/lib/components/LazyCategory.svelte

@@ -0,0 +1,65 @@
+<script>
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+
+	let {
+		title = '',
+		eager = false,
+		estimatedHeight = 400,
+		rootMargin = '400px',
+		children
+	} = $props();
+
+	let isVisible = $state(eager); // If eager=true, render immediately
+	let containerRef = $state(null);
+	let observer = $state(null);
+
+	onMount(() => {
+		if (!browser || eager) return;
+
+		// Create Intersection Observer to detect when category approaches viewport
+		observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting && !isVisible) {
+						isVisible = true;
+						// Once visible, stop observing (keep it rendered)
+						if (observer && containerRef) {
+							observer.unobserve(containerRef);
+						}
+					}
+				});
+			},
+			{
+				rootMargin, // Start loading 400px before entering viewport
+				threshold: 0
+			}
+		);
+
+		if (containerRef) {
+			observer.observe(containerRef);
+		}
+
+		return () => {
+			if (observer) {
+				observer.disconnect();
+			}
+		};
+	});
+</script>
+
+{#if isVisible}
+	<!-- Render actual content when visible -->
+	<div bind:this={containerRef}>
+		{@render children()}
+	</div>
+{:else}
+	<!-- Placeholder with estimated height to maintain scroll position -->
+	<div
+		bind:this={containerRef}
+		style="height: {estimatedHeight}px; min-height: {estimatedHeight}px;"
+		aria-label="Loading {title}"
+	>
+		<!-- Empty placeholder - IntersectionObserver will trigger when this enters viewport -->
+	</div>
+{/if}