Add fishing techniques auto-scrolling marquee after hero section

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

website/src/app.css

@@ -65,6 +65,13 @@
 		display: none;
 	}
 
+	.marquee-track {
+		animation: marquee 25s linear infinite;
+	}
+	.marquee-track:hover {
+		animation-play-state: paused;
+	}
+
 	/* Hero staggered fade-in */
 	.hero-fade {
 		opacity: 0;
@@ -83,3 +90,8 @@
 		transform: translateY(0);
 	}
 }
+
+@keyframes marquee {
+	from { transform: translateX(0); }
+	to { transform: translateX(-50%); }
+}

website/src/routes/+page.svelte

@@ -57,6 +57,8 @@
 		{ name: 'Marlin', tag: 'Ultimate Trophy' }
 	];
 
+	const techniques = ['Inshore', 'Offshore', 'Light Tackle', 'Casting', 'Trolling', 'Fly Fishing', 'Deep Fishing', 'Bottom Fishing'];
+
 	const inshoreTrips = [
 		{ name: 'Recreativo', duration: '2 Hours', price: 350, desc: 'Quick taste of Costa Rica fishing — perfect for beginners' },
 		{ name: '3-Hour Trip', duration: '3 Hours', price: 500, desc: 'Extended inshore session with more action' },
@@ -225,6 +227,20 @@
 	</div>
 </section>
 
+<!-- TECHNIQUES MARQUEE -->
+<div class="relative overflow-hidden border-y border-white/5 bg-navy/80 py-3 sm:py-4">
+	<div class="marquee-track flex w-max items-center gap-6 sm:gap-10">
+		{#each [0, 1] as _set}
+			{#each techniques as tech}
+				<span class="flex items-center gap-2 whitespace-nowrap sm:gap-3">
+					<span class="h-1.5 w-1.5 rounded-full bg-cyan-400"></span>
+					<span class="font-heading text-xs font-semibold uppercase tracking-[0.2em] text-slate-300 sm:text-sm">{tech}</span>
+				</span>
+			{/each}
+		{/each}
+	</div>
+</div>
+
 <!-- ABOUT -->
 <section id="about" class="py-14 sm:py-24">
 	<div class="mx-auto max-w-7xl px-4 sm:px-6">