motus-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,2420 @@
+"use client";
+import { jsxs as n, jsx as e, Fragment as xe } from "react/jsx-runtime";
+import { ensureReady as Q, defineSound as B } from "@web-kits/audio";
+import { ArrowUpRight as I, RotateCcw as se, Copy as we, Check as F, Download as ye, Compass as ve, Orbit as le, AudioLines as ce, BookOpen as ke, Mail as D, Sparkles as Ne, MousePointer2 as _e, X as de, Clipboard as ue, Home as pe, BriefcaseBusiness as me, UserRound as fe, ArrowRight as he, Code2 as Ce } from "lucide-react";
+import { useState as S, useCallback as Se, useRef as v, useEffect as L, useLayoutEffect as ee, Suspense as R, lazy as $ } from "react";
+import { LottieLight as be } from "lottie-react";
+import { useReducedMotion as ge, motion as z, AnimatePresence as Z } from "motion/react";
+import Pe from "react-use-measure";
+import { gsap as w } from "gsap";
+const Me = B({
+  source: { type: "square", frequency: 155 },
+  envelope: { attack: 2e-3, decay: 0.055, sustain: 0 },
+  gain: 0.08
+}), Te = B({
+  source: { type: "triangle", frequency: 310 },
+  envelope: { attack: 2e-3, decay: 0.045, sustain: 0 },
+  gain: 0.06
+});
+function ze({ onAction: o, disabled: b = !1 }) {
+  const [u, g] = S(!1), d = Se(async (s) => {
+    await Q(), s();
+  }, []), i = () => {
+    b || (g(!0), d(Me));
+  }, r = () => {
+    !u || b || (g(!1), d(Te));
+  };
+  return /* @__PURE__ */ n("span", { className: "relative inline-flex h-14 w-[190px]", children: [
+    /* @__PURE__ */ e(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute inset-0 translate-x-[6px] translate-y-[6px] rounded-[12px] bg-[#c7c7cc]"
+      }
+    ),
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        onPointerDown: i,
+        onPointerUp: r,
+        onPointerCancel: r,
+        onPointerLeave: r,
+        onKeyDown: (s) => {
+          (s.key === "Enter" || s.key === " ") && !s.repeat && i();
+        },
+        onKeyUp: (s) => {
+          (s.key === "Enter" || s.key === " ") && r();
+        },
+        onClick: () => void (o == null ? void 0 : o()),
+        disabled: b,
+        className: `relative flex h-14 w-[190px] touch-none items-center justify-between rounded-[12px] border border-white/80 bg-[#101011] px-5 text-sm font-semibold text-white transition-transform duration-75 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0a84ff] focus-visible:ring-offset-4 disabled:cursor-not-allowed disabled:opacity-50 ${u ? "translate-x-[6px] translate-y-[6px]" : ""}`,
+        style: { color: "#ffffff" },
+        children: [
+          /* @__PURE__ */ e("span", { children: "Open project" }),
+          /* @__PURE__ */ e(I, { size: 16, "aria-hidden": "true" })
+        ]
+      }
+    )
+  ] });
+}
+const je = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: ze
+}, Symbol.toStringTag, { value: "Module" })), Oe = { x: [0.2], y: [1] }, Re = { x: [0.8], y: [0] }, E = (o, b, u) => ({ t: o, s: b, e: u, i: Oe, o: Re }), re = (o, b, u, g) => ({
+  ddd: 0,
+  ind: o,
+  ty: 4,
+  nm: `Copy sheet ${o}`,
+  sr: 1,
+  ks: {
+    o: { a: 1, k: [E(0, [g], [g]), E(18, [g], [18]), { t: 32, s: [18] }] },
+    r: { a: 0, k: 0 },
+    p: { a: 1, k: [E(0, [b[0], b[1], 0], [u[0], u[1], 0]), { t: 32, s: [u[0], u[1], 0] }] },
+    a: { a: 0, k: [0, 0, 0] },
+    s: { a: 0, k: [100, 100, 100] }
+  },
+  ao: 0,
+  shapes: [
+    { ty: "rc", d: 1, s: { a: 0, k: [20, 23] }, p: { a: 0, k: [0, 0] }, r: { a: 0, k: 4 }, nm: "Sheet" },
+    {
+      ty: "st",
+      c: { a: 0, k: [1, 1, 1, 1] },
+      o: { a: 0, k: 100 },
+      w: { a: 0, k: 2.2 },
+      lc: 2,
+      lj: 2,
+      ml: 4,
+      nm: "White stroke"
+    },
+    {
+      ty: "tr",
+      p: { a: 0, k: [0, 0] },
+      a: { a: 0, k: [0, 0] },
+      s: { a: 0, k: [100, 100] },
+      r: { a: 0, k: 0 },
+      o: { a: 0, k: 100 },
+      sk: { a: 0, k: 0 },
+      sa: { a: 0, k: 0 },
+      nm: "Transform"
+    }
+  ],
+  ip: 0,
+  op: 54,
+  st: 0,
+  bm: 0
+}), ae = (o, b, u, g, d) => ({
+  ddd: 0,
+  ind: o,
+  ty: 4,
+  nm: `Copied stroke ${o}`,
+  sr: 1,
+  ks: {
+    o: { a: 1, k: [E(d, [0], [100]), { t: 54, s: [100] }] },
+    r: { a: 0, k: g },
+    p: { a: 0, k: [u[0], u[1], 0] },
+    a: { a: 0, k: [0, 0, 0] },
+    s: {
+      a: 1,
+      k: [
+        E(d, [0, 100, 100], [112, 100, 100]),
+        E(d + 10, [112, 100, 100], [100, 100, 100]),
+        { t: 54, s: [100, 100, 100] }
+      ]
+    }
+  },
+  ao: 0,
+  shapes: [
+    { ty: "rc", d: 1, s: { a: 0, k: [b, 5] }, p: { a: 0, k: [0, 0] }, r: { a: 0, k: 2.5 }, nm: "Stroke" },
+    { ty: "fl", c: { a: 0, k: [1, 1, 1, 1] }, o: { a: 0, k: 100 }, r: 1, nm: "White fill" },
+    {
+      ty: "tr",
+      p: { a: 0, k: [0, 0] },
+      a: { a: 0, k: [0, 0] },
+      s: { a: 0, k: [100, 100] },
+      r: { a: 0, k: 0 },
+      o: { a: 0, k: 100 },
+      sk: { a: 0, k: 0 },
+      sa: { a: 0, k: 0 },
+      nm: "Transform"
+    }
+  ],
+  ip: 0,
+  op: 54,
+  st: 0,
+  bm: 0
+}), $e = {
+  v: "5.12.2",
+  fr: 60,
+  ip: 0,
+  op: 54,
+  w: 48,
+  h: 48,
+  nm: "Copy sheets resolve into confirmation",
+  ddd: 0,
+  assets: [],
+  layers: [
+    re(1, [18, 18], [24, 24], 52),
+    re(2, [30, 30], [24, 24], 100),
+    ae(3, 11, [19, 27], 42, 21),
+    ae(4, 21, [30, 22], -43, 27)
+  ]
+};
+function Ae({
+  value: o = "https://example.com/work",
+  onCopy: b,
+  disabled: u = !1
+}) {
+  const g = v(null), d = v(!0), [i, r] = S("idle"), s = ge(), t = async () => {
+    if (!(u || i === "copying" || i === "copied")) {
+      r("copying");
+      try {
+        if (b) await b(o);
+        else if (navigator.clipboard) await navigator.clipboard.writeText(o);
+        else throw new Error("Clipboard is unavailable");
+        if (!d.current) return;
+        r("copied"), g.current = window.setTimeout(() => r("idle"), 1700);
+      } catch {
+        if (!d.current) return;
+        r("error");
+      }
+    }
+  };
+  L(() => (d.current = !0, () => {
+    d.current = !1, g.current && window.clearTimeout(g.current);
+  }), []);
+  const p = i === "copying", f = i === "copied", c = i === "error";
+  return /* @__PURE__ */ n(
+    z.button,
+    {
+      type: "button",
+      onClick: () => void t(),
+      disabled: u || p || f,
+      "aria-busy": p,
+      initial: !1,
+      animate: {
+        backgroundColor: f ? "#eaf7ee" : c ? "#fff0ef" : "#f5f5f7",
+        color: f ? "#175f35" : c ? "#9c2f28" : "#1d1d1f"
+      },
+      whileHover: i === "idle" || c ? { scale: 1.012 } : void 0,
+      whileTap: i === "idle" || c ? { scale: 0.982 } : void 0,
+      transition: s ? { duration: 0 } : { duration: 0.22, ease: [0.16, 1, 0.3, 1] },
+      className: `flex h-14 w-[202px] items-center justify-between rounded-[16px] p-1.5 pl-5 text-[13px] font-semibold tracking-[-0.01em] shadow-[0_18px_42px_rgba(15,23,42,0.14),inset_0_1px_0_rgba(255,255,255,0.9)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0a84ff] focus-visible:ring-offset-4 disabled:opacity-75 ${p ? "cursor-wait" : u ? "cursor-not-allowed" : f ? "cursor-default" : "cursor-pointer"}`,
+      children: [
+        /* @__PURE__ */ e(Z, { initial: !1, mode: "popLayout", children: /* @__PURE__ */ e(
+          z.span,
+          {
+            initial: { opacity: 0, y: 6, filter: "blur(4px)" },
+            animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+            exit: { opacity: 0, y: -6, filter: "blur(4px)" },
+            transition: { duration: s ? 0 : 0.18, ease: [0.16, 1, 0.3, 1] },
+            className: "whitespace-nowrap",
+            children: p ? "Copying" : f ? "Copied" : c ? "Try again" : "Copy link"
+          },
+          i
+        ) }),
+        /* @__PURE__ */ e(
+          z.span,
+          {
+            "aria-hidden": "true",
+            animate: { backgroundColor: f ? "#176b3a" : c ? "#a72f27" : "#111114" },
+            className: "flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-[12px] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]",
+            children: f ? /* @__PURE__ */ e("span", { className: "size-8", children: /* @__PURE__ */ e(be, { src: $e, autoplay: !s, loop: !1 }) }) : c ? /* @__PURE__ */ e(se, { size: 16 }) : /* @__PURE__ */ e(we, { size: 16, strokeWidth: 1.9 })
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "sr-only", "aria-live": "polite", children: p ? "Copying link." : f ? "Link copied." : c ? "Copy failed. Try again." : "" })
+      ]
+    }
+  );
+}
+const Ie = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Ae
+}, Symbol.toStringTag, { value: "Module" })), Le = { x: [0.2], y: [1] }, Ee = { x: [0.8], y: [0] }, O = (o, b, u) => ({ t: o, s: b, e: u, i: Le, o: Ee }), Be = 740, Xe = {
+  v: "5.12.2",
+  fr: 90,
+  ip: 0,
+  op: 66,
+  w: 52,
+  h: 52,
+  nm: "Document enters download tray",
+  ddd: 0,
+  assets: [],
+  layers: [
+    {
+      ddd: 0,
+      ind: 1,
+      ty: 4,
+      nm: "Document",
+      sr: 1,
+      ks: {
+        o: { a: 1, k: [O(0, [100], [100]), O(45, [100], [20]), { t: 66, s: [20] }] },
+        r: { a: 1, k: [O(0, [-4], [2]), O(26, [2], [0]), { t: 66, s: [0] }] },
+        p: {
+          a: 1,
+          k: [O(0, [26, 15, 0], [26, 30, 0]), O(38, [26, 30, 0], [26, 34, 0]), { t: 66, s: [26, 34, 0] }]
+        },
+        a: { a: 0, k: [0, 0, 0] },
+        s: { a: 1, k: [O(0, [100, 100, 100], [94, 94, 100]), { t: 66, s: [94, 94, 100] }] }
+      },
+      ao: 0,
+      shapes: [
+        { ty: "rc", d: 1, s: { a: 0, k: [20, 25] }, p: { a: 0, k: [0, 0] }, r: { a: 0, k: 3 }, nm: "Page" },
+        { ty: "fl", c: { a: 0, k: [1, 1, 1, 1] }, o: { a: 0, k: 100 }, r: 1, nm: "Page fill" },
+        {
+          ty: "tr",
+          p: { a: 0, k: [0, 0] },
+          a: { a: 0, k: [0, 0] },
+          s: { a: 0, k: [100, 100] },
+          r: { a: 0, k: 0 },
+          o: { a: 0, k: 100 },
+          sk: { a: 0, k: 0 },
+          sa: { a: 0, k: 0 },
+          nm: "Transform"
+        }
+      ],
+      ip: 0,
+      op: 66,
+      st: 0,
+      bm: 0
+    },
+    {
+      ddd: 0,
+      ind: 2,
+      ty: 4,
+      nm: "Tray",
+      sr: 1,
+      ks: {
+        o: { a: 0, k: 100 },
+        r: { a: 0, k: 0 },
+        p: { a: 0, k: [26, 36, 0] },
+        a: { a: 0, k: [0, 0, 0] },
+        s: {
+          a: 1,
+          k: [
+            O(18, [88, 100, 100], [105, 100, 100]),
+            O(33, [105, 100, 100], [100, 100, 100]),
+            { t: 66, s: [100, 100, 100] }
+          ]
+        }
+      },
+      ao: 0,
+      shapes: [
+        { ty: "rc", d: 1, s: { a: 0, k: [28, 4] }, p: { a: 0, k: [0, 0] }, r: { a: 0, k: 2 }, nm: "Slot" },
+        { ty: "fl", c: { a: 0, k: [0.64, 0.98, 0.72, 1] }, o: { a: 0, k: 100 }, r: 1, nm: "Slot fill" },
+        {
+          ty: "tr",
+          p: { a: 0, k: [0, 0] },
+          a: { a: 0, k: [0, 0] },
+          s: { a: 0, k: [100, 100] },
+          r: { a: 0, k: 0 },
+          o: { a: 0, k: 100 },
+          sk: { a: 0, k: 0 },
+          sa: { a: 0, k: 0 },
+          nm: "Transform"
+        }
+      ],
+      ip: 0,
+      op: 66,
+      st: 0,
+      bm: 0
+    }
+  ]
+};
+function De({
+  href: o = "/resume.pdf",
+  filename: b = "resume.pdf",
+  fileLabel: u = "PDF · résumé",
+  onDownload: g,
+  disabled: d = !1
+}) {
+  const [i, r] = S("idle"), s = v(null), t = v(!0), p = ge();
+  L(() => (t.current = !0, () => {
+    t.current = !1, s.current && window.clearTimeout(s.current);
+  }), []);
+  const f = async () => {
+    if (!(d || i === "preparing" || i === "started")) {
+      r("preparing");
+      try {
+        if (p || await new Promise((h) => window.setTimeout(h, Be)), !t.current) return;
+        if (g) await g();
+        else {
+          const h = document.createElement("a");
+          h.href = o, h.download = b, h.rel = "noopener", document.body.appendChild(h), h.click(), h.remove();
+        }
+        if (!t.current) return;
+        r("started"), s.current = window.setTimeout(() => r("idle"), 1800);
+      } catch {
+        t.current && r("error");
+      }
+    }
+  }, c = i === "preparing", l = i === "started", x = i === "error";
+  return /* @__PURE__ */ n(
+    z.button,
+    {
+      type: "button",
+      onClick: () => void f(),
+      disabled: d || c || l,
+      "aria-busy": c,
+      initial: !1,
+      animate: {
+        backgroundColor: l ? "#113523" : x ? "#431f1d" : "#111114",
+        color: l ? "#e1f7e8" : x ? "#ffe8e6" : "#ffffff"
+      },
+      whileHover: !d && !c && !l ? { y: -1, scale: 1.008 } : void 0,
+      whileTap: !d && !c && !l ? { y: 1, scale: 0.985 } : void 0,
+      transition: p ? { duration: 0 } : { duration: 0.24, ease: [0.16, 1, 0.3, 1] },
+      className: `flex h-16 w-[244px] items-center gap-3 rounded-[16px] p-1.5 pr-4 text-left shadow-[0_20px_46px_rgba(15,23,42,0.24),inset_0_1px_0_rgba(255,255,255,0.16)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0a84ff] focus-visible:ring-offset-4 ${d ? "cursor-not-allowed opacity-60" : c ? "cursor-wait" : l ? "cursor-default" : "cursor-pointer"}`,
+      children: [
+        /* @__PURE__ */ e(
+          z.span,
+          {
+            "aria-hidden": "true",
+            animate: { backgroundColor: l ? "#235c3d" : x ? "#6d2b27" : "#28282c" },
+            className: "relative flex h-[52px] w-[52px] shrink-0 items-center justify-center overflow-hidden rounded-[12px] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]",
+            children: c ? /* @__PURE__ */ e("span", { className: "size-10", children: /* @__PURE__ */ e(be, { src: Xe, autoplay: !p, loop: !1 }) }) : l ? /* @__PURE__ */ e(F, { size: 18, strokeWidth: 2.2 }) : x ? /* @__PURE__ */ e(se, { size: 17 }) : /* @__PURE__ */ n(z.span, { whileHover: p ? void 0 : { y: -2 }, className: "relative block h-8 w-9", children: [
+              /* @__PURE__ */ n("span", { className: "absolute left-[9px] top-0 h-[25px] w-[20px] rounded-[3px] bg-white shadow-[0_3px_8px_rgba(0,0,0,.22)]", children: [
+                /* @__PURE__ */ e("i", { className: "absolute left-1.5 right-1.5 top-2 h-px bg-black/25" }),
+                /* @__PURE__ */ e("i", { className: "absolute left-1.5 right-2 top-3 h-px bg-black/20" })
+              ] }),
+              /* @__PURE__ */ e("span", { className: "absolute bottom-[2px] left-1 h-[5px] w-7 rounded-full bg-[#8ee0a9] shadow-[0_0_0_3px_rgba(142,224,169,.08)]" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ n("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ e(Z, { initial: !1, mode: "popLayout", children: /* @__PURE__ */ e(
+            z.strong,
+            {
+              initial: { opacity: 0, y: 6, filter: "blur(4px)" },
+              animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+              exit: { opacity: 0, y: -6, filter: "blur(4px)" },
+              transition: { duration: p ? 0 : 0.18, ease: [0.16, 1, 0.3, 1] },
+              className: "block whitespace-nowrap text-[13px] font-semibold tracking-[-0.01em]",
+              children: c ? "Downloading" : l ? "Downloaded" : x ? "Try again" : "Download résumé"
+            },
+            i
+          ) }),
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: `mt-1.5 block text-[10px] font-medium ${l ? "text-[#b9dfc6]" : x ? "text-[#ffd0cc]" : "text-white/60"}`,
+              children: u
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          ye,
+          {
+            "aria-hidden": "true",
+            size: 15,
+            className: `${c || l ? "opacity-0" : "opacity-55"} transition-opacity`
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "sr-only", "aria-live": "polite", children: c ? "Downloading résumé." : l ? "Résumé downloaded." : x ? "Download failed. Try again." : "" })
+      ]
+    }
+  );
+}
+const qe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: De
+}, Symbol.toStringTag, { value: "Module" })), Ye = B({
+  source: { type: "sine", frequency: 440 },
+  envelope: { decay: 0.1 },
+  gain: 0.15
+}), We = B({
+  source: { type: "sine", frequency: 880 },
+  envelope: { decay: 0.08 },
+  gain: 0.15
+}), Fe = B({
+  source: { type: "sine", frequency: 400 },
+  envelope: { decay: 0.08 },
+  gain: 0.08
+}), Ze = B({
+  source: { type: "sine", frequency: 600 },
+  envelope: { decay: 0.08 },
+  gain: 0.08
+}), G = () => /* @__PURE__ */ e(I, { className: "size-3.5", "aria-hidden": "true" });
+function Ge() {
+  return /* @__PURE__ */ n("div", { className: "px-2 pb-2 pt-1 text-zinc-950", children: [
+    /* @__PURE__ */ n("div", { className: "flex items-end justify-between border-b border-zinc-200 px-1 pb-3", children: [
+      /* @__PURE__ */ e("p", { className: "text-lg font-semibold tracking-[-0.03em]", children: "Projects" }),
+      /* @__PURE__ */ e("span", { className: "text-xs font-medium tabular-nums text-zinc-400", children: "4 projects" })
+    ] }),
+    /* @__PURE__ */ n("button", { className: "group flex w-full items-center gap-3 border-b border-zinc-100 px-1 py-3 text-left", children: [
+      /* @__PURE__ */ n("span", { className: "relative grid size-10 shrink-0 place-items-center overflow-hidden rounded-xl bg-[#e9e5ff] text-[#5a45d6]", children: [
+        /* @__PURE__ */ e(le, { className: "size-4 transition-transform duration-500 group-hover:rotate-45" }),
+        /* @__PURE__ */ e("span", { className: "absolute -bottom-2 -right-2 size-5 rounded-full bg-[#ffb38a]/70 blur-sm" })
+      ] }),
+      /* @__PURE__ */ n("span", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ e("strong", { className: "block text-sm font-semibold", children: "All projects" }),
+        /* @__PURE__ */ e("span", { className: "block text-xs text-zinc-500", children: "View case studies" })
+      ] }),
+      /* @__PURE__ */ e(G, {})
+    ] }),
+    /* @__PURE__ */ n("button", { className: "group flex w-full items-center gap-3 px-1 py-3 text-left", children: [
+      /* @__PURE__ */ e("span", { className: "grid size-10 shrink-0 place-items-center rounded-xl bg-[#dff6ed] text-[#08795c]", children: /* @__PURE__ */ e(Ne, { className: "size-4 transition-transform duration-500 group-hover:scale-125" }) }),
+      /* @__PURE__ */ n("span", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ e("strong", { className: "block text-sm font-semibold", children: "Experiments" }),
+        /* @__PURE__ */ e("span", { className: "block text-xs text-zinc-500", children: "Motion and UI tests" })
+      ] }),
+      /* @__PURE__ */ e(G, {})
+    ] })
+  ] });
+}
+function He() {
+  return /* @__PURE__ */ n("div", { className: "p-3 text-zinc-950", children: [
+    /* @__PURE__ */ n("div", { className: "overflow-hidden rounded-2xl bg-[#141417] p-4 text-white", children: [
+      /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ n("span", { className: "flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-white/55", children: [
+          /* @__PURE__ */ n("span", { className: "relative flex size-2", children: [
+            /* @__PURE__ */ e("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-[#a8ff78] opacity-60" }),
+            /* @__PURE__ */ e("span", { className: "relative inline-flex size-2 rounded-full bg-[#a8ff78]" })
+          ] }),
+          "In progress"
+        ] }),
+        /* @__PURE__ */ e("span", { className: "text-[10px] text-white/35", children: "WIP · 72%" })
+      ] }),
+      /* @__PURE__ */ e("p", { className: "mt-5 text-xl font-semibold tracking-[-0.04em]", children: "Northstar" }),
+      /* @__PURE__ */ e("p", { className: "mt-1 text-xs leading-5 text-white/55", children: "Portfolio case study." }),
+      /* @__PURE__ */ e("div", { className: "mt-4 flex h-1.5 overflow-hidden rounded-full bg-white/10", children: /* @__PURE__ */ e(
+        z.span,
+        {
+          className: "block rounded-full bg-[#a8ff78]",
+          initial: { width: "18%" },
+          animate: { width: "72%" },
+          transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] }
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-1 pt-3 text-xs", children: [
+      /* @__PURE__ */ e("span", { className: "text-zinc-500", children: "Next: motion" }),
+      /* @__PURE__ */ n("button", { className: "flex items-center gap-1 font-semibold text-zinc-950", children: [
+        "View project ",
+        /* @__PURE__ */ e(G, {})
+      ] })
+    ] })
+  ] });
+}
+const Ve = [
+  { id: "calm", label: "Calm", detail: "Short" },
+  { id: "spring", label: "Spring", detail: "Bouncy" },
+  { id: "alive", label: "Full", detail: "Expressive" }
+];
+function Ue() {
+  const [o, b] = S("spring"), [u, g] = S(!0);
+  return /* @__PURE__ */ n("div", { className: "p-3 text-zinc-950", children: [
+    /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-1", children: [
+      /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ e("p", { className: "text-sm font-semibold", children: "Motion style" }),
+        /* @__PURE__ */ e("p", { className: "mt-0.5 text-xs text-zinc-500", children: "Choose how the preview moves." })
+      ] }),
+      /* @__PURE__ */ e(_e, { className: "size-4 text-zinc-300", "aria-hidden": "true" })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "relative mt-4 grid grid-cols-3 rounded-2xl bg-zinc-100 p-1", children: Ve.map((d) => {
+      const i = o === d.id;
+      return /* @__PURE__ */ n(
+        "button",
+        {
+          onClick: () => b(d.id),
+          className: "relative z-10 flex h-12 flex-col items-center justify-center rounded-xl",
+          children: [
+            i && /* @__PURE__ */ e(
+              z.span,
+              {
+                layoutId: "feel-mode",
+                className: "absolute inset-0 rounded-xl bg-white shadow-sm",
+                transition: { type: "spring", stiffness: 430, damping: 32 }
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "relative text-xs font-semibold", children: d.label }),
+            /* @__PURE__ */ e("span", { className: "relative mt-0.5 text-[9px] text-zinc-400", children: d.detail })
+          ]
+        },
+        d.id
+      );
+    }) }),
+    /* @__PURE__ */ n(
+      "button",
+      {
+        onClick: () => g((d) => !d),
+        "aria-pressed": u,
+        className: "mt-3 flex w-full items-center justify-between rounded-xl px-1 py-2 text-left",
+        children: [
+          /* @__PURE__ */ n("span", { className: "flex items-center gap-2 text-xs font-medium", children: [
+            /* @__PURE__ */ e(ce, { className: "size-4", "aria-hidden": "true" }),
+            "Sound"
+          ] }),
+          /* @__PURE__ */ e("span", { className: "rounded-full bg-zinc-100 px-2 py-1 text-[10px] font-semibold text-zinc-500", children: u ? "On" : "Off" })
+        ]
+      }
+    )
+  ] });
+}
+function Ke() {
+  return /* @__PURE__ */ n("div", { className: "p-3 text-zinc-950", children: [
+    /* @__PURE__ */ n("button", { className: "group w-full text-left", children: [
+      /* @__PURE__ */ n("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ e("span", { className: "text-[10px] font-semibold uppercase tracking-[0.16em] text-[#6d5be8]", children: "Latest note" }),
+        /* @__PURE__ */ e("span", { className: "text-[10px] tabular-nums text-zinc-400", children: "6 min" })
+      ] }),
+      /* @__PURE__ */ e("p", { className: "mt-3 max-w-[15rem] text-xl font-semibold leading-6 tracking-[-0.04em]", children: "Using motion to explain state changes." }),
+      /* @__PURE__ */ n("div", { className: "mt-4 flex items-center justify-between border-t border-zinc-200 pt-3", children: [
+        /* @__PURE__ */ e("span", { className: "text-xs text-zinc-500", children: "August 18, 2026" }),
+        /* @__PURE__ */ e("span", { className: "grid size-7 place-items-center rounded-full bg-zinc-950 text-white transition-transform group-hover:rotate-45", children: /* @__PURE__ */ e(G, {}) })
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "mt-2 flex gap-2", children: [
+      /* @__PURE__ */ e("button", { className: "flex-1 rounded-xl bg-[#f4f2ff] px-3 py-2 text-left text-xs font-medium text-[#5b49c8]", children: "Process" }),
+      /* @__PURE__ */ e("button", { className: "flex-1 rounded-xl bg-[#fff1e9] px-3 py-2 text-left text-xs font-medium text-[#a94f22]", children: "Notes" })
+    ] })
+  ] });
+}
+function Je() {
+  const [o, b] = S(!1), u = "hello@example.com", g = async () => {
+    await navigator.clipboard.writeText(u), b(!0), window.setTimeout(() => b(!1), 1600);
+  };
+  return /* @__PURE__ */ n("div", { className: "p-3 text-zinc-950", children: [
+    /* @__PURE__ */ n("div", { className: "relative overflow-hidden rounded-2xl bg-[#e8f8d9] p-4", children: [
+      /* @__PURE__ */ e(
+        z.span,
+        {
+          className: "absolute -right-5 -top-7 size-24 rounded-full border border-[#7bbf49]/25",
+          animate: { scale: [1, 1.12, 1] },
+          transition: { duration: 3.2, repeat: 1 / 0, ease: "easeInOut" }
+        }
+      ),
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-[#47752b]", children: [
+        /* @__PURE__ */ e("span", { className: "size-2 rounded-full bg-[#61a936]" }),
+        "Available for work"
+      ] }),
+      /* @__PURE__ */ e("p", { className: "mt-5 text-xl font-semibold tracking-[-0.04em]", children: "Let’s work together." }),
+      /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-[#47752b]", children: "Tell me about your project." })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "mt-3 grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ n(
+        "a",
+        {
+          href: `mailto:${u}`,
+          className: "flex items-center justify-center gap-2 rounded-xl bg-zinc-950 px-3 py-2.5 text-xs font-semibold text-white",
+          style: { color: "#ffffff" },
+          children: [
+            /* @__PURE__ */ e(D, { className: "size-3.5", "aria-hidden": "true" }),
+            "Email"
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: g,
+          className: "flex items-center justify-center gap-1 rounded-xl bg-zinc-100 px-3 py-2.5 text-xs font-semibold",
+          children: o ? "Copied" : "Copy email"
+        }
+      )
+    ] })
+  ] });
+}
+const U = [
+  { id: "explore", label: "Work", icon: /* @__PURE__ */ e(ve, { className: "size-4" }), content: /* @__PURE__ */ e(Ge, {}) },
+  { id: "now", label: "Status", icon: /* @__PURE__ */ e(le, { className: "size-4" }), content: /* @__PURE__ */ e(He, {}) },
+  { id: "feel", label: "Motion", icon: /* @__PURE__ */ e(ce, { className: "size-4" }), content: /* @__PURE__ */ e(Ue, {}) },
+  { id: "notes", label: "Notes", icon: /* @__PURE__ */ e(ke, { className: "size-4" }), content: /* @__PURE__ */ e(Ke, {}) },
+  { id: "connect", label: "Connect", icon: /* @__PURE__ */ e(D, { className: "size-4" }), content: /* @__PURE__ */ e(Je, {}) }
+], K = 50, ne = 290, Qe = 200, et = {
+  enter: (o) => ({ x: o * 32, opacity: 0, filter: "blur(4px)" }),
+  center: { x: 0, opacity: 1, filter: "blur(0px)" },
+  exit: (o) => ({ x: o * -32, opacity: 0, filter: "blur(4px)" })
+}, tt = { type: "spring", stiffness: 340, damping: 28 }, rt = { duration: 0.3, ease: [0.4, 0, 0.2, 1] }, at = { duration: 0.24, ease: [0.4, 0, 0.2, 1] };
+function nt() {
+  const [o, b] = S("explore"), [u, g] = S(0), d = v(0), [i, { height: r }] = Pe({ debounce: 0 }), s = U.find((c) => c.id === o), t = o !== null, p = t ? r + K : K, f = async (c) => {
+    const l = U.findIndex((x) => x.id === c);
+    if (c === o) {
+      b(null), await Q(), We();
+      return;
+    }
+    await Q(), o === null ? Ye() : (Fe(), setTimeout(() => Ze(), 60)), g(l > d.current ? 1 : -1), d.current = l, b(c);
+  };
+  return /* @__PURE__ */ n(xe, { children: [
+    t && /* @__PURE__ */ e(
+      "div",
+      {
+        "aria-hidden": "true",
+        style: {
+          position: "fixed",
+          left: -9999,
+          top: 0,
+          width: ne,
+          pointerEvents: "none",
+          visibility: "hidden"
+        },
+        children: /* @__PURE__ */ e("div", { ref: i, children: s == null ? void 0 : s.content })
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "flex h-96 items-end justify-center", children: /* @__PURE__ */ n(
+      z.div,
+      {
+        className: "relative mx-auto rounded-3xl border border-zinc-200 bg-white shadow-xl shadow-zinc-200/50",
+        style: { overflow: "hidden" },
+        animate: { height: p, width: t ? ne : Qe },
+        transition: tt,
+        children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                bottom: K,
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ e(Z, { custom: u, initial: !1, children: t && /* @__PURE__ */ e(
+                z.div,
+                {
+                  custom: u,
+                  variants: et,
+                  initial: "enter",
+                  animate: "center",
+                  exit: "exit",
+                  transition: at,
+                  className: "absolute inset-x-0 top-0",
+                  children: s == null ? void 0 : s.content
+                },
+                o
+              ) })
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "absolute inset-x-0 bottom-0 h-[50px] border-t border-zinc-100 bg-white p-2", children: /* @__PURE__ */ e("div", { className: "flex h-9 w-full items-center justify-center gap-1", children: U.map((c) => {
+            const l = o === c.id;
+            return /* @__PURE__ */ n(
+              z.button,
+              {
+                onClick: () => f(c.id),
+                "aria-label": c.label,
+                "aria-pressed": l,
+                className: "relative flex h-full items-center justify-center rounded-2xl text-sm font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2",
+                animate: {
+                  paddingLeft: l ? "1rem" : "0.5rem",
+                  paddingRight: l ? "1rem" : "0.5rem",
+                  gap: l ? "0.5rem" : "0rem",
+                  backgroundColor: l ? "rgba(0,0,0,0.05)" : "rgba(0,0,0,0)",
+                  color: l ? "#18181b" : "#a1a1aa"
+                },
+                transition: rt,
+                whileHover: { color: l ? "#18181b" : "#71717a" },
+                children: [
+                  c.icon,
+                  /* @__PURE__ */ e(Z, { initial: !1, children: l && /* @__PURE__ */ e(
+                    z.span,
+                    {
+                      initial: { opacity: 0, width: 0 },
+                      animate: { opacity: 1, width: "auto" },
+                      exit: { opacity: 0, width: 0 },
+                      transition: {
+                        opacity: { duration: 0.15, ease: "easeInOut" },
+                        width: { duration: 0.28, ease: [0.4, 0, 0.2, 1] }
+                      },
+                      className: "overflow-hidden whitespace-nowrap font-semibold leading-4 tracking-tight",
+                      children: c.label
+                    },
+                    c.id + "-label"
+                  ) })
+                ]
+              },
+              c.id
+            );
+          }) }) })
+        ]
+      }
+    ) })
+  ] });
+}
+const ot = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ExpandableTab: nt
+}, Symbol.toStringTag, { value: "Module" })), oe = [
+  { id: "lift", label: "Lift" },
+  { id: "hinge", label: "Hinge" },
+  { id: "drift", label: "Drift" },
+  { id: "ripple", label: "Ripple" },
+  { id: "stretch", label: "Stretch" },
+  { id: "cascade", label: "Cascade" },
+  { id: "magnet", label: "Magnet" },
+  { id: "arc", label: "Arc" },
+  { id: "roll", label: "Roll" },
+  { id: "echo", label: "Echo" },
+  { id: "shutter", label: "Shutter" },
+  { id: "orbit", label: "Orbit" },
+  { id: "weight", label: "Weight" },
+  { id: "sweep", label: "Sweep" },
+  { id: "scatter", label: "Scatter" },
+  { id: "pulse", label: "Pulse" },
+  { id: "drop", label: "Drop" },
+  { id: "fan", label: "Fan" },
+  { id: "ticker", label: "Ticker" }
+];
+function ie({
+  text: o = "SELECTED WORK",
+  alternateText: b = "CREATIVE CODE",
+  variant: u = "lift"
+}) {
+  const g = v(null), d = oe.find((t) => t.id === u) ?? oe[0];
+  ee(() => {
+    var y, C, N;
+    const t = (y = g.current) == null ? void 0 : y.querySelectorAll("[data-text-letter]");
+    if (!(t != null && t.length)) return;
+    const p = ((C = g.current) == null ? void 0 : C.querySelectorAll("[data-ticker-to]")) ?? [], f = ((N = g.current) == null ? void 0 : N.querySelectorAll("[data-ticker-dynamic]")) ?? [], c = window.matchMedia("(prefers-reduced-motion: reduce)").matches, l = (t.length - 1) / 2, x = d.id;
+    if (w.killTweensOf(t), w.set(t, { clearProps: "transform,opacity,filter,textShadow,clipPath,transformOrigin,fontWeight" }), x === "ticker") {
+      const a = Number.parseFloat(getComputedStyle(g.current).fontSize) || 16;
+      f.forEach((k) => {
+        var M, P;
+        const _ = ((M = k.querySelector("[data-ticker-measure-from]")) == null ? void 0 : M.getBoundingClientRect().width) ?? a * 0.62, T = ((P = k.querySelector("[data-ticker-measure-to]")) == null ? void 0 : P.getBoundingClientRect().width) ?? a * 0.62;
+        k.dataset.tickerFromWidth = String(_ / a), k.dataset.tickerToWidth = String(T / a);
+      }), w.set(f, { width: (k, _) => `${_.dataset.tickerFromWidth}em` }), w.set(p, { clearProps: "transform,opacity" }), w.set(t, {
+        rotateX: 0,
+        yPercent: 0,
+        visibility: "visible",
+        transformOrigin: "50% 50%",
+        backfaceVisibility: "hidden"
+      }), w.set(p, {
+        rotateX: 90,
+        yPercent: 6,
+        visibility: "hidden",
+        transformOrigin: "50% 50%",
+        backfaceVisibility: "hidden"
+      });
+    }
+    if (c) {
+      w.set(t, { opacity: 1 });
+      return;
+    }
+    const h = w.timeline(), m = w.timeline({ repeat: -1, repeatDelay: 2, delay: 1.35 });
+    return x === "lift" && (h.fromTo(
+      t,
+      { yPercent: 125, rotateX: -80, opacity: 0 },
+      { yPercent: 0, rotateX: 0, opacity: 1, duration: 0.86, stagger: 0.035, ease: "power4.out" }
+    ), m.to(t, {
+      y: (a) => Math.sin(a * 0.86) * 11,
+      rotateZ: (a) => Math.sin(a * 0.72) * 3,
+      duration: 0.48,
+      stagger: { each: 0.028, from: "center" },
+      ease: "power3.inOut"
+    }).to(t, {
+      y: 0,
+      rotateZ: 0,
+      duration: 0.72,
+      stagger: { each: 0.024, from: "center" },
+      ease: "elastic.out(1,.72)"
+    })), x === "hinge" && (h.fromTo(
+      t,
+      { rotateX: -105, yPercent: 28, opacity: 0, transformOrigin: "50% 100%" },
+      { rotateX: 0, yPercent: 0, opacity: 1, duration: 0.72, stagger: 0.045, ease: "back.out(1.8)" }
+    ), m.to(t, { rotateX: -90, yPercent: -28, opacity: 0, duration: 0.32, stagger: 0.04, ease: "power3.in" }).set(t, { rotateX: 90, yPercent: 28 }).to(t, { rotateX: 0, yPercent: 0, opacity: 1, duration: 0.48, stagger: 0.04, ease: "power4.out" })), x === "drift" && (h.fromTo(
+      t,
+      {
+        x: (a) => (a % 2 ? 1 : -1) * (32 + a * 3),
+        y: (a) => (a % 3 - 1) * 42,
+        rotateZ: (a) => (a % 2 ? 1 : -1) * (8 + a),
+        opacity: 0
+      },
+      {
+        x: 0,
+        y: 0,
+        rotateZ: 0,
+        opacity: 1,
+        duration: 0.95,
+        stagger: { each: 0.028, from: "random" },
+        ease: "expo.out"
+      }
+    ), m.to(t, {
+      x: (a) => Math.cos(a * 0.9) * 8,
+      y: (a) => Math.sin(a * 1.1) * 9,
+      rotateZ: (a) => Math.sin(a) * 4,
+      duration: 0.5,
+      stagger: { each: 0.025, from: "random" },
+      ease: "power3.inOut"
+    }).to(t, {
+      x: 0,
+      y: 0,
+      rotateZ: 0,
+      duration: 0.78,
+      stagger: { each: 0.02, from: "random" },
+      ease: "elastic.out(1,.68)"
+    })), x === "ripple" && (h.fromTo(
+      t,
+      { y: 24, scale: 0.48, opacity: 0 },
+      { y: 0, scale: 1, opacity: 1, duration: 0.7, stagger: { each: 0.045, from: "center" }, ease: "back.out(2.2)" }
+    ), m.to(t, {
+      y: (a) => Math.sin((a - l) * 0.9) * 14,
+      scale: (a) => 1 + Math.max(0, 1 - Math.abs(a - l) / 6) * 0.16,
+      duration: 0.42,
+      stagger: { each: 0.025, from: "center" },
+      ease: "sine.inOut"
+    }).to(t, {
+      y: 0,
+      scale: 1,
+      duration: 0.68,
+      stagger: { each: 0.025, from: "center" },
+      ease: "elastic.out(1,.68)"
+    })), x === "stretch" && (h.fromTo(
+      t,
+      { scaleX: 0.12, scaleY: 1.65, opacity: 0, transformOrigin: "50% 100%" },
+      { scaleX: 1, scaleY: 1, opacity: 1, duration: 0.82, stagger: 0.04, ease: "elastic.out(1,.72)" }
+    ), m.to(t, {
+      scaleX: 0.72,
+      scaleY: 1.32,
+      y: -6,
+      duration: 0.38,
+      stagger: { each: 0.025, from: "center" },
+      ease: "power3.inOut"
+    }).to(t, {
+      scaleX: 1,
+      scaleY: 1,
+      y: 0,
+      duration: 0.68,
+      stagger: { each: 0.025, from: "center" },
+      ease: "elastic.out(1,.65)"
+    })), x === "cascade" && (h.fromTo(
+      t,
+      { y: (a) => 28 + a * 7, skewY: 12, opacity: 0 },
+      { y: 0, skewY: 0, opacity: 1, duration: 0.72, stagger: 0.045, ease: "power4.out" }
+    ), m.to(t, {
+      y: (a) => (a - l) * 3,
+      skewY: -7,
+      duration: 0.42,
+      stagger: 0.03,
+      ease: "power3.inOut"
+    }).to(t, { y: 0, skewY: 0, duration: 0.58, stagger: 0.03, ease: "back.out(2)" })), x === "magnet" && (h.fromTo(
+      t,
+      { x: (a) => (l - a) * 24, scaleX: 0.3, opacity: 0 },
+      { x: 0, scaleX: 1, opacity: 1, duration: 0.88, stagger: { each: 0.026, from: "center" }, ease: "expo.out" }
+    ), m.to(t, {
+      x: (a) => (l - a) * 5.5,
+      scaleX: 0.72,
+      duration: 0.38,
+      stagger: { each: 0.018, from: "edges" },
+      ease: "power3.in"
+    }).to(t, {
+      x: 0,
+      scaleX: 1,
+      duration: 0.76,
+      stagger: { each: 0.018, from: "center" },
+      ease: "elastic.out(1,.62)"
+    })), x === "arc" && (h.fromTo(
+      t,
+      {
+        x: (a) => (a - l) * 13,
+        y: (a) => Math.abs(a - l) * -12,
+        rotateZ: (a) => (a - l) * 3.5,
+        opacity: 0
+      },
+      {
+        x: 0,
+        y: 0,
+        rotateZ: 0,
+        opacity: 1,
+        duration: 0.9,
+        stagger: { each: 0.03, from: "center" },
+        ease: "expo.out"
+      }
+    ), m.to(t, {
+      y: (a) => Math.abs(a - l) * -3.2,
+      rotateZ: (a) => (a - l) * 1.1,
+      duration: 0.55,
+      stagger: { each: 0.02, from: "center" },
+      ease: "power3.inOut"
+    }).to(t, { y: 0, rotateZ: 0, duration: 0.65, stagger: { each: 0.02, from: "center" }, ease: "power3.out" })), x === "roll" && (h.fromTo(
+      t,
+      { rotateY: -110, xPercent: -35, opacity: 0, transformOrigin: "0% 50%" },
+      { rotateY: 0, xPercent: 0, opacity: 1, duration: 0.72, stagger: 0.05, ease: "back.out(1.7)" }
+    ), m.to(t, { rotateY: 88, xPercent: 26, opacity: 0, duration: 0.3, stagger: 0.04, ease: "power3.in" }).set(t, { rotateY: -88, xPercent: -26 }).to(t, { rotateY: 0, xPercent: 0, opacity: 1, duration: 0.46, stagger: 0.04, ease: "power4.out" })), x === "echo" && (h.fromTo(
+      t,
+      { textShadow: "18px 0 rgba(32,63,255,.45),-18px 0 rgba(255,56,96,.3)", opacity: 0 },
+      {
+        textShadow: "0px 0 rgba(32,63,255,0),0px 0 rgba(255,56,96,0)",
+        opacity: 1,
+        duration: 0.85,
+        stagger: { each: 0.04, from: "center" },
+        ease: "power3.out"
+      }
+    ), m.to(t, {
+      textShadow: "7px 0 rgba(32,63,255,.42),-7px 0 rgba(255,56,96,.28)",
+      x: (a) => a % 2 ? 2 : -2,
+      duration: 0.3,
+      stagger: { each: 0.025, from: "center" },
+      ease: "power2.inOut"
+    }).to(t, {
+      textShadow: "0px 0 rgba(32,63,255,0),0px 0 rgba(255,56,96,0)",
+      x: 0,
+      duration: 0.52,
+      stagger: { each: 0.025, from: "center" },
+      ease: "power3.out"
+    })), x === "shutter" && (h.fromTo(
+      t,
+      { clipPath: "inset(0 100% 0 0)", x: -12, opacity: 0 },
+      { clipPath: "inset(0 0% 0 0)", x: 0, opacity: 1, duration: 0.58, stagger: 0.052, ease: "power4.out" }
+    ), m.to(t, { clipPath: "inset(0 0 0 100%)", x: 10, duration: 0.34, stagger: 0.035, ease: "power3.in" }).set(t, { clipPath: "inset(0 100% 0 0)", x: -10 }).to(t, { clipPath: "inset(0 0% 0 0)", x: 0, duration: 0.48, stagger: 0.035, ease: "power4.out" })), x === "orbit" && (h.fromTo(
+      t,
+      {
+        x: (a) => Math.cos(a * 0.86) * 74,
+        y: (a) => Math.sin(a * 0.86) * 54,
+        rotateZ: (a) => a * 24 - 90,
+        scale: 0.42,
+        opacity: 0
+      },
+      {
+        x: 0,
+        y: 0,
+        rotateZ: 0,
+        scale: 1,
+        opacity: 1,
+        duration: 1.05,
+        stagger: { each: 0.025, from: "center" },
+        ease: "expo.out"
+      }
+    ), m.to(t, {
+      x: (a) => Math.cos(a * 0.82) * 8,
+      y: (a) => Math.sin(a * 0.82) * 8,
+      rotateZ: (a) => Math.sin(a) * 5,
+      duration: 0.62,
+      stagger: { each: 0.018, from: "center" },
+      ease: "sine.inOut"
+    }).to(t, {
+      x: 0,
+      y: 0,
+      rotateZ: 0,
+      duration: 0.72,
+      stagger: { each: 0.018, from: "center" },
+      ease: "power3.out"
+    })), x === "weight" && (h.fromTo(
+      t,
+      { fontWeight: 280, y: 8, opacity: 0 },
+      { fontWeight: 650, y: 0, opacity: 1, duration: 0.76, stagger: 0.05, ease: "power4.out" }
+    ), m.to(t, { fontWeight: 820, y: -4, scaleX: 1.035, duration: 0.34, stagger: 0.055, ease: "power3.inOut" }).to(t, { fontWeight: 650, y: 0, scaleX: 1, duration: 0.52, stagger: 0.055, ease: "power3.out" })), x === "sweep" && (h.fromTo(
+      t,
+      { filter: "blur(13px)", y: 14, opacity: 0 },
+      { filter: "blur(0px)", y: 0, opacity: 1, duration: 0.68, stagger: 0.055, ease: "power3.out" }
+    ), m.to(t, { filter: "blur(8px)", opacity: 0.28, y: -5, duration: 0.28, stagger: 0.045, ease: "power2.in" }).to(t, { filter: "blur(0px)", opacity: 1, y: 0, duration: 0.46, stagger: 0.045, ease: "power3.out" })), x === "scatter" && (h.fromTo(
+      t,
+      {
+        x: (a) => {
+          const k = a / Math.max(1, t.length - 1) * Math.PI * 1.35 - Math.PI * 0.68;
+          return Math.cos(k) * (58 + Math.abs(a - l) * 4);
+        },
+        y: (a) => {
+          const k = a / Math.max(1, t.length - 1) * Math.PI * 1.35 - Math.PI * 0.68;
+          return Math.sin(k) * 46;
+        },
+        rotateZ: (a) => (a - l) * 4.5,
+        scale: 0.55,
+        filter: "blur(4px)",
+        opacity: 0
+      },
+      {
+        x: 0,
+        y: 0,
+        rotateZ: 0,
+        scale: 1,
+        filter: "blur(0px)",
+        opacity: 1,
+        duration: 1.05,
+        stagger: { each: 0.025, from: "center" },
+        ease: "expo.out"
+      }
+    ), m.to(t, {
+      x: (a) => (a - l) * 4.2,
+      y: (a) => -Math.cos((a - l) * 0.7) * 11,
+      rotateZ: (a) => (a - l) * 0.8,
+      scale: 0.9,
+      duration: 0.36,
+      stagger: { each: 0.018, from: "center" },
+      ease: "power3.inOut"
+    }).to(t, {
+      x: 0,
+      y: 0,
+      rotateZ: 0,
+      scale: 1,
+      duration: 0.78,
+      stagger: { each: 0.018, from: "edges" },
+      ease: "elastic.out(1,.68)"
+    })), x === "pulse" && (h.fromTo(
+      t,
+      { scale: 0.18, y: 16, opacity: 0 },
+      {
+        scale: 1,
+        y: 0,
+        opacity: 1,
+        duration: 0.72,
+        stagger: { each: 0.045, from: "center" },
+        ease: "elastic.out(1,.6)"
+      }
+    ), m.to(t, { scale: 1.2, y: -7, duration: 0.28, stagger: 0.045, ease: "power3.out" }).to(t, { scale: 1, y: 0, duration: 0.52, stagger: 0.045, ease: "elastic.out(1,.58)" })), x === "drop" && (h.fromTo(
+      t,
+      { y: (a) => -90 - a * 8, rotateZ: (a) => a % 2 ? 14 : -14, opacity: 0 },
+      { y: 0, rotateZ: 0, opacity: 1, duration: 0.86, stagger: 0.045, ease: "bounce.out" }
+    ), m.to(t, {
+      y: -24,
+      rotateZ: (a) => a % 2 ? 4 : -4,
+      duration: 0.34,
+      stagger: { each: 0.032, from: "center" },
+      ease: "power3.out"
+    }).to(t, {
+      y: 0,
+      rotateZ: 0,
+      duration: 0.62,
+      stagger: { each: 0.032, from: "center" },
+      ease: "bounce.out"
+    })), x === "fan" && (h.fromTo(
+      t,
+      {
+        x: (a) => (a - l) * -10,
+        y: 34,
+        rotateZ: (a) => (a - l) * 9,
+        opacity: 0,
+        transformOrigin: "50% 120%"
+      },
+      {
+        x: 0,
+        y: 0,
+        rotateZ: 0,
+        opacity: 1,
+        duration: 0.9,
+        stagger: { each: 0.025, from: "center" },
+        ease: "expo.out"
+      }
+    ), m.to(t, {
+      x: (a) => (a - l) * 2.4,
+      y: (a) => Math.abs(a - l) * 1.7,
+      rotateZ: (a) => (a - l) * 2.1,
+      duration: 0.5,
+      stagger: { each: 0.018, from: "center" },
+      ease: "power3.inOut"
+    }).to(t, {
+      x: 0,
+      y: 0,
+      rotateZ: 0,
+      duration: 0.68,
+      stagger: { each: 0.018, from: "edges" },
+      ease: "back.out(1.5)"
+    })), x === "ticker" && m.addLabel("toAlternate").to(
+      t,
+      {
+        rotateX: -90,
+        yPercent: -6,
+        duration: 0.24,
+        ease: "power3.in"
+      },
+      "toAlternate"
+    ).to(
+      f,
+      {
+        width: (a, k) => `${k.dataset.tickerToWidth}em`,
+        duration: 0.58,
+        ease: "power3.inOut"
+      },
+      "toAlternate"
+    ).set(
+      t,
+      {
+        visibility: "hidden"
+      },
+      "toAlternate+=.24"
+    ).set(
+      p,
+      {
+        visibility: "visible",
+        rotateX: 90,
+        yPercent: 6
+      },
+      "toAlternate+=.24"
+    ).to(
+      p,
+      {
+        rotateX: 0,
+        yPercent: 0,
+        duration: 0.34,
+        ease: "back.out(1.35)"
+      },
+      "toAlternate+=.24"
+    ).addLabel("toCurrent", "+=1.35").to(
+      p,
+      {
+        rotateX: -90,
+        yPercent: -6,
+        duration: 0.24,
+        ease: "power3.in"
+      },
+      "toCurrent"
+    ).to(
+      f,
+      {
+        width: (a, k) => `${k.dataset.tickerFromWidth}em`,
+        duration: 0.58,
+        ease: "power3.inOut"
+      },
+      "toCurrent"
+    ).set(
+      p,
+      {
+        visibility: "hidden"
+      },
+      "toCurrent+=.24"
+    ).set(
+      t,
+      {
+        visibility: "visible",
+        rotateX: 90,
+        yPercent: 6
+      },
+      "toCurrent+=.24"
+    ).to(
+      t,
+      {
+        rotateX: 0,
+        yPercent: 0,
+        duration: 0.34,
+        ease: "back.out(1.35)"
+      },
+      "toCurrent+=.24"
+    ), () => {
+      h.kill(), m.kill(), w.killTweensOf(t), w.killTweensOf(p), w.killTweensOf(f);
+    };
+  }, [o, b, d]);
+  const i = o.toUpperCase(), r = b.toUpperCase(), s = Math.max(i.length, r.length);
+  return /* @__PURE__ */ e("div", { className: "showcase-fullbleed relative flex min-h-[30rem] w-full items-center justify-center bg-transparent px-5 pb-5 pt-24", children: /* @__PURE__ */ e(
+    "span",
+    {
+      ref: g,
+      "data-variant": d.id,
+      "aria-label": d.id === "ticker" ? `${i} changes to ${r}. Ticker animation.` : `${o}. ${d.label} animation.`,
+      className: `inline-flex items-center whitespace-nowrap text-[clamp(2.35rem,9cqw,6.5rem)] font-semibold leading-none text-[#111] [perspective:900px] ${d.id === "ticker" ? "tracking-[-.055em]" : "tracking-[-.065em]"}`,
+      children: d.id === "ticker" ? Array.from({ length: s }, (t, p) => {
+        const f = i[p] ?? " ", c = r[p] ?? " ";
+        return f === " " && c === " " ? /* @__PURE__ */ e(
+          "span",
+          {
+            "data-ticker-cell": !0,
+            "aria-hidden": "true",
+            className: "inline-block h-[1em] w-[.34em]"
+          },
+          `ticker-gap-${p}`
+        ) : f === c ? /* @__PURE__ */ e(
+          "span",
+          {
+            "data-ticker-cell": !0,
+            "aria-hidden": "true",
+            className: "inline-flex h-[1em] items-center",
+            children: f
+          },
+          `ticker-static-${f}-${p}`
+        ) : /* @__PURE__ */ n(
+          "span",
+          {
+            "data-ticker-cell": !0,
+            "data-ticker-dynamic": !0,
+            "aria-hidden": "true",
+            className: "relative inline-block h-[1em] w-[.62em] overflow-visible align-top [perspective:700px] [transform-style:preserve-3d]",
+            children: [
+              /* @__PURE__ */ e("span", { "data-ticker-measure-from": !0, className: "invisible absolute left-0 top-0 whitespace-pre", children: f === " " ? " " : f }),
+              /* @__PURE__ */ e("span", { "data-ticker-measure-to": !0, className: "invisible absolute left-0 top-0 whitespace-pre", children: c === " " ? " " : c }),
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  "data-text-letter": !0,
+                  className: "absolute inset-0 flex items-center justify-center leading-none will-change-transform",
+                  children: f === " " ? " " : f
+                }
+              ),
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  "data-ticker-to": !0,
+                  className: "absolute inset-0 flex items-center justify-center leading-none will-change-transform",
+                  children: c === " " ? " " : c
+                }
+              )
+            ]
+          },
+          `ticker-${f}-${c}-${p}`
+        );
+      }) : [...o].map((t, p) => /* @__PURE__ */ e(
+        "span",
+        {
+          "data-text-letter": !0,
+          "aria-hidden": "true",
+          className: `inline-block will-change-transform ${t === " " ? "w-[.3em]" : ""}`,
+          children: t === " " ? " " : t
+        },
+        `${t}-${p}`
+      ))
+    }
+  ) });
+}
+const it = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  TextMotion: ie,
+  default: ie
+}, Symbol.toStringTag, { value: "Module" }));
+function st() {
+  const o = v(null), b = v(null), u = v({ x: 0.58, y: 0.46, energy: 0 });
+  return L(() => {
+    const d = o.current, i = b.current, r = i == null ? void 0 : i.getContext("2d");
+    if (!d || !i || !r) return;
+    let s = 1, t = 1, p = !0;
+    const f = matchMedia("(prefers-reduced-motion: reduce)").matches, c = () => {
+      const m = d.getBoundingClientRect(), y = Math.min(devicePixelRatio, 1.5);
+      s = Math.max(1, m.width), t = Math.max(1, m.height), i.width = Math.round(s * y), i.height = Math.round(t * y), i.style.width = `${s}px`, i.style.height = `${t}px`, r.setTransform(y, 0, 0, y, 0, 0);
+    };
+    c();
+    const l = new ResizeObserver(c);
+    l.observe(d);
+    const x = new IntersectionObserver(([m]) => {
+      p = m.isIntersecting;
+    });
+    x.observe(d);
+    const h = () => {
+      if (!p) return;
+      const m = f ? 1.8 : w.ticker.time * 0.16, y = r.createLinearGradient(0, 0, s, t);
+      y.addColorStop(0, "#f7f7f9"), y.addColorStop(0.46, "#dfe1e8"), y.addColorStop(1, "#b9becb"), r.fillStyle = y, r.fillRect(0, 0, s, t);
+      const C = u.current.x * s, N = u.current.y * t;
+      for (let _ = 0; _ < 7; _ += 1) {
+        const T = new Path2D(), M = t * (-0.08 + _ * 0.16);
+        for (let j = 0; j <= 80; j += 1) {
+          const A = j / 80, X = A * s, V = Math.exp(-Math.pow((X - C) / (s * 0.2), 2)), q = Math.sin(A * Math.PI * 1.6 + m + _ * 0.72) * t * 0.13 + Math.cos(A * Math.PI * 3.2 - m * 0.7 + _) * t * 0.035, Y = V * (N - t * 0.5) * 0.18 * u.current.energy * (_ % 2 ? -1 : 1), te = M + q + Y;
+          j ? T.lineTo(X, te) : T.moveTo(X, te);
+        }
+        const P = r.createLinearGradient(0, M, s, M + t * 0.2);
+        P.addColorStop(0, "rgba(255,255,255,0)"), P.addColorStop(0.28, _ % 2 ? "rgba(255,255,255,.7)" : "rgba(202,208,224,.34)"), P.addColorStop(0.55, _ % 3 === 0 ? "rgba(190,180,255,.26)" : "rgba(255,255,255,.42)"), P.addColorStop(0.78, "rgba(143,151,170,.22)"), P.addColorStop(1, "rgba(255,255,255,0)"), r.save(), r.strokeStyle = P, r.lineWidth = t * (0.21 - _ * 0.012), r.lineCap = "round", r.filter = `blur(${_ * 1.5}px)`, r.globalCompositeOperation = _ % 2 ? "screen" : "source-over", r.globalAlpha = 0.82, r.stroke(T), r.restore(), r.save(), r.strokeStyle = `rgba(255,255,255,${0.38 - _ * 0.03})`, r.lineWidth = 0.8, r.stroke(T), r.restore();
+      }
+      const a = r.createRadialGradient(C, N, 0, C, N, s * 0.24);
+      a.addColorStop(0, `rgba(255,255,255,${0.12 + u.current.energy * 0.18})`), a.addColorStop(0.45, "rgba(209,217,255,.08)"), a.addColorStop(1, "rgba(255,255,255,0)"), r.fillStyle = a, r.fillRect(0, 0, s, t);
+      const k = r.createRadialGradient(
+        s * 0.5,
+        t * 0.45,
+        s * 0.1,
+        s * 0.5,
+        t * 0.5,
+        s * 0.8
+      );
+      k.addColorStop(0, "rgba(255,255,255,0)"), k.addColorStop(1, "rgba(44,48,61,.18)"), r.fillStyle = k, r.fillRect(0, 0, s, t);
+    };
+    return w.ticker.add(h), h(), () => {
+      w.ticker.remove(h), l.disconnect(), x.disconnect();
+    };
+  }, []), /* @__PURE__ */ e(
+    "div",
+    {
+      ref: o,
+      onPointerMove: (d) => {
+        const i = d.currentTarget.getBoundingClientRect();
+        w.to(u.current, {
+          x: (d.clientX - i.left) / i.width,
+          y: (d.clientY - i.top) / i.height,
+          energy: 1,
+          duration: 0.85,
+          ease: "power3.out",
+          overwrite: !0
+        });
+      },
+      onPointerLeave: () => w.to(u.current, { energy: 0, duration: 1.4 }),
+      className: "showcase-fullbleed relative h-[clamp(34rem,68cqw,46rem)] min-h-[34rem] w-full overflow-hidden bg-[#dfe1e8]",
+      "aria-label": "Interactive optical silk background",
+      children: /* @__PURE__ */ e("canvas", { ref: b, className: "absolute inset-0 h-full w-full", "aria-hidden": "true" })
+    }
+  );
+}
+const lt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: st
+}, Symbol.toStringTag, { value: "Module" }));
+function ct() {
+  const o = v(null), b = v(null), u = v({ x: -999, y: -999, force: 0 });
+  return L(() => {
+    const d = o.current, i = b.current;
+    if (!d || !i) return;
+    const r = i.getContext("2d");
+    if (!r) return;
+    let s = 1, t = 1, p = !0;
+    const f = matchMedia("(prefers-reduced-motion: reduce)").matches, c = () => {
+      const m = d.getBoundingClientRect(), y = Math.min(devicePixelRatio, 1.5);
+      s = Math.max(1, m.width), t = Math.max(1, m.height), i.width = Math.round(s * y), i.height = Math.round(t * y), i.style.width = `${s}px`, i.style.height = `${t}px`, r.setTransform(y, 0, 0, y, 0, 0);
+    };
+    c();
+    const l = new ResizeObserver(c);
+    l.observe(d);
+    const x = new IntersectionObserver(([m]) => {
+      p = m.isIntersecting;
+    });
+    x.observe(d);
+    const h = () => {
+      if (!p) return;
+      const m = f ? 2.8 : w.ticker.time, y = r.createLinearGradient(0, 0, s, t);
+      y.addColorStop(0, "#ffe59a"), y.addColorStop(0.48, "#ff9f7c"), y.addColorStop(1, "#65e5ce"), r.fillStyle = y, r.fillRect(0, 0, s, t);
+      const C = Math.max(15, Math.min(23, s / 42)), N = Math.min(s, t) * 0.17;
+      for (let k = -C; k < t + C; k += C)
+        for (let _ = -C; _ < s + C; _ += C) {
+          const T = _ - u.current.x, M = k - u.current.y, P = Math.hypot(T, M) || 1, j = Math.max(0, 1 - P / N) * u.current.force, A = Math.sin(_ * 0.014 + m * 0.72) * Math.cos(k * 0.011 - m * 0.48), X = Math.sin(k * 0.017 + m * 0.32) * 4 + T / P * j * 30, V = A * 8 + M / P * j * 30, q = Math.max(0.7, 1.4 + A * 0.55 + j * 3.2), Y = Math.max(0, j + (A + 1) * 0.08);
+          r.beginPath(), r.arc(_ + X, k + V, q, 0, Math.PI * 2), r.fillStyle = Y > 0.52 ? `rgba(76,29,149,${0.48 + Y * 0.34})` : `rgba(22,25,65,${0.24 + q * 0.1})`, r.fill();
+        }
+      const a = r.createRadialGradient(
+        u.current.x,
+        u.current.y,
+        0,
+        u.current.x,
+        u.current.y,
+        N * 1.3
+      );
+      a.addColorStop(0, `rgba(76,245,216,${u.current.force * 0.32})`), a.addColorStop(0.45, `rgba(255,81,145,${u.current.force * 0.12})`), a.addColorStop(1, "rgba(76,245,216,0)"), r.fillStyle = a, r.fillRect(0, 0, s, t);
+    };
+    return w.ticker.add(h), h(), () => {
+      w.ticker.remove(h), l.disconnect(), x.disconnect();
+    };
+  }, []), /* @__PURE__ */ n(
+    "div",
+    {
+      ref: o,
+      onPointerMove: (d) => {
+        const i = d.currentTarget.getBoundingClientRect();
+        w.to(u.current, {
+          x: d.clientX - i.left,
+          y: d.clientY - i.top,
+          force: 1,
+          duration: 0.55,
+          ease: "power3.out",
+          overwrite: !0
+        });
+      },
+      onPointerLeave: () => w.to(u.current, { force: 0, duration: 1.1, ease: "power2.out" }),
+      className: "showcase-fullbleed relative h-[clamp(34rem,68cqw,46rem)] min-h-[34rem] w-full overflow-hidden bg-[#ffbf8f]",
+      "aria-label": "Animated magnetic halftone background",
+      children: [
+        /* @__PURE__ */ e("canvas", { ref: b, className: "absolute inset-0 h-full w-full", "aria-hidden": "true" }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 bg-[linear-gradient(110deg,rgba(255,255,255,.32),transparent_38%,rgba(20,20,20,.06))]"
+          }
+        )
+      ]
+    }
+  );
+}
+const dt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: ct
+}, Symbol.toStringTag, { value: "Module" }));
+function ut() {
+  const o = v(null), b = v(null), u = v({ x: 0.5, y: 0.5, energy: 0 });
+  return L(() => {
+    const d = o.current, i = b.current, r = i == null ? void 0 : i.getContext("2d");
+    if (!d || !i || !r) return;
+    let s = 1, t = 1, p = !0;
+    const f = matchMedia("(prefers-reduced-motion: reduce)").matches, c = () => {
+      const m = d.getBoundingClientRect(), y = Math.min(devicePixelRatio, 1.5);
+      s = Math.max(1, m.width), t = Math.max(1, m.height), i.width = Math.round(s * y), i.height = Math.round(t * y), i.style.width = `${s}px`, i.style.height = `${t}px`, r.setTransform(y, 0, 0, y, 0, 0);
+    };
+    c();
+    const l = new ResizeObserver(c);
+    l.observe(d);
+    const x = new IntersectionObserver(([m]) => {
+      p = m.isIntersecting;
+    });
+    x.observe(d);
+    const h = () => {
+      if (!p) return;
+      const m = f ? 1.7 : w.ticker.time * 0.18, y = r.createLinearGradient(0, 0, s, t);
+      y.addColorStop(0, "#eef8ff"), y.addColorStop(0.45, "#b5d8ff"), y.addColorStop(1, "#8c75ff"), r.fillStyle = y, r.fillRect(0, 0, s, t), r.save(), r.globalCompositeOperation = "screen", r.filter = "blur(18px)";
+      for (let N = 0; N < 9; N += 1) {
+        const a = N / 8, k = s * (0.1 + a * 0.9) + Math.sin(m + N * 1.8) * s * 0.08 + (u.current.x - 0.5) * s * 0.09 * u.current.energy, _ = t * (0.25 + 0.48 * Math.sin(N * 0.77 + m * 0.8)) + (u.current.y - 0.5) * t * 0.1 * u.current.energy, T = Math.min(s, t) * (0.16 + N % 3 * 0.035), M = r.createRadialGradient(k, _, 0, k, _, T), P = N % 3 === 0 ? ["rgba(255,255,255,.9)", "rgba(126,255,219,.1)"] : N % 3 === 1 ? ["rgba(255,188,236,.7)", "rgba(255,188,236,0)"] : ["rgba(113,232,255,.72)", "rgba(113,232,255,0)"];
+        M.addColorStop(0, P[0]), M.addColorStop(1, P[1]), r.fillStyle = M, r.beginPath(), r.arc(k, _, T, 0, Math.PI * 2), r.fill();
+      }
+      r.restore(), r.save(), r.globalCompositeOperation = "overlay";
+      for (let N = 0; N < 11; N += 1) {
+        r.beginPath();
+        for (let a = 0; a <= 80; a += 1) {
+          const k = a / 80 * s, _ = t * (0.16 + N * 0.073) + Math.sin(a * 0.13 + N * 0.8 + m) * 13 + (u.current.x - 0.5) * 18 * u.current.energy;
+          a ? r.lineTo(k, _) : r.moveTo(k, _);
+        }
+        r.strokeStyle = `rgba(255,255,255,${0.16 + N * 6e-3})`, r.lineWidth = 1, r.stroke();
+      }
+      r.restore();
+      const C = r.createLinearGradient(0, 0, 0, t);
+      C.addColorStop(0, "rgba(20,20,40,.12)"), C.addColorStop(0.5, "rgba(20,20,40,0)"), C.addColorStop(1, "rgba(35,22,83,.35)"), r.fillStyle = C, r.fillRect(0, 0, s, t);
+    };
+    return w.ticker.add(h), h(), () => {
+      w.ticker.remove(h), l.disconnect(), x.disconnect();
+    };
+  }, []), /* @__PURE__ */ n(
+    "div",
+    {
+      ref: o,
+      onPointerMove: (d) => {
+        const i = d.currentTarget.getBoundingClientRect();
+        w.to(u.current, {
+          x: (d.clientX - i.left) / i.width,
+          y: (d.clientY - i.top) / i.height,
+          energy: 1,
+          duration: 0.9,
+          ease: "power3.out",
+          overwrite: !0
+        });
+      },
+      onPointerLeave: () => w.to(u.current, { energy: 0, duration: 1.4 }),
+      className: "showcase-fullbleed relative h-[clamp(34rem,68cqw,46rem)] min-h-[34rem] w-full overflow-hidden bg-[#b5d8ff]",
+      "aria-label": "Animated polar caustic background",
+      children: [
+        /* @__PURE__ */ e("canvas", { ref: b, className: "absolute inset-0 h-full w-full", "aria-hidden": "true" }),
+        /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center p-8 text-center text-[#15132a]", children: /* @__PURE__ */ n("div", { children: [
+          /* @__PURE__ */ e("span", { className: "font-mono text-[9px] uppercase tracking-[.2em] text-[#15132a]/45", children: "Portfolio" }),
+          /* @__PURE__ */ e("h3", { className: "mt-5 text-[clamp(4rem,10vw,9rem)] font-semibold leading-[.78] tracking-[-.095em]", children: "Selected work." }),
+          /* @__PURE__ */ e("p", { className: "mx-auto mt-7 max-w-[24rem] text-[12px] leading-5 text-[#15132a]/52", children: "A collection of web projects." })
+        ] }) })
+      ]
+    }
+  );
+}
+const pt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: ut
+}, Symbol.toStringTag, { value: "Module" }));
+function Bt() {
+  return /* @__PURE__ */ e("svg", { "aria-hidden": "true", className: "pointer-events-none fixed h-0 w-0 overflow-hidden", children: /* @__PURE__ */ n("defs", { children: [
+    ["motus-glass", "motus-pill", "motus-panel"].map((o) => /* @__PURE__ */ e("filter", { id: o, colorInterpolationFilters: "sRGB", children: /* @__PURE__ */ e("feColorMatrix", { values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" }) }, o)),
+    /* @__PURE__ */ n("filter", { id: "motus-orb", x: "-35%", y: "-35%", width: "170%", height: "170%", children: [
+      /* @__PURE__ */ e("feTurbulence", { type: "fractalNoise", baseFrequency: ".018", numOctaves: "1", seed: "11", result: "noise" }),
+      /* @__PURE__ */ e("feDisplacementMap", { in: "SourceGraphic", in2: "noise", scale: "7", xChannelSelector: "R", yChannelSelector: "B" })
+    ] }),
+    /* @__PURE__ */ n("filter", { id: "motus-prism", x: "-25%", y: "-25%", width: "150%", height: "150%", children: [
+      /* @__PURE__ */ e("feTurbulence", { type: "fractalNoise", baseFrequency: ".022", numOctaves: "1", seed: "17", result: "grain" }),
+      /* @__PURE__ */ e("feDisplacementMap", { in: "SourceGraphic", in2: "grain", scale: "6", result: "bent" }),
+      /* @__PURE__ */ e("feOffset", { in: "bent", dx: "-1", result: "redShift" }),
+      /* @__PURE__ */ e("feOffset", { in: "bent", dx: "1", result: "blueShift" }),
+      /* @__PURE__ */ e("feBlend", { in: "redShift", in2: "blueShift", mode: "screen" })
+    ] }),
+    /* @__PURE__ */ n("filter", { id: "motus-goo", x: "-45%", y: "-20%", width: "190%", height: "140%", colorInterpolationFilters: "sRGB", children: [
+      /* @__PURE__ */ e("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "7", result: "blur" }),
+      /* @__PURE__ */ e("feColorMatrix", { in: "blur", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -9", result: "goo" }),
+      /* @__PURE__ */ e("feBlend", { in: "SourceGraphic", in2: "goo", mode: "normal" })
+    ] })
+  ] }) });
+}
+function Xt({
+  children: o,
+  className: b = "",
+  draggable: u = !1,
+  borderRadius: g = "16px",
+  blurIntensity: d = "md",
+  glowIntensity: i = "sm",
+  shadowIntensity: r = "md"
+}) {
+  const s = v(null), t = v({ active: !1, pointerId: -1, startX: 0, startY: 0 }), p = { sm: "backdrop-blur-[12px]", md: "backdrop-blur-[20px]", lg: "backdrop-blur-[30px]" }[d], f = {
+    none: "",
+    sm: "drop-shadow-[0_18px_32px_rgba(0,0,0,.26)]",
+    md: "drop-shadow-[0_24px_48px_rgba(0,0,0,.34)]"
+  }[i], c = {
+    sm: "shadow-[inset_0_1px_0_rgba(255,255,255,.48),inset_0_-1px_0_rgba(255,255,255,.10)]",
+    md: "shadow-[inset_0_1px_0_rgba(255,255,255,.58),inset_0_-1px_0_rgba(255,255,255,.08),inset_1px_0_0_rgba(255,255,255,.18)]",
+    lg: "shadow-[inset_0_1px_0_rgba(255,255,255,.68),inset_0_-2px_1px_rgba(0,0,0,.18),inset_1px_0_0_rgba(255,255,255,.22)]"
+  }[r], l = (m) => {
+    const y = s.current;
+    if (!y) return;
+    const C = y.getBoundingClientRect();
+    if (y.style.setProperty("--glass-x", `${(m.clientX - C.left) / C.width * 100}%`), y.style.setProperty("--glass-y", `${(m.clientY - C.top) / C.height * 100}%`), !t.current.active || m.pointerId !== t.current.pointerId) return;
+    const N = (m.clientX - t.current.startX) * 0.82, a = (m.clientY - t.current.startY) * 0.82;
+    w.set(y, { x: N, y: a, rotate: N * 0.012, force3D: !0 });
+  }, x = (m) => {
+    !u || m.target.closest("button,a,input") || (t.current = { active: !0, pointerId: m.pointerId, startX: m.clientX, startY: m.clientY }, m.currentTarget.setPointerCapture(m.pointerId), w.to(s.current, { scale: 1.015, duration: 0.25, ease: "power3.out" }));
+  }, h = (m) => {
+    !t.current.active || m.pointerId !== t.current.pointerId || (t.current.active = !1, m.currentTarget.hasPointerCapture(m.pointerId) && m.currentTarget.releasePointerCapture(m.pointerId), w.to(s.current, {
+      x: 0,
+      y: 0,
+      rotate: 0,
+      scale: 1,
+      duration: 0.95,
+      ease: "elastic.out(1,.54)",
+      overwrite: !0
+    }));
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: s,
+      onPointerDown: x,
+      onPointerMove: l,
+      onPointerUp: h,
+      onPointerCancel: h,
+      className: `relative isolate overflow-hidden border border-white/[.34] bg-white/[.055] ${f} ${c} ${u ? "touch-none select-none cursor-grab active:cursor-grabbing" : ""} ${b}`,
+      style: { borderRadius: g, "--glass-x": "22%", "--glass-y": "12%" },
+      children: [
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: `pointer-events-none absolute inset-0 -z-30 bg-black/[.3] ${p} backdrop-saturate-[185%] backdrop-contrast-[108%]`
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-0 -z-20 bg-[linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.035)_42%,rgba(255,255,255,.08)_72%,rgba(255,255,255,.12))]" }),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: "pointer-events-none absolute inset-0 -z-10 opacity-90 mix-blend-screen",
+            style: {
+              background: "radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255,255,255,.42), rgba(255,255,255,.11) 18%, transparent 45%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-px -z-10 rounded-[inherit] ring-1 ring-inset ring-white/[.13]" }),
+        o
+      ]
+    }
+  );
+}
+function mt() {
+  const [o, b] = S(0), u = v(null), g = v(null), d = [
+    { label: "Home", icon: pe },
+    { label: "Work", icon: me },
+    { label: "About", icon: fe },
+    { label: "Contact", icon: D }
+  ], i = (p, f = !1) => {
+    var h;
+    const c = (h = g.current) == null ? void 0 : h.querySelectorAll("[data-portfolio-item]")[p];
+    if (!c || !g.current || !u.current) return;
+    const l = g.current.getBoundingClientRect(), x = c.getBoundingClientRect();
+    w.to(u.current, {
+      x: x.left - l.left,
+      width: x.width,
+      duration: f ? 0 : 0.7,
+      ease: f ? "none" : "elastic.out(1,.82)",
+      overwrite: !0
+    });
+  };
+  ee(() => {
+    const p = requestAnimationFrame(() => i(0, !0)), f = () => {
+      var l;
+      const c = [...((l = g.current) == null ? void 0 : l.querySelectorAll("[data-portfolio-item]")) ?? []];
+      i(
+        Math.max(
+          0,
+          c.findIndex((x) => x.getAttribute("aria-current") === "page")
+        ),
+        !0
+      );
+    };
+    return window.addEventListener("resize", f), () => {
+      cancelAnimationFrame(p), window.removeEventListener("resize", f);
+    };
+  }, []);
+  const r = (p) => {
+    var c;
+    if (p === o) return;
+    b(p), requestAnimationFrame(() => i(p));
+    const f = (c = g.current) == null ? void 0 : c.querySelectorAll("[data-nav-content]")[p];
+    f && w.fromTo(
+      f,
+      { y: 6, opacity: 0.35 },
+      { y: 0, opacity: 1, duration: 0.38, ease: "power4.out", overwrite: !0 }
+    );
+  }, s = (p) => {
+    const f = p.currentTarget.querySelector("[data-nav-content]");
+    if (!f) return;
+    const c = p.currentTarget.getBoundingClientRect(), l = ((p.clientX - c.left) / c.width - 0.5) * 4, x = ((p.clientY - c.top) / c.height - 0.5) * 3;
+    w.to(f, { x: l, y: x, duration: 0.28, ease: "power3.out", overwrite: !0 });
+  }, t = (p) => {
+    const f = p.currentTarget.querySelector("[data-nav-content]");
+    f && w.to(f, { x: 0, y: 0, duration: 0.55, ease: "elastic.out(1,.7)", overwrite: !0 });
+  };
+  return /* @__PURE__ */ e("div", { className: "flex min-h-[24rem] w-full items-center justify-center p-4", children: /* @__PURE__ */ n(
+    "nav",
+    {
+      ref: g,
+      "aria-label": "Portfolio sections",
+      className: "relative flex items-center gap-1 rounded-[1.65rem] border border-black/[.08] bg-white/80 p-1.5 text-[#171719] shadow-[inset_0_1px_0_rgba(255,255,255,1),0_18px_45px_rgba(40,45,62,.12)] backdrop-blur-2xl",
+      children: [
+        /* @__PURE__ */ n("span", { "aria-hidden": "true", className: "relative z-10 mx-2 grid h-6 w-6 place-items-center", children: [
+          /* @__PURE__ */ e("i", { className: "absolute h-3.5 w-3.5 -translate-x-1 rotate-45 rounded-[5px] border border-black/70" }),
+          /* @__PURE__ */ e("i", { className: "absolute h-3.5 w-3.5 translate-x-1 rotate-45 rounded-[5px] border border-black/25" })
+        ] }),
+        /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "mx-0.5 h-6 w-px bg-black/[.09]" }),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            ref: u,
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute bottom-1.5 left-0 top-1.5 w-20 overflow-hidden rounded-[1.2rem] bg-[#18181b] shadow-[inset_0_1px_0_rgba(255,255,255,.16),0_10px_24px_rgba(24,24,27,.24)]",
+            children: /* @__PURE__ */ e("i", { className: "absolute inset-0 bg-[radial-gradient(circle_at_28%_0%,rgba(255,255,255,.22),transparent_38%),linear-gradient(115deg,transparent_40%,rgba(132,148,255,.18),transparent_76%)]" })
+          }
+        ),
+        d.map(({ label: p, icon: f }, c) => {
+          const l = o === c;
+          return /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              "data-portfolio-item": !0,
+              "aria-label": p,
+              "aria-current": l ? "page" : void 0,
+              onClick: () => r(c),
+              onFocus: () => i(c),
+              onPointerMove: s,
+              onPointerLeave: t,
+              className: `relative z-10 flex h-11 min-w-11 items-center justify-center rounded-[1.2rem] px-3 text-[12px] font-semibold transition-colors duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 sm:min-w-[5.6rem] ${l ? "!text-white" : "text-black/48 hover:text-black"}`,
+              children: /* @__PURE__ */ n("span", { "data-nav-content": !0, className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e(f, { size: 15, strokeWidth: 1.8 }),
+                /* @__PURE__ */ e("span", { className: "hidden sm:inline", children: p })
+              ] })
+            },
+            p
+          );
+        })
+      ]
+    }
+  ) });
+}
+function ft() {
+  const [o, b] = S(!1), u = v(null), g = v(null), d = v(!1), i = v(!1), r = v(null);
+  L(
+    () => () => {
+      var p;
+      (p = r.current) == null || p.kill(), w.killTweensOf([u.current, g.current]);
+    },
+    []
+  );
+  const s = () => {
+    var h;
+    const p = !d.current, f = window.matchMedia("(max-width: 560px)").matches, c = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    d.current = p, b(p), (h = r.current) == null || h.kill(), w.killTweensOf([u.current, g.current]), i.current = !0;
+    const l = c ? 0.01 : p ? 0.68 : 0.48, x = w.timeline({
+      onComplete: () => {
+        i.current = !1;
+      },
+      onInterrupt: () => {
+        i.current = !1;
+      }
+    });
+    r.current = x, p || x.to(
+      g.current,
+      {
+        opacity: 0,
+        x: f ? 0 : 14,
+        y: f ? 12 : 0,
+        duration: c ? 0.01 : 0.16,
+        ease: "power2.out",
+        pointerEvents: "none"
+      },
+      0
+    ), x.to(
+      u.current,
+      {
+        xPercent: f ? 0 : p ? -47 : 0,
+        yPercent: f && p ? -47 : 0,
+        rotateY: !f && p ? -8 : 0,
+        rotateX: f && p ? 5 : 0,
+        scale: p ? 0.94 : 1,
+        duration: l,
+        ease: p ? "expo.out" : "power4.inOut"
+      },
+      p ? 0 : 0.04
+    ), p && x.to(
+      g.current,
+      { opacity: 1, x: 0, y: 0, duration: c ? 0.01 : 0.3, ease: "power3.out", pointerEvents: "auto" },
+      c ? 0 : 0.24
+    );
+  };
+  return /* @__PURE__ */ e("div", { className: "flex min-h-[31rem] w-full items-center justify-center p-4 [perspective:1400px]", children: /* @__PURE__ */ n(
+    "article",
+    {
+      onPointerMove: (p) => {
+        if (d.current || i.current) return;
+        const f = p.currentTarget.getBoundingClientRect(), c = (p.clientX - f.left) / f.width - 0.5, l = (p.clientY - f.top) / f.height - 0.5;
+        w.to(u.current, { rotateY: c * 4, rotateX: l * -3, duration: 0.55, ease: "power3.out", overwrite: !0 });
+      },
+      onPointerLeave: () => !d.current && !i.current && w.to(u.current, { rotateX: 0, rotateY: 0, duration: 0.42, ease: "power3.out", overwrite: "auto" }),
+      className: "relative h-[27rem] w-full max-w-[43rem] overflow-hidden rounded-[2.25rem] border border-black/[.08] bg-[#f5f5f7] text-[#111] shadow-[0_35px_100px_rgba(0,0,0,.14)]",
+      children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            ref: g,
+            "aria-hidden": !o,
+            className: "pointer-events-none absolute inset-x-0 bottom-0 flex h-[56%] w-full flex-col justify-between p-5 opacity-0 md:inset-y-0 md:left-auto md:right-0 md:h-auto md:w-[55%] md:p-7",
+            children: [
+              /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ e("span", { className: "font-mono text-[9px] uppercase tracking-[.17em] text-black/38", children: "Project" }),
+                /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      onClick: s,
+                      tabIndex: o ? 0 : -1,
+                      "aria-label": "Close project details",
+                      className: "grid h-10 w-10 place-items-center rounded-full border border-black/10 bg-white text-black md:hidden",
+                      children: /* @__PURE__ */ e(de, { size: 15 })
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "a",
+                    {
+                      href: "#northstar-case-study",
+                      tabIndex: o ? 0 : -1,
+                      "aria-label": "Open Northstar case study",
+                      className: "grid h-10 w-10 place-items-center rounded-full bg-black !text-white no-underline md:h-11 md:w-11",
+                      children: /* @__PURE__ */ e(I, { size: 16 })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ n("div", { children: [
+                /* @__PURE__ */ n("h3", { className: "text-[2rem] font-semibold leading-[.9] tracking-[-.075em] md:text-[2.7rem]", children: [
+                  "Northstar",
+                  /* @__PURE__ */ e("br", {}),
+                  "Workspace"
+                ] }),
+                /* @__PURE__ */ e("p", { className: "mt-3 max-w-[17rem] text-[11px] leading-4 text-black/48 md:mt-4 md:text-[12px] md:leading-5", children: "A workspace for distributed product teams." })
+              ] }),
+              /* @__PURE__ */ n("div", { className: "grid grid-cols-2 border-t border-black/10 pt-3 text-[9px] md:pt-4 md:text-[10px]", children: [
+                /* @__PURE__ */ n("span", { children: [
+                  /* @__PURE__ */ e("i", { className: "block not-italic text-black/35", children: "Year" }),
+                  /* @__PURE__ */ e("strong", { className: "mt-1 block", children: "2026" })
+                ] }),
+                /* @__PURE__ */ n("span", { children: [
+                  /* @__PURE__ */ e("i", { className: "block not-italic text-black/35", children: "Role" }),
+                  /* @__PURE__ */ e("strong", { className: "mt-1 block", children: "Design and build" })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            ref: u,
+            className: "absolute inset-3 z-10 overflow-hidden rounded-[1.65rem] bg-[#111] text-white shadow-[0_24px_70px_rgba(0,0,0,.34)] [transform-origin:center_top] [transform-style:preserve-3d] md:[transform-origin:left_center]",
+            children: [
+              /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_68%_32%,rgba(255,255,255,.18),transparent_22%),radial-gradient(circle_at_36%_68%,rgba(125,141,255,.26),transparent_26%),linear-gradient(145deg,#18191c,#050506)]" }),
+              /* @__PURE__ */ e("div", { className: "absolute left-[52%] top-[16%] h-[17rem] w-[11rem] rotate-6 rounded-[3.2rem] border border-white/15 bg-white/[.06] shadow-[inset_0_1px_0_rgba(255,255,255,.24),0_30px_70px_rgba(0,0,0,.32)] backdrop-blur-2xl" }),
+              /* @__PURE__ */ n("header", { className: "relative flex items-center justify-between p-5", children: [
+                /* @__PURE__ */ e("span", { className: "font-mono text-[9px] uppercase tracking-[.18em] text-white/44", children: "Northstar / 2026" }),
+                /* @__PURE__ */ n(
+                  "button",
+                  {
+                    onClick: s,
+                    "aria-expanded": o,
+                    className: "flex h-11 items-center gap-2 rounded-full border border-white/12 bg-white/[.08] px-4 text-[10px] font-semibold backdrop-blur-xl hover:bg-white/[.14]",
+                    children: [
+                      /* @__PURE__ */ e("span", { children: o ? "Close" : "Open project" }),
+                      /* @__PURE__ */ e(he, { size: 14 })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ n("div", { className: "absolute bottom-6 left-6", children: [
+                /* @__PURE__ */ e("span", { className: "text-[11px] text-white/40", children: "Team workspace" }),
+                /* @__PURE__ */ e("h3", { className: "mt-1 text-[3.6rem] font-semibold tracking-[-.085em]", children: "Northstar" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+function ht() {
+  const [o, b] = S(0), u = v([]), g = [
+    { label: "Design", copy: "Interface design for web products.", meta: "01", tint: "#f4f4f6" },
+    { label: "Motion", copy: "Animation and interaction design.", meta: "02", tint: "#ededf0" },
+    { label: "Development", copy: "Responsive React development.", meta: "03", tint: "#e5e5e8" },
+    { label: "Prototyping", copy: "Working prototypes for new ideas.", meta: "04", tint: "#dedee2" }
+  ], d = (i) => {
+    b(i), u.current.forEach(
+      (r, s) => w.to(r, {
+        height: s === i ? 132 : 62,
+        scale: s === i ? 1 : 0.985,
+        duration: 0.72,
+        ease: "elastic.out(1,.72)",
+        overwrite: !0
+      })
+    );
+  };
+  return /* @__PURE__ */ e("div", { className: "flex min-h-[31rem] w-full items-center justify-center p-4", children: /* @__PURE__ */ n("section", { className: "w-full max-w-[38rem] rounded-[2.2rem] border border-black/[.08] bg-white/72 p-3 text-[#111] shadow-[0_32px_90px_rgba(0,0,0,.12)] backdrop-blur-2xl", children: [
+    /* @__PURE__ */ n("header", { className: "flex items-end justify-between px-3 pb-5 pt-3", children: [
+      /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ e("span", { className: "font-mono text-[9px] uppercase tracking-[.18em] text-black/35", children: "Skills" }),
+        /* @__PURE__ */ e("h3", { className: "mt-2 text-2xl font-semibold tracking-[-.055em]", children: "What I do" })
+      ] }),
+      /* @__PURE__ */ e("span", { className: "font-mono text-[9px] text-black/35", children: "Choose one" })
+    ] }),
+    /* @__PURE__ */ e("div", { role: "group", "aria-label": "Capabilities", className: "space-y-1.5", children: g.map((i, r) => /* @__PURE__ */ n(
+      "button",
+      {
+        ref: (s) => {
+          u.current[r] = s;
+        },
+        "aria-pressed": o === r,
+        onPointerEnter: () => d(r),
+        onFocus: () => d(r),
+        onClick: () => d(r),
+        className: "group relative flex w-full origin-center flex-col justify-between overflow-hidden rounded-[1.25rem] border border-black/[.07] px-5 py-4 text-left shadow-[inset_0_1px_0_rgba(255,255,255,.8)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black",
+        style: { height: r === 0 ? 132 : 62, background: i.tint },
+        children: [
+          /* @__PURE__ */ n("div", { className: "flex w-full items-center justify-between", children: [
+            /* @__PURE__ */ e("strong", { className: "text-[14px] font-semibold tracking-[-.02em]", children: i.label }),
+            /* @__PURE__ */ e("span", { className: "font-mono text-[9px] text-black/35", children: i.meta })
+          ] }),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: `flex items-end justify-between gap-5 transition-opacity duration-300 ${o === r ? "opacity-100" : "opacity-0"}`,
+              children: [
+                /* @__PURE__ */ e("p", { className: "max-w-[23rem] text-[12px] leading-5 text-black/48", children: i.copy }),
+                /* @__PURE__ */ e("span", { className: "grid h-9 w-9 shrink-0 place-items-center rounded-full bg-black !text-white transition-transform group-hover:rotate-[-8deg]", children: /* @__PURE__ */ e(I, { size: 14 }) })
+              ]
+            }
+          )
+        ]
+      },
+      i.label
+    )) })
+  ] }) });
+}
+function bt() {
+  const [o, b] = S(0), u = v(null), g = [
+    {
+      code: "01",
+      title: "Northstar",
+      type: "Team workspace",
+      result: "2026",
+      tone: "linear-gradient(145deg,#dfe7ff,#8c9cff)"
+    },
+    {
+      code: "02",
+      title: "Eidolon",
+      type: "Studio website",
+      result: "2026",
+      tone: "linear-gradient(145deg,#e8e8eb,#aaaaaf)"
+    },
+    {
+      code: "03",
+      title: "Fieldnotes",
+      type: "Writing app",
+      result: "2025",
+      tone: "linear-gradient(145deg,#f1eadc,#d2b88d)"
+    },
+    {
+      code: "04",
+      title: "Relay",
+      type: "Developer tool",
+      result: "2025",
+      tone: "linear-gradient(145deg,#dff5e8,#83c7a1)"
+    }
+  ], d = (r) => {
+    b(r), w.fromTo(
+      u.current,
+      { clipPath: "inset(12% 12% 12% 12% round 2rem)", scale: 0.94, rotateY: -7, opacity: 0.35 },
+      {
+        clipPath: "inset(0% 0% 0% 0% round 1.6rem)",
+        scale: 1,
+        rotateY: 0,
+        opacity: 1,
+        duration: 0.72,
+        ease: "power4.out",
+        overwrite: !0
+      }
+    );
+  }, i = g[o];
+  return /* @__PURE__ */ e("div", { className: "flex min-h-[31rem] w-full items-center justify-center p-4 [perspective:1200px]", children: /* @__PURE__ */ n("section", { className: "grid w-full max-w-[44rem] gap-3 rounded-[2.2rem] border border-black/[.08] bg-[#f5f5f7]/88 p-3 text-[#111] shadow-[0_32px_90px_rgba(0,0,0,.12)] backdrop-blur-2xl md:grid-cols-[.82fr_1.18fr]", children: [
+    /* @__PURE__ */ n("div", { className: "flex min-h-[22rem] flex-col justify-between p-4", children: [
+      /* @__PURE__ */ n("header", { children: [
+        /* @__PURE__ */ e("span", { className: "font-mono text-[9px] uppercase tracking-[.18em] text-black/35", children: "Work" }),
+        /* @__PURE__ */ e("h3", { className: "mt-2 text-2xl font-semibold tracking-[-.055em]", children: "Projects" })
+      ] }),
+      /* @__PURE__ */ e("nav", { "aria-label": "Projects", className: "my-6", children: g.map((r, s) => /* @__PURE__ */ n(
+        "a",
+        {
+          href: `#${r.title.toLowerCase()}-case-study`,
+          onPointerEnter: () => d(s),
+          onFocus: () => d(s),
+          onClick: () => d(s),
+          "aria-current": o === s ? "page" : void 0,
+          className: `group flex items-center gap-3 border-b border-black/[.08] py-3 text-[14px] no-underline transition-colors ${o === s ? "text-black" : "text-black/30 hover:text-black/70"}`,
+          children: [
+            /* @__PURE__ */ e("span", { className: "w-5 font-mono text-[8px]", children: r.code }),
+            /* @__PURE__ */ e("strong", { className: "font-medium", children: r.title }),
+            /* @__PURE__ */ e(
+              I,
+              {
+                size: 14,
+                className: `ml-auto transition-transform ${o === s ? "translate-x-0 opacity-100" : "-translate-x-2 opacity-0"}`
+              }
+            )
+          ]
+        },
+        r.title
+      )) }),
+      /* @__PURE__ */ e("span", { className: "text-[10px] text-black/35", children: "Hover to preview." })
+    ] }),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        ref: u,
+        onPointerMove: (r) => {
+          const s = r.currentTarget.getBoundingClientRect();
+          w.to(u.current, {
+            rotateY: ((r.clientX - s.left) / s.width - 0.5) * 5,
+            rotateX: ((r.clientY - s.top) / s.height - 0.5) * -4,
+            duration: 0.55,
+            ease: "power3.out"
+          });
+        },
+        onPointerLeave: () => w.to(u.current, { rotateX: 0, rotateY: 0, duration: 0.8, ease: "elastic.out(1,.6)" }),
+        className: "relative min-h-[22rem] overflow-hidden rounded-[1.6rem] border border-black/[.08] p-5 [transform-style:preserve-3d]",
+        style: { background: i.tone },
+        children: [
+          /* @__PURE__ */ e("div", { className: "absolute -right-10 top-[18%] h-64 w-48 rotate-6 rounded-[2.8rem] border border-white/55 bg-white/25 shadow-[0_26px_60px_rgba(40,40,80,.15)] backdrop-blur-xl", children: /* @__PURE__ */ e("div", { className: "m-4 h-24 rounded-[1.5rem] bg-black/[.08]" }) }),
+          /* @__PURE__ */ n("div", { className: "relative flex h-full flex-col justify-between", children: [
+            /* @__PURE__ */ n("span", { className: "font-mono text-[9px] uppercase tracking-[.16em] text-black/38", children: [
+              "Project / ",
+              i.code
+            ] }),
+            /* @__PURE__ */ n("div", { children: [
+              /* @__PURE__ */ e("span", { className: "text-[11px] text-black/42", children: i.type }),
+              /* @__PURE__ */ e("h4", { className: "mt-1 text-[2.8rem] font-semibold tracking-[-.075em]", children: i.title }),
+              /* @__PURE__ */ e("strong", { className: "mt-2 block font-mono text-[9px] uppercase tracking-[.13em] text-black/46", children: i.result })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+function gt() {
+  const [o, b] = S(!1), [u, g] = S(!1), d = v(null), i = v(null), r = v(null), s = v(!1), t = v(null);
+  return L(
+    () => () => {
+      var c;
+      (c = t.current) == null || c.kill(), w.killTweensOf([d.current, i.current]);
+    },
+    []
+  ), /* @__PURE__ */ e("div", { className: "flex min-h-[30rem] w-full items-center justify-center p-5", children: /* @__PURE__ */ n(
+    "section",
+    {
+      ref: d,
+      className: "relative h-[78px] w-full max-w-[28rem] overflow-hidden rounded-[2rem] border border-white/70 bg-white/55 text-[#111] shadow-[inset_0_1px_0_rgba(255,255,255,.9),0_28px_80px_rgba(25,25,35,.16)] backdrop-blur-[28px]",
+      children: [
+        /* @__PURE__ */ n("div", { className: "flex h-[78px] items-center gap-3 px-3 pl-5", children: [
+          /* @__PURE__ */ e("span", { className: "relative h-3 w-3 rounded-full bg-[#30c466] shadow-[0_0_0_6px_rgba(48,196,102,.12)]", children: /* @__PURE__ */ e("i", { className: "absolute inset-0 animate-ping rounded-full bg-[#30c466]/40" }) }),
+          /* @__PURE__ */ n("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ e("strong", { className: "block text-[13px] font-semibold", children: "Available for work" }),
+            /* @__PURE__ */ e("span", { className: "text-[10px] text-black/42", children: "UTC +8" })
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => {
+                var h;
+                const c = !s.current, l = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+                s.current = c, b(c), (h = t.current) == null || h.kill(), w.killTweensOf([d.current, i.current]);
+                const x = w.timeline();
+                t.current = x, c ? x.to(d.current, { height: 272, duration: l ? 0.01 : 0.42, ease: "expo.out" }, 0).to(
+                  i.current,
+                  { opacity: 1, y: 0, duration: l ? 0.01 : 0.24, ease: "power3.out", pointerEvents: "auto" },
+                  l ? 0 : 0.2
+                ) : x.to(
+                  i.current,
+                  { opacity: 0, y: 10, duration: l ? 0.01 : 0.14, ease: "power2.out", pointerEvents: "none" },
+                  0
+                ).to(d.current, { height: 78, duration: l ? 0.01 : 0.34, ease: "power4.inOut" }, l ? 0 : 0.06);
+              },
+              "aria-expanded": o,
+              "aria-label": o ? "Close contact options" : "Open contact options",
+              className: "grid h-14 w-14 place-items-center rounded-full bg-black !text-white shadow-[0_10px_24px_rgba(0,0,0,.2)] transition-transform hover:scale-[1.04]",
+              children: o ? /* @__PURE__ */ e(de, { size: 17 }) : /* @__PURE__ */ e(I, { size: 17 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("div", { ref: i, className: "pointer-events-none px-5 pb-5 opacity-0", children: /* @__PURE__ */ n("div", { className: "border-t border-black/10 pt-5", children: [
+          /* @__PURE__ */ e("span", { className: "font-mono text-[8px] uppercase tracking-[.17em] text-black/35", children: "Contact" }),
+          /* @__PURE__ */ e("h3", { className: "mt-3 text-[2rem] font-semibold leading-[.92] tracking-[-.065em]", children: "Let’s work together." }),
+          /* @__PURE__ */ n("div", { className: "mt-5 grid grid-cols-2 gap-2", children: [
+            /* @__PURE__ */ n(
+              "a",
+              {
+                href: "mailto:hello@example.com",
+                className: "flex h-12 items-center justify-center gap-2 rounded-[.9rem] bg-black text-[11px] font-semibold !text-white no-underline",
+                children: [
+                  /* @__PURE__ */ e(D, { size: 14 }),
+                  "Email me"
+                ]
+              }
+            ),
+            /* @__PURE__ */ n(
+              "button",
+              {
+                ref: r,
+                onClick: async () => {
+                  await navigator.clipboard.writeText("hello@example.com"), g(!0), w.fromTo(r.current, { scale: 0.92 }, { scale: 1, duration: 0.65, ease: "elastic.out(1,.55)" }), window.setTimeout(() => g(!1), 1300);
+                },
+                className: "flex h-12 items-center justify-center gap-2 rounded-[.9rem] border border-black/10 bg-white/65 text-[11px] font-semibold",
+                children: [
+                  u ? /* @__PURE__ */ e(F, { size: 14 }) : /* @__PURE__ */ e(ue, { size: 14 }),
+                  u ? "Copied" : "Copy email"
+                ]
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  ) });
+}
+function xt() {
+  const [o, b] = S(0), [u, g] = S(!1), d = [
+    { label: "Framework", value: "React 19", detail: "Components, routing, and state." },
+    { label: "Animation", value: "GSAP 3.15", detail: "Transitions and pointer interactions." },
+    { label: "Styles", value: "Tailwind 4", detail: "All component styles." },
+    { label: "Runtime", value: "Browser", detail: "No server or database required." }
+  ], i = async () => {
+    await navigator.clipboard.writeText("react@19 gsap@3.15 tailwindcss@4 lucide-react"), g(!0), setTimeout(() => g(!1), 1200);
+  };
+  return /* @__PURE__ */ e("div", { className: "flex min-h-[32rem] w-full items-center justify-center p-5", children: /* @__PURE__ */ n("section", { className: "grid w-full max-w-[42rem] overflow-hidden rounded-[2rem] border border-white/10 bg-[#111] text-white shadow-[0_32px_90px_rgba(0,0,0,.28)] md:grid-cols-[1.1fr_.9fr]", children: [
+    /* @__PURE__ */ n("div", { className: "p-5 sm:p-6", children: [
+      /* @__PURE__ */ n("header", { className: "mb-4 flex items-center justify-between sm:mb-6", children: [
+        /* @__PURE__ */ n("div", { children: [
+          /* @__PURE__ */ e("span", { className: "font-mono text-[9px] uppercase tracking-[.17em] text-white/36", children: "Project" }),
+          /* @__PURE__ */ e("h3", { className: "mt-2 text-2xl font-semibold tracking-[-.05em]", children: "Tech stack" })
+        ] }),
+        /* @__PURE__ */ e(Ce, { size: 20, className: "text-[#c7ff4d]" })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "divide-y divide-white/10 border-y border-white/10", children: d.map((r, s) => /* @__PURE__ */ n(
+        "button",
+        {
+          onClick: () => b(s),
+          "aria-pressed": o === s,
+          className: `grid w-full grid-cols-[1fr_auto] items-center px-1 py-3 text-left transition-colors sm:py-4 ${o === s ? "text-[#c7ff4d]" : "text-white/48 hover:text-white"}`,
+          children: [
+            /* @__PURE__ */ e("span", { className: "text-[12px]", children: r.label }),
+            /* @__PURE__ */ e("strong", { className: "font-mono text-[10px] font-medium", children: r.value })
+          ]
+        },
+        r.label
+      )) }),
+      /* @__PURE__ */ n(
+        "button",
+        {
+          onClick: i,
+          className: "mt-4 flex w-full items-center justify-center gap-2 rounded-[.9rem] border border-white/12 bg-white/[.06] py-3 text-[11px] font-semibold hover:bg-white/[.1] sm:mt-5",
+          children: [
+            u ? /* @__PURE__ */ e(F, { size: 14 }) : /* @__PURE__ */ e(ue, { size: 14 }),
+            u ? "Copied" : "Copy stack"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n("aside", { className: "relative flex min-h-[17rem] flex-col justify-between overflow-hidden bg-[#c7ff4d] p-5 text-[#111] sm:min-h-[24rem] sm:p-6", children: [
+      /* @__PURE__ */ e("div", { className: "absolute -right-12 -top-12 h-40 w-40 rounded-full border-[28px] border-black/[.07]" }),
+      /* @__PURE__ */ n("span", { className: "relative font-mono text-[9px] uppercase tracking-[.17em] text-black/42", children: [
+        "0",
+        o + 1,
+        " / 04"
+      ] }),
+      /* @__PURE__ */ n("div", { className: "relative", children: [
+        /* @__PURE__ */ e("strong", { className: "block text-[2.7rem] tracking-[-.08em] sm:text-[3.2rem]", children: d[o].value }),
+        /* @__PURE__ */ e("h4", { className: "mt-2 text-[14px] font-semibold", children: d[o].label }),
+        /* @__PURE__ */ e("p", { className: "mt-3 text-[12px] leading-5 text-black/58", children: d[o].detail })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "relative flex items-center justify-between border-t border-black/15 pt-4 font-mono text-[8px] uppercase tracking-[.14em]", children: [
+        /* @__PURE__ */ e("span", { children: "Ready to use" }),
+        /* @__PURE__ */ e(F, { size: 14 })
+      ] })
+    ] })
+  ] }) });
+}
+function Dt() {
+  const o = [
+    {
+      id: "index",
+      label: "Index",
+      icon: pe,
+      number: "01",
+      accent: "#ff6b48",
+      title: "Begin with intent.",
+      note: "An editorial entrance to the work, the point of view, and what is happening now.",
+      links: ["Manifesto", "Selected work", "Now"]
+    },
+    {
+      id: "work",
+      label: "Work",
+      icon: me,
+      number: "02",
+      accent: "#776cff",
+      title: "Selected outcomes.",
+      note: "Case studies arranged by consequence rather than chronology or visual noise.",
+      links: ["Northstar", "Field Notes", "Relay"]
+    },
+    {
+      id: "profile",
+      label: "Profile",
+      icon: fe,
+      number: "03",
+      accent: "#00a77f",
+      title: "The person in context.",
+      note: "A compact route through principles, capabilities, and the way the work gets made.",
+      links: ["Story", "Capabilities", "Principles"]
+    },
+    {
+      id: "connect",
+      label: "Connect",
+      icon: D,
+      number: "04",
+      accent: "#d89b15",
+      title: "Make the next move.",
+      note: "Availability, direct contact, and the few details needed to start a useful conversation.",
+      links: ["Availability", "Email", "GitHub"]
+    }
+  ], [b, u] = S("index"), [g, d] = S(1), i = v(0), r = v(null), s = v(null), t = v(null), p = v(null), f = v(null), c = typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, l = o.find((h) => h.id === b), x = (h) => {
+    const m = o.findIndex((y) => y.id === h);
+    if (b === h) {
+      u(null);
+      return;
+    }
+    d(m >= i.current ? 1 : -1), i.current = m, u(h);
+  };
+  return ee(() => {
+    var y, C;
+    if (!r.current) return;
+    const h = b === null ? 72 : (((y = s.current) == null ? void 0 : y.scrollHeight) ?? 250) + 72;
+    w.to(r.current, {
+      height: h,
+      duration: c ? 0.01 : 0.7,
+      ease: b === null ? "power4.inOut" : "elastic.out(1,.8)",
+      overwrite: !0
+    });
+    const m = b ? (C = t.current) == null ? void 0 : C.querySelector(`button[data-route-lens="${b}"]`) : null;
+    if (m && t.current && p.current && l) {
+      const N = t.current.getBoundingClientRect(), a = m.getBoundingClientRect();
+      w.to(p.current, {
+        x: a.left - N.left,
+        width: a.width,
+        opacity: 1,
+        backgroundColor: l.accent,
+        duration: c ? 0.01 : 0.76,
+        ease: "elastic.out(1,.62)",
+        overwrite: !0
+      });
+      const k = m.querySelector("[data-route-label]");
+      if (k && w.fromTo(
+        k,
+        { width: 0, opacity: 0, x: -5 },
+        {
+          width: "auto",
+          opacity: 1,
+          x: 0,
+          duration: c ? 0.01 : 0.36,
+          delay: c ? 0 : 0.08,
+          ease: "power3.out"
+        }
+      ), f.current && r.current) {
+        const _ = r.current.getBoundingClientRect(), T = f.current.getBoundingClientRect().width, M = a.left + a.width / 2 - _.left - T / 2;
+        w.to(f.current, {
+          x: M,
+          rotate: g * 8,
+          scale: 1,
+          opacity: 0.86,
+          duration: c ? 0.01 : 0.9,
+          ease: "elastic.out(1,.68)",
+          overwrite: !0
+        });
+      }
+    } else
+      w.to([p.current, f.current], { opacity: 0, duration: c ? 0.01 : 0.2 });
+    if (b && s.current) {
+      const N = s.current.querySelector("[data-route-copy]"), a = s.current.querySelectorAll("[data-route-link]");
+      w.fromTo(
+        N,
+        { x: g * 24, opacity: 0, filter: "blur(7px)" },
+        { x: 0, opacity: 1, filter: "blur(0px)", duration: c ? 0.01 : 0.5, ease: "power4.out" }
+      ), w.fromTo(
+        a,
+        { y: 12, opacity: 0 },
+        {
+          y: 0,
+          opacity: 1,
+          duration: c ? 0.01 : 0.42,
+          stagger: c ? 0 : 0.055,
+          delay: c ? 0 : 0.1,
+          ease: "power3.out"
+        }
+      );
+    }
+  }, [b, g, c, l]), /* @__PURE__ */ e("div", { className: "flex min-h-[36rem] w-full items-end justify-center overflow-hidden bg-[radial-gradient(circle_at_20%_15%,rgba(119,108,255,.26),transparent_32%),radial-gradient(circle_at_84%_78%,rgba(255,107,72,.22),transparent_31%),#11131a] p-4 sm:p-8", children: /* @__PURE__ */ n(
+    "section",
+    {
+      ref: r,
+      className: "relative h-[21rem] w-full max-w-[40rem] overflow-hidden rounded-[2rem] border border-white/20 bg-[#f5f4ef]/95 text-[#171717] shadow-[inset_0_1px_0_#fff,0_34px_100px_rgba(0,0,0,.32)] backdrop-blur-2xl",
+      children: [
+        /* @__PURE__ */ n("div", { className: "absolute inset-x-0 top-0 bottom-[72px] overflow-hidden", children: [
+          /* @__PURE__ */ e(
+            "span",
+            {
+              ref: f,
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute -left-0 top-5 h-36 w-36 rounded-full opacity-0 blur-[1px]",
+              style: {
+                background: `radial-gradient(circle at 34% 28%, rgba(255,255,255,.95), ${(l == null ? void 0 : l.accent) ?? "#999"}55 44%, ${(l == null ? void 0 : l.accent) ?? "#999"}18 68%, transparent 70%)`,
+                boxShadow: `inset 0 0 0 1px ${(l == null ? void 0 : l.accent) ?? "#999"}55, 0 22px 45px ${(l == null ? void 0 : l.accent) ?? "#999"}1f`
+              }
+            }
+          ),
+          l && /* @__PURE__ */ n(
+            "div",
+            {
+              ref: s,
+              className: "relative grid min-h-[16rem] gap-6 p-5 sm:grid-cols-[1.1fr_.9fr] sm:p-6",
+              role: "tabpanel",
+              "aria-live": "polite",
+              children: [
+                /* @__PURE__ */ n("div", { "data-route-copy": !0, className: "relative z-10 flex min-w-0 flex-col justify-between", children: [
+                  /* @__PURE__ */ n("div", { children: [
+                    /* @__PURE__ */ n("span", { className: "font-mono text-[8px] uppercase tracking-[.18em] text-black/34", children: [
+                      "Route ",
+                      l.number,
+                      " · Portfolio"
+                    ] }),
+                    /* @__PURE__ */ e("h3", { className: "mt-5 max-w-[18rem] text-[2.65rem] font-semibold leading-[.91] tracking-[-.075em]", children: l.title }),
+                    /* @__PURE__ */ e("p", { className: "mt-4 max-w-[20rem] text-[10px] leading-[1.55] text-black/46", children: l.note })
+                  ] }),
+                  /* @__PURE__ */ n(
+                    "a",
+                    {
+                      href: `#${l.id}`,
+                      className: "mt-6 inline-flex w-fit items-center gap-2 text-[10px] font-semibold !text-black no-underline",
+                      children: [
+                        "Enter ",
+                        l.label.toLowerCase(),
+                        " ",
+                        /* @__PURE__ */ e(I, { size: 14 })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ n("div", { className: "relative z-10 self-end rounded-[1.45rem] border border-black/[.08] bg-white/60 p-2 shadow-[0_16px_45px_rgba(34,35,46,.08)] backdrop-blur-xl", children: [
+                  /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-3 pb-3 pt-2", children: [
+                    /* @__PURE__ */ e("span", { className: "font-mono text-[8px] uppercase tracking-[.16em] text-black/32", children: "Inside this route" }),
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: "h-2 w-2 rounded-full",
+                        style: { backgroundColor: l.accent, boxShadow: `0 0 0 5px ${l.accent}1b` }
+                      }
+                    )
+                  ] }),
+                  l.links.map((h, m) => /* @__PURE__ */ n(
+                    "button",
+                    {
+                      "data-route-link": !0,
+                      className: "group grid w-full grid-cols-[24px_1fr_auto] items-center rounded-xl px-3 py-2.5 text-left transition-colors hover:bg-black/[.045]",
+                      children: [
+                        /* @__PURE__ */ n("span", { className: "font-mono text-[7px] text-black/26", children: [
+                          "0",
+                          m + 1
+                        ] }),
+                        /* @__PURE__ */ e("strong", { className: "text-[10px] font-semibold", children: h }),
+                        /* @__PURE__ */ e(
+                          he,
+                          {
+                            size: 12,
+                            className: "text-black/25 transition-transform group-hover:translate-x-1 group-hover:text-black"
+                          }
+                        )
+                      ]
+                    },
+                    h
+                  ))
+                ] })
+              ]
+            },
+            l.id
+          )
+        ] }),
+        /* @__PURE__ */ n(
+          "nav",
+          {
+            ref: t,
+            "aria-label": "Route Lens navigation",
+            className: "absolute inset-x-2 bottom-2 flex h-14 rounded-[1.35rem] bg-[#151515] p-1.5 text-white shadow-[0_14px_32px_rgba(0,0,0,.24)]",
+            children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  ref: p,
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute bottom-1.5 left-0 top-1.5 rounded-[.95rem]"
+                }
+              ),
+              o.map((h) => {
+                const m = h.icon, y = b === h.id;
+                return /* @__PURE__ */ n(
+                  "button",
+                  {
+                    "data-route-lens": h.id,
+                    onClick: () => x(h.id),
+                    role: "tab",
+                    "aria-label": h.label,
+                    "aria-selected": y,
+                    style: { flexGrow: y ? 1.75 : 1 },
+                    className: `relative z-10 flex min-w-0 basis-0 items-center justify-center gap-2 overflow-hidden rounded-[.95rem] px-2 transition-[flex-grow,color] duration-500 ease-out ${y ? "text-white" : "text-white/42 hover:text-white"}`,
+                    children: [
+                      /* @__PURE__ */ e(m, { size: 14, className: "shrink-0" }),
+                      y && /* @__PURE__ */ e("strong", { "data-route-label": !0, className: "overflow-hidden whitespace-nowrap text-[10px] font-semibold", children: h.label })
+                    ]
+                  },
+                  h.id
+                );
+              })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+const wt = $(
+  () => Promise.resolve().then(() => ot).then((o) => ({ default: o.ExpandableTab }))
+), yt = $(() => Promise.resolve().then(() => je)), vt = $(() => Promise.resolve().then(() => qe)), kt = $(() => Promise.resolve().then(() => Ie)), Nt = $(() => Promise.resolve().then(() => it)), _t = $(() => Promise.resolve().then(() => lt)), Ct = $(() => Promise.resolve().then(() => dt)), St = $(() => Promise.resolve().then(() => pt)), H = /* @__PURE__ */ e("div", { className: "showcase-fullbleed h-full min-h-[38rem] w-full bg-[#f3f3f5]", "aria-label": "Loading component" }), W = /* @__PURE__ */ e("div", { className: "h-16 w-[236px] opacity-0", "aria-label": "Loading component" }), Pt = () => new Promise((o) => window.setTimeout(o, 420));
+function J({ children: o }) {
+  return /* @__PURE__ */ e("div", { className: "flex h-[clamp(22rem,58vw,38rem)] w-full items-center justify-center bg-transparent p-8", children: o });
+}
+function Mt() {
+  return /* @__PURE__ */ e(R, { fallback: H, children: /* @__PURE__ */ e(_t, {}) });
+}
+function Tt() {
+  return /* @__PURE__ */ e(R, { fallback: H, children: /* @__PURE__ */ e(Ct, {}) });
+}
+function zt() {
+  return /* @__PURE__ */ e(R, { fallback: H, children: /* @__PURE__ */ e(St, {}) });
+}
+function qt({
+  id: o,
+  textMotionVariant: b = "lift"
+}) {
+  return o === "text-motion" ? /* @__PURE__ */ e(R, { fallback: H, children: /* @__PURE__ */ e(Nt, { variant: b }) }) : o === "lens-dock" ? /* @__PURE__ */ e(mt, {}) : o === "refraction-card" ? /* @__PURE__ */ e(ft, {}) : o === "mercury-tabs" ? /* @__PURE__ */ e(ht, {}) : o === "viscous-reel" ? /* @__PURE__ */ e(bt, {}) : o === "prism-contact" ? /* @__PURE__ */ e(gt, {}) : o === "glass-code" ? /* @__PURE__ */ e(xt, {}) : o === "expandable-tab" ? /* @__PURE__ */ e(R, { fallback: W, children: /* @__PURE__ */ e(wt, {}) }) : o === "click-key" ? /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(R, { fallback: W, children: /* @__PURE__ */ e(yt, { onAction: Pt }) }) }) : o === "resume-download" ? /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(R, { fallback: W, children: /* @__PURE__ */ e(vt, { href: "/resume-demo.txt", filename: "resume-demo.txt", fileLabel: "Demo file · 1 KB" }) }) }) : o === "copy-link" ? /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(R, { fallback: W, children: /* @__PURE__ */ e(kt, {}) }) }) : o === "liquid-mesh" ? /* @__PURE__ */ e(Mt, {}) : o === "chromatic-lens" ? /* @__PURE__ */ e(Tt, {}) : /* @__PURE__ */ e(zt, {});
+}
+export {
+  ze as ClickKey,
+  gt as ContactCard,
+  Ae as CopyLinkButton,
+  nt as ExpandableTab,
+  ct as HalftoneBackground,
+  ut as LightBackground,
+  Xt as LiquidGlassCard,
+  Bt as LiquidGlassDefs,
+  mt as PortfolioNav,
+  qt as PortfolioPiece,
+  ft as ProjectCard,
+  bt as ProjectList,
+  De as ResumeDownloadButton,
+  Dt as RouteLens,
+  st as SilkBackground,
+  ht as SkillsList,
+  xt as TechStack,
+  ie as TextMotion
+};