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/Header.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 import * as React from "react";
 
 import IconWhite from "../assets/logo/Icon-White-Transparent.svg";
+import { DecodeText } from "./bits/DecodeText";
+import { ScrollBits } from "./bits/ScrollBits";
 
 /** Header: the logo and one action. Everything else lives on the homepage. */
 export const Header: React.FC = () => {
@@ -52,6 +54,8 @@ export const Header: React.FC = () => {
           </div>
         </Link>
 
+        <ScrollBits className="hidden font-mono text-[10px] tracking-[0.3em] text-slate-400 md:block" />
+
         <Link
           href="/#contact"
           className="font-sans text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border border-slate-200 px-5 py-2.5 rounded-full no-underline hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
@@ -59,7 +63,7 @@ export const Header: React.FC = () => {
             transitionTimingFunction: "cubic-bezier(0.23, 1, 0.32, 1)",
           }}
         >
-          Get in touch
+          <DecodeText text="Get in touch" trigger="hover" />
         </Link>
       </div>
     </header>