feat: add animated Mars planet decoration to header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/mars-planet.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import type { PointerEvent } from 'react';
+
+type MarsPlanetProps = {
+  className?: string;
+};
+
+export default function MarsPlanet({ className = '' }: MarsPlanetProps) {
+  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    const bounds = event.currentTarget.getBoundingClientRect();
+    const x = ((event.clientX - bounds.left) / bounds.width - 0.5) * 2;
+    const y = ((event.clientY - bounds.top) / bounds.height - 0.5) * 2;
+
+    event.currentTarget.style.setProperty('--mars-x', x.toFixed(3));
+    event.currentTarget.style.setProperty('--mars-y', y.toFixed(3));
+  };
+
+  const resetTilt = (event: PointerEvent<HTMLDivElement>) => {
+    event.currentTarget.style.setProperty('--mars-x', '0');
+    event.currentTarget.style.setProperty('--mars-y', '0');
+  };
+
+  return (
+    <div
+      aria-hidden="true"
+      className={`mars-planet ${className}`}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={resetTilt}
+    >
+      <span className="mars-planet__orbit" />
+      <span className="mars-planet__body">
+        <span className="mars-planet__band mars-planet__band--one" />
+        <span className="mars-planet__band mars-planet__band--two" />
+        <span className="mars-planet__crater mars-planet__crater--one" />
+        <span className="mars-planet__crater mars-planet__crater--two" />
+        <span className="mars-planet__crater mars-planet__crater--three" />
+      </span>
+      <span className="mars-planet__spark mars-planet__spark--one" />
+      <span className="mars-planet__spark mars-planet__spark--two" />
+    </div>
+  );
+}