feat: binary micro-interactions across the page

Section headlines are written out behind a column of digits, mono labels
resolve from binary, the portrait assembles itself from bits, section indexes
rattle and keep one bit alive, cards get corner marks, the header shows the
scroll position as an eight-bit number, pressed links and buttons shed a few
digits, and the work stage leans towards the pointer. All effects respect
reduced motion and leave the content readable without JavaScript.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/components/home/PathPicker.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { motion } from "framer-motion";
 import { Button } from "@/src/components/Button";
+import { DecodeText } from "@/src/components/bits/DecodeText";
 import { PathScene } from "@/src/components/illustrations/PathScenes";
 import { SERVICE_PATHS, type ServicePath } from "@/src/content/paths";
 
@@ -50,9 +51,11 @@ const PathStory: React.FC<{ path: ServicePath; active: boolean }> = ({
       <div className="md:order-2 md:col-span-7">
         <div className="relative overflow-hidden rounded-3xl bg-slate-900 md:sticky md:top-28">
           <div className="flex items-center justify-between border-b border-slate-800 px-5 py-4 md:px-7">
-            <span className="font-mono text-[11px] uppercase tracking-[0.2em] text-slate-300">
-              {current?.title}
-            </span>
+            <DecodeText
+              key={current?.title}
+              text={current?.title ?? ""}
+              className="font-mono text-[11px] uppercase tracking-[0.2em] text-slate-300"
+            />
             <span className="font-mono text-[11px] tracking-[0.2em] text-slate-500">
               {step + 1} / {path.steps.length}
             </span>
@@ -151,7 +154,7 @@ export const PathPicker: React.FC = () => {
               aria-selected={selected}
               aria-controls={`path-panel-${path.id}`}
               onClick={() => setActiveId(path.id)}
-              className={`group flex h-full flex-col justify-between rounded-3xl border p-5 text-left transition-all duration-300 md:p-7 ${
+              className={`bit-card group flex h-full flex-col justify-between rounded-3xl border p-5 text-left transition-all duration-300 md:p-7 ${
                 selected
                   ? "border-slate-900 bg-slate-900 text-white"
                   : "border-slate-200 bg-white text-slate-900 hover:-translate-y-1 hover:border-slate-400"