fix: footer hidden behind recipe hero parallax section

The hero-section's scaleY transform created a stacking context that
painted over the footer, and margin-bottom: -20vh over-compensated
for the parallax gap, pulling the footer into the recipe cards.
Derive margin-bottom from actual parallax parameters and make the
footer position: relative so it paints above the transform layer.

src/lib/components/Header.svelte

@@ -206,6 +206,7 @@ footer{
 	padding-block: 1rem;
 	text-align: center;
 	margin-top: auto;
+	position: relative;
 }
 
 @media screen and (max-width: 800px) {

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

@@ -130,7 +130,7 @@
 /* ─── Hero parallax (same scaleY technique as TitleImgParallax) ─── */
 .hero-section {
 	--parallax-scale: 0.3;
-	margin-bottom: -20vh;
+	margin-bottom: calc(var(--parallax-scale) * (20vh - min(60vh, 520px)));
 	transform-origin: center top;
 	transform: translateY(-1rem) scaleY(calc(1 - var(--parallax-scale)));
 }