finish animations and add elevation

src/lib/components/navigation/header.svelte

@@ -45,8 +45,16 @@
 	// separators spelled out in the template lose their spacing to Svelte's
 	// whitespace trimming ("Canton of Schwyz,Switzerland").
 	let locationRegion = $derived([location?.admin1, location?.country].filter(Boolean).join(', '));
+	// elevation rides along in the pill's muted part ("· Canton of Schwyz,
+	// Switzerland · 465m"); a 0 m coastal town is a real reading, only a
+	// missing value is dropped
+	let locationDetail = $derived(
+		[locationRegion, location?.elevation != null ? `${Math.round(location.elevation)}m` : null]
+			.filter(Boolean)
+			.join(' · ')
+	);
 	// the pill ellipses, so the full name still has to be readable somewhere
-	let locationLine = $derived([location?.name, locationRegion].filter(Boolean).join(' · '));
+	let locationLine = $derived([location?.name, locationDetail].filter(Boolean).join(' · '));
 
 	const themeCycle: Theme[] = ['system', 'light', 'dark'];
 	const themeTitles: Record<Theme, () => string> = {
@@ -120,8 +128,8 @@
 			<!-- full location (desktop); the page hero carries it on smaller screens -->
 			<span class="min-w-0 truncate text-sm font-semibold text-foreground" title={locationLine}>
 				{location.name}
-				{#if locationRegion}
-					<span class="font-normal text-muted-foreground">· {locationRegion}</span>
+				{#if locationDetail}
+					<span class="font-normal text-muted-foreground">· {locationDetail}</span>
 				{/if}
 			</span>
 		</div>