Add winter wishlist banner

src/components/SiteHeader.astro

@@ -78,6 +78,29 @@ const lineClass = isDark ? "bg-white" : "bg-black";
     </nav>
 </div>
 
+<div
+    class="pony-banner w-full border-b border-black/10 bg-gradient-to-r from-[#e6f4ff] via-[#cfe2f4] to-[#eaf6ff] shadow-[0_10px_20px_-16px_rgba(0,0,0,0.5)]"
+    role="region"
+    aria-label="Winter wish-list banner"
+>
+    <div
+        class={`mx-auto flex w-full items-center justify-center px-4 py-2 text-center text-sm font-semibold text-[#1f2d3d] sm:px-6 sm:text-base ${className}`.trim()}
+    >
+        <a
+            class="inline-flex items-center gap-2 rounded-full px-3 py-1 transition hover:brightness-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f7fb1]"
+            href="https://www.amazon.co.uk/hz/wishlist/ls/2B4R5YZQ8U4B2?ref_=wl_share"
+            target="_blank"
+            rel="noreferrer"
+        >
+            <span aria-hidden="true">❄️🐴</span>
+            <span>
+                The ponies have been chatting and put together a little winter
+                wish-list… take a look
+            </span>
+        </a>
+    </div>
+</div>
+
 <header class={`relative w-full ${className}`.trim()}>
     <div
         class="flex flex-row items-start justify-between gap-3 pt-3 sm:pt-4 sm:h-[108px]"
@@ -145,6 +168,48 @@ const lineClass = isDark ? "bg-white" : "bg-black";
     </div>
 </header>
 
+<style>
+    .pony-banner {
+        animation: pony-drop 900ms cubic-bezier(0.18, 0.88, 0.35, 1) both;
+    }
+
+    .pony-banner a {
+        animation: pony-glow 2.8s ease-in-out infinite;
+    }
+
+    @keyframes pony-drop {
+        0% {
+            opacity: 0;
+            transform: translateY(-100%);
+        }
+        70% {
+            opacity: 1;
+            transform: translateY(6px);
+        }
+        100% {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes pony-glow {
+        0%,
+        100% {
+            box-shadow: 0 0 0 rgba(255, 255, 255, 0);
+        }
+        50% {
+            box-shadow: 0 0 22px rgba(255, 255, 255, 0.55);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .pony-banner,
+        .pony-banner a {
+            animation: none;
+        }
+    }
+</style>
+
 <script>
     const menu = document.getElementById("mobile-menu");
     const openButton = document.getElementById("menu-open");