recipes: hide image-wrap background color during view transition morph

src/routes/[recipeLang=recipeLang]/+layout.svelte

@@ -21,16 +21,25 @@ onNavigate((navigation) => {
 	}
 
 	return new Promise((resolve) => {
-		document.startViewTransition(async () => {
+		const vt = document.startViewTransition(async () => {
 			resolve();
 			await navigation.complete;
 
+			// Hide .image-wrap background so the color box doesn't show behind the morphing image
+			const wrap = document.querySelector('.image-wrap');
+			if (wrap) wrap.style.backgroundColor = 'transparent';
+
 			// Set view-transition-name on the matching CompactCard/hero image for reverse morph
 			if (fromRecipe) {
 				const card = document.querySelector(`img[data-recipe="${fromRecipe}"]`);
 				if (card) card.style.viewTransitionName = `recipe-${fromRecipe}-img`;
 			}
 		});
+		// Restore background color once transition finishes
+		vt.finished.then(() => {
+			const wrap = document.querySelector('.image-wrap');
+			if (wrap) wrap.style.backgroundColor = '';
+		});
 	});
 });
 import UserHeader from '$lib/components/UserHeader.svelte';