// hero-animation.jsx — 16:9 cinematic banner. ~14s loop.
//
// Story arc:
//   0.0–2.5s:  Source artifacts (resume PDF, GitHub repo cards, LinkedIn card,
//              Substack post, X post) drift into frame from the edges
//   2.5–4.5s:  Folio scan ring sweeps across them; they snap-align into a stack
//   4.5–8.5s:  Stack collapses INTO a portfolio website that types itself
//              into shape (header → name → bio → projects)
//   8.5–11s:   Domain bar slides in from above, types "mayaokonkwo.com",
//              status changes available → registering → registered
//   11–13s:    SSL cert locks, "Your portfolio is live." stamp lands
//   13–14s:    Hold + gentle settle

const HERO_W = 1600;
const HERO_H = 900;
const HERO_DUR = 15.5;

// ── Source artifact cards ───────────────────────────────────────────────────

function SourceCard({ kind, x, y, rot = 0, scale = 1, opacity = 1, width, height }) {
  const w = width || (kind === "resume" ? 220 : kind === "github" ? 280 : 260);
  const h = height || (kind === "resume" ? 280 : kind === "github" ? 130 : 110);

  let content;
  if (kind === "resume") {
    content = (
      <div style={{ padding: 18, height: "100%", display: "flex", flexDirection: "column", gap: 6 }}>
        <div style={{ fontFamily: "Newsreader, serif", fontSize: 18, color: "#1a1814" }}>Maya Okonkwo</div>
        <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 9, color: "#888", letterSpacing: "0.04em", textTransform: "uppercase" }}>FULL-STACK AI ENGINEER</div>
        <div style={{ height: 0.5, background: "#ddd", margin: "10px 0 6px" }}/>
        {[88, 96, 72, 90, 60].map((w, i) => (
          <div key={i} style={{ height: 4, width: `${w}%`, background: "#e0ddd4", borderRadius: 2 }}/>
        ))}
        <div style={{ marginTop: 10, fontFamily: "JetBrains Mono, monospace", fontSize: 9, color: "#aaa", letterSpacing: "0.04em" }}>EXPERIENCE</div>
        {[92, 80, 70].map((w, i) => (
          <div key={i} style={{ height: 3, width: `${w}%`, background: "#eae7df", borderRadius: 2 }}/>
        ))}
        <div style={{ marginTop: 8, fontFamily: "JetBrains Mono, monospace", fontSize: 9, color: "#aaa", letterSpacing: "0.04em" }}>EDUCATION</div>
        {[76, 64].map((w, i) => (
          <div key={i} style={{ height: 3, width: `${w}%`, background: "#eae7df", borderRadius: 2 }}/>
        ))}
      </div>
    );
  } else if (kind === "github") {
    content = (
      <div style={{ padding: 14, height: "100%", display: "flex", flexDirection: "column", gap: 6 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div style={{ width: 18, height: 18, borderRadius: 9, background: "#0f0f0f" }}/>
          <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "#1a1814" }}>okonkwo-m / vllm-gateway</span>
        </div>
        <div style={{ fontSize: 11, color: "#666", lineHeight: 1.4 }}>Drop-in proxy that adds streaming, retries, and per-tenant quotas to vLLM.</div>
        <div style={{ display: "flex", gap: 14, marginTop: "auto", fontFamily: "JetBrains Mono, monospace", fontSize: 10, color: "#888" }}>
          <span>★ 3.2k</span><span>⑂ 187</span><span>● Python</span>
        </div>
      </div>
    );
  } else if (kind === "linkedin") {
    content = (
      <div style={{ padding: 14, height: "100%", display: "flex", flexDirection: "column", gap: 6 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ width: 30, height: 30, borderRadius: 4, background: "#0a66c2", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "Instrument Sans, sans-serif", fontWeight: 700, fontSize: 14 }}>in</div>
          <div>
            <div style={{ fontFamily: "Instrument Sans, sans-serif", fontSize: 12, fontWeight: 600 }}>Maya Okonkwo</div>
            <div style={{ fontSize: 10, color: "#666" }}>Infrastructure Engineer · Brooklyn</div>
          </div>
        </div>
        <div style={{ height: 0.5, background: "#e8e6e0", margin: "4px 0" }}/>
        <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 9, color: "#888", letterSpacing: "0.04em" }}>EXPERIENCE</div>
        <div style={{ height: 3, width: "92%", background: "#eae7df", borderRadius: 2 }}/>
        <div style={{ height: 3, width: "78%", background: "#eae7df", borderRadius: 2 }}/>
      </div>
    );
  } else if (kind === "substack") {
    content = (
      <div style={{ padding: 14, height: "100%", display: "flex", flexDirection: "column", gap: 6 }}>
        <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 9, color: "#ff6719", letterSpacing: "0.08em", textTransform: "uppercase" }}>LOADBEARING · NEWSLETTER</div>
        <div style={{ fontFamily: "Newsreader, serif", fontSize: 14, color: "#1a1814", lineHeight: 1.2 }}>The cache that ate your eval set</div>
        <div style={{ fontSize: 10, color: "#666", lineHeight: 1.4 }}>Why deterministic caching in your inference layer can quietly ruin your offline eval scores.</div>
        <div style={{ marginTop: "auto", fontFamily: "JetBrains Mono, monospace", fontSize: 9, color: "#888" }}>11k readers · 6 min read</div>
      </div>
    );
  } else if (kind === "twitter") {
    content = (
      <div style={{ padding: 14, height: "100%", display: "flex", flexDirection: "column", gap: 6 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div style={{ width: 24, height: 24, borderRadius: 12, background: "#0a0a0a" }}/>
          <span style={{ fontFamily: "Instrument Sans, sans-serif", fontSize: 11, fontWeight: 600 }}>maya</span>
          <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, color: "#888" }}>@mayadotpy</span>
        </div>
        <div style={{ fontSize: 11, color: "#1a1814", lineHeight: 1.4 }}>vllm-gateway 0.6 ships with per-tenant token budgets and a working circuit breaker. ~600 LOC, no SaaS.</div>
        <div style={{ marginTop: "auto", fontFamily: "JetBrains Mono, monospace", fontSize: 9, color: "#888" }}>♡ 412 · ↻ 88</div>
      </div>
    );
  }

  return (
    <div style={{
      position: "absolute",
      left: x, top: y,
      width: w, height: h,
      transform: `rotate(${rot}deg) scale(${scale})`,
      transformOrigin: "center",
      opacity,
      background: "#fdfbf6",
      border: "0.5px solid rgba(0,0,0,0.08)",
      borderRadius: 8,
      boxShadow: "0 30px 60px -20px rgba(0,0,0,0.18), 0 8px 16px -8px rgba(0,0,0,0.10)",
      overflow: "hidden",
      willChange: "transform, opacity",
    }}>
      {content}
    </div>
  );
}

// ── Scene 1: artifacts drift in ─────────────────────────────────────────────

function Scene1Artifacts() {
  const { localTime, duration } = useSprite();
  const t = localTime;

  // Each card: starts off-screen, drifts in to its "scattered" rest position
  const cards = [
    { kind: "resume",   start: 0.0, restX: 90,   restY: 240, fromX: -300, fromY: 100, rot: -8 },
    { kind: "github",   start: 0.2, restX: 380,  restY: 180, fromX: -200, fromY: -200, rot: -3 },
    { kind: "linkedin", start: 0.4, restX: 720,  restY: 100, fromX: 0,    fromY: -220, rot: 4 },
    { kind: "substack", start: 0.6, restX: 1000, restY: 200, fromX: 400,  fromY: -200, rot: -2 },
    { kind: "twitter",  start: 0.8, restX: 1240, restY: 360, fromX: 600,  fromY: 0,    rot: 6 },
    { kind: "github",   start: 1.0, restX: 380,  restY: 480, fromX: -200, fromY: 800, rot: 7 },
    { kind: "github",   start: 1.2, restX: 760,  restY: 540, fromX: 0,    fromY: 800, rot: -5 },
    { kind: "twitter",  start: 1.4, restX: 1080, restY: 600, fromX: 800,  fromY: 800, rot: 3 },
  ];

  // Phase A: drift in (0–2.5)
  // Phase B: scan + collapse to center stack (2.5–4.5)
  return cards.map((c, i) => {
    const inT = clamp((t - c.start) / 1.0, 0, 1);
    const inEased = Easing.easeOutCubic(inT);

    // Collapse phase: cards converge to stacked position at center
    const collapseStart = 2.6 + i * 0.04;
    const collapseT = clamp((t - collapseStart) / 1.4, 0, 1);
    const collapseEased = Easing.easeInOutCubic(collapseT);

    const stackX = 600 + (i - 4) * 4;
    const stackY = 280 + (i - 4) * 3;
    const stackRot = (i - 4) * 1.5;

    const x = c.fromX + (c.restX - c.fromX) * inEased;
    const y = c.fromY + (c.restY - c.fromY) * inEased;

    const finalX = x + (stackX - x) * collapseEased;
    const finalY = y + (stackY - y) * collapseEased;
    const finalRot = c.rot + (stackRot - c.rot) * collapseEased;
    const finalScale = 1 - 0.25 * collapseEased;
    const finalOpacity = inEased * (1 - collapseEased * 0.6);

    return (
      <SourceCard key={i}
        kind={c.kind}
        x={finalX} y={finalY}
        rot={finalRot}
        scale={finalScale}
        opacity={finalOpacity}
      />
    );
  });
}

// Scan ring sweep
function ScanRing() {
  const time = useTime();
  const ringStart = 2.3;
  const ringEnd = 4.3;
  if (time < ringStart || time > ringEnd) return null;

  const t = (time - ringStart) / (ringEnd - ringStart);
  const radius = 60 + Easing.easeOutCubic(t) * 1100;
  const opacity = t < 0.85 ? 1 : (1 - (t - 0.85) / 0.15);

  return (
    <div style={{
      position: "absolute",
      left: HERO_W / 2,
      top: HERO_H / 2,
      width: radius * 2,
      height: radius * 2,
      marginLeft: -radius,
      marginTop: -radius,
      borderRadius: "50%",
      border: `1px solid oklch(0.62 0.14 40 / ${opacity * 0.6})`,
      boxShadow: `0 0 80px oklch(0.62 0.14 40 / ${opacity * 0.25}), inset 0 0 60px oklch(0.62 0.14 40 / ${opacity * 0.15})`,
      pointerEvents: "none",
    }}/>
  );
}

// ── Scene 2: portfolio site materializes ────────────────────────────────────

function PortfolioBuild() {
  const time = useTime();
  const buildStart = 4.4;
  const t = clamp((time - buildStart) / 4.0, 0, 1);
  if (time < buildStart) return null;

  // Parts of the portfolio appear in sequence:
  //  - frame    0.0–0.15
  //  - eyebrow  0.15–0.25
  //  - name     0.20–0.45
  //  - role     0.40–0.55
  //  - bio      0.50–0.70
  //  - projects 0.65–0.95
  const seg = (s, e) => clamp((t - s) / (e - s), 0, 1);

  const frameOp = Easing.easeOutCubic(seg(0.0, 0.15));
  const eyebrowOp = Easing.easeOutCubic(seg(0.15, 0.27));
  const nameProgress = Easing.easeInOutCubic(seg(0.20, 0.45));
  const roleOp = Easing.easeOutCubic(seg(0.40, 0.55));
  const bioOp = Easing.easeOutCubic(seg(0.50, 0.70));
  const project1Op = Easing.easeOutCubic(seg(0.62, 0.78));
  const project2Op = Easing.easeOutCubic(seg(0.72, 0.86));
  const project3Op = Easing.easeOutCubic(seg(0.82, 0.95));

  // Type the name letter-by-letter
  const fullName = "Maya Okonkwo.";
  const charsToShow = Math.floor(nameProgress * fullName.length);
  const namePartial = fullName.slice(0, charsToShow);

  const W = 1080;
  const H = 600;

  // Frame slides up from collapsed-stack position and expands
  const frameScale = 0.4 + frameOp * 0.6;
  const frameY = 50 + (1 - frameOp) * 100;

  return (
    <div style={{
      position: "absolute",
      left: (HERO_W - W) / 2,
      top: 150,
      width: W,
      height: H,
      transform: `translateY(${frameY - 50}px) scale(${frameScale})`,
      transformOrigin: "center top",
      opacity: frameOp,
      background: "#fdfbf6",
      border: "0.5px solid rgba(0,0,0,0.10)",
      borderRadius: 12,
      boxShadow: "0 60px 120px -40px rgba(0,0,0,0.30), 0 20px 40px -10px rgba(0,0,0,0.12)",
      overflow: "hidden",
      willChange: "transform, opacity",
    }}>
      {/* Window chrome */}
      <div style={{ height: 38, borderBottom: "0.5px solid rgba(0,0,0,0.06)", display: "flex", alignItems: "center", padding: "0 16px", gap: 6 }}>
        <div style={{ width: 11, height: 11, borderRadius: 6, background: "#e8e6e0" }}/>
        <div style={{ width: 11, height: 11, borderRadius: 6, background: "#e8e6e0" }}/>
        <div style={{ width: 11, height: 11, borderRadius: 6, background: "#e8e6e0" }}/>
        <div style={{ marginLeft: 24, fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "#888" }}>
          mayaokonkwo.com
        </div>
      </div>

      {/* Content */}
      <div style={{ padding: "60px 80px", position: "relative" }}>
        <div style={{
          fontFamily: "JetBrains Mono, monospace",
          fontSize: 12,
          letterSpacing: "0.16em",
          textTransform: "uppercase",
          color: "#a09889",
          opacity: eyebrowOp,
          marginBottom: 24,
        }}>
          Full-stack AI Engineer · Brooklyn
        </div>

        <div style={{
          fontFamily: "Newsreader, serif",
          fontSize: 84,
          lineHeight: 0.95,
          letterSpacing: "-0.025em",
          color: "#1a1814",
          fontWeight: 400,
          marginBottom: 28,
        }}>
          {namePartial}
          {nameProgress < 1 && nameProgress > 0 && (
            <span style={{
              display: "inline-block",
              width: 4, height: 70,
              background: "oklch(0.62 0.14 40)",
              verticalAlign: "middle",
              marginLeft: 4,
              animation: "pulse-soft 0.8s ease-in-out infinite",
            }}/>
          )}
        </div>

        <div style={{
          fontFamily: "Newsreader, serif",
          fontSize: 28,
          color: "#3a3530",
          fontStyle: "italic",
          opacity: roleOp,
          marginBottom: 16,
          lineHeight: 1.2,
        }}>
          I build inference systems that don't fall over.
        </div>

        <div style={{
          maxWidth: 700,
          fontFamily: "Instrument Sans, sans-serif",
          fontSize: 16,
          color: "#5a5249",
          lineHeight: 1.55,
          opacity: bioOp,
          marginBottom: 48,
        }}>
          Engineer at the seam of model serving and product. Previously infrastructure
          at a Series-B vector DB. Now independent, taking on three retainers a year.
        </div>

        {/* Projects strip */}
        <div style={{ display: "flex", gap: 12, alignItems: "stretch" }}>
          {[
            { op: project1Op, name: "vllm-gateway", tag: "open-source", stat: "3.2k ★" },
            { op: project2Op, name: "Loadbearing",  tag: "newsletter",  stat: "11k readers" },
            { op: project3Op, name: "Tessera",      tag: "client work", stat: "Series A" },
          ].map((p, i) => (
            <div key={i} style={{
              flex: 1,
              padding: 18,
              border: "0.5px solid rgba(0,0,0,0.10)",
              borderRadius: 8,
              opacity: p.op,
              transform: `translateY(${(1 - p.op) * 12}px)`,
              background: "#fbf8f0",
            }}>
              <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 9, letterSpacing: "0.08em", textTransform: "uppercase", color: "#a09889" }}>{p.tag}</div>
              <div style={{ fontFamily: "Newsreader, serif", fontSize: 22, color: "#1a1814", marginTop: 6 }}>{p.name}</div>
              <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "#888", marginTop: 14 }}>{p.stat}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Scene 3: domain bar ─────────────────────────────────────────────────────

function DomainBar() {
  const time = useTime();
  const start = 8.6;
  if (time < start) return null;

  const t = clamp((time - start) / 4.4, 0, 1);

  // Phases:
  //  0.00–0.10 slide down
  //  0.10–0.45 type "mayaokonkwo.com"
  //  0.45–0.55 status: AVAILABLE pulses
  //  0.55–0.75 status: REGISTERING
  //  0.75–0.90 status: REGISTERED + ssl lock
  //  0.90–1.00 LIVE banner stamp
  const slideT = Easing.easeOutCubic(clamp(t / 0.10, 0, 1));

  const fullDomain = "mayaokonkwo.com";
  const typeT = clamp((t - 0.10) / 0.35, 0, 1);
  const typed = fullDomain.slice(0, Math.floor(typeT * fullDomain.length));

  let status = "typing";
  if (t > 0.45) status = "available";
  if (t > 0.55) status = "registering";
  if (t > 0.75) status = "registered";

  let badgeText = "TYPING…";
  let badgeColor = "#a09889";
  let badgeBg = "#f0ede5";
  if (status === "available") { badgeText = "AVAILABLE"; badgeColor = "oklch(0.45 0.14 145)"; badgeBg = "oklch(0.94 0.06 145)"; }
  if (status === "registering") { badgeText = "REGISTERING…"; badgeColor = "oklch(0.55 0.14 60)"; badgeBg = "oklch(0.95 0.06 75)"; }
  if (status === "registered") { badgeText = "REGISTERED"; badgeColor = "#fdfbf6"; badgeBg = "oklch(0.45 0.14 145)"; }

  const sslOp = clamp((t - 0.78) / 0.07, 0, 1);

  return (
    <div style={{
      position: "absolute",
      left: HERO_W / 2 - 380,
      top: 70,
      width: 760,
      transform: `translateY(${(1 - slideT) * -120}px)`,
      opacity: slideT,
    }}>
      <div style={{
        background: "#fdfbf6",
        border: "0.5px solid rgba(0,0,0,0.12)",
        borderRadius: 12,
        padding: "16px 20px",
        display: "flex",
        alignItems: "center",
        gap: 16,
        boxShadow: "0 30px 60px -20px rgba(0,0,0,0.25), 0 8px 16px -8px rgba(0,0,0,0.10)",
      }}>
        <div style={{
          width: 22, height: 22,
          opacity: sslOp,
          color: "oklch(0.45 0.14 145)",
        }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
            <rect x="3" y="11" width="18" height="11" rx="2"/>
            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
          </svg>
        </div>
        <div style={{ flex: 1, fontFamily: "JetBrains Mono, monospace", fontSize: 22, color: "#1a1814" }}>
          {typed}
          {typeT > 0 && typeT < 1 && (
            <span style={{ display: "inline-block", width: 2, height: 22, background: "#1a1814", marginLeft: 2, verticalAlign: "middle", animation: "pulse-soft 0.6s ease-in-out infinite" }}/>
          )}
        </div>
        <div style={{
          padding: "6px 12px",
          borderRadius: 999,
          fontFamily: "JetBrains Mono, monospace",
          fontSize: 10,
          letterSpacing: "0.08em",
          color: badgeColor,
          background: badgeBg,
          transition: "all 240ms ease",
        }}>
          {badgeText}
        </div>
      </div>
    </div>
  );
}

// ── Scene 4: live stamp ─────────────────────────────────────────────────────

function LiveStamp() {
  const time = useTime();
  const start = 12.6;
  if (time < start) return null;
  const t = clamp((time - start) / 1.4, 0, 1);

  // Fade + gentle scale up. No rotation, no red stamp.
  const scale = 0.94 + Easing.easeOutCubic(t) * 0.06;
  const op = clamp(t * 1.8, 0, 1);

  const winW = 820;
  const winH = 460;

  return (
    <div style={{
      position: "absolute",
      left: HERO_W / 2 - winW / 2,
      top: HERO_H / 2 - winH / 2 + 20,
      width: winW,
      height: winH,
      transform: `scale(${scale})`,
      transformOrigin: "center",
      opacity: op,
      pointerEvents: "none",
    }}>
      {/* Browser window */}
      <div style={{
        width: "100%",
        height: "100%",
        background: "#fdfbf6",
        borderRadius: 12,
        overflow: "hidden",
        boxShadow: "0 50px 100px -30px rgba(20,15,10,0.45), 0 20px 40px -20px rgba(20,15,10,0.25), 0 0 0 0.5px rgba(0,0,0,0.08)",
        display: "flex",
        flexDirection: "column",
      }}>
        {/* Title bar */}
        <div style={{
          height: 36,
          background: "#f0ebe0",
          borderBottom: "0.5px solid rgba(0,0,0,0.08)",
          display: "flex",
          alignItems: "center",
          padding: "0 14px",
          gap: 14,
          flexShrink: 0,
        }}>
          <div style={{ display: "flex", gap: 6 }}>
            <div style={{ width: 10, height: 10, borderRadius: 5, background: "#e8d4cc" }}/>
            <div style={{ width: 10, height: 10, borderRadius: 5, background: "#ece4cc" }}/>
            <div style={{ width: 10, height: 10, borderRadius: 5, background: "#d4e2cc" }}/>
          </div>
          <div style={{
            flex: 1,
            background: "#fdfbf6",
            borderRadius: 6,
            height: 22,
            display: "flex",
            alignItems: "center",
            padding: "0 12px",
            gap: 8,
            border: "0.5px solid rgba(0,0,0,0.06)",
            maxWidth: 360,
            margin: "0 auto",
          }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="oklch(0.45 0.14 145)" strokeWidth="2">
              <rect x="3" y="11" width="18" height="11" rx="2"/>
              <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
            </svg>
            <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "#1a1814" }}>
              mayaokonkwo.com
            </div>
          </div>

          {/* Small live indicator — top-right */}
          <div style={{
            display: "flex",
            alignItems: "center",
            gap: 5,
            padding: "3px 8px",
            background: "rgba(255,255,255,0.6)",
            borderRadius: 999,
            border: "0.5px solid rgba(0,0,0,0.06)",
          }}>
            <div style={{
              width: 6,
              height: 6,
              borderRadius: 3,
              background: "oklch(0.72 0.18 145)",
              boxShadow: "0 0 0 2px color-mix(in oklch, oklch(0.72 0.18 145) 30%, transparent), 0 0 6px oklch(0.72 0.18 145)",
              animation: "pulse-soft 1.6s ease-in-out infinite",
            }}/>
            <div style={{
              fontFamily: "JetBrains Mono, monospace",
              fontSize: 8.5,
              letterSpacing: "0.12em",
              color: "oklch(0.40 0.14 145)",
              fontWeight: 500,
            }}>
              LIVE
            </div>
          </div>
        </div>

        {/* Page content — Maya's published portfolio */}
        <div style={{
          flex: 1,
          padding: "32px 56px",
          display: "flex",
          flexDirection: "column",
          gap: 14,
          overflow: "hidden",
        }}>
          <div style={{
            fontFamily: "JetBrains Mono, monospace",
            fontSize: 9,
            letterSpacing: "0.18em",
            color: "#a09889",
          }}>
            FULL-STACK AI ENGINEER · BROOKLYN
          </div>
          <div style={{
            fontFamily: "Newsreader, serif",
            fontSize: 64,
            lineHeight: 0.95,
            letterSpacing: "-0.025em",
            color: "#1a1814",
            marginTop: 4,
          }}>
            Maya Okonkwo.
          </div>
          <div style={{
            fontFamily: "Newsreader, serif",
            fontStyle: "italic",
            fontSize: 20,
            color: "#3a3530",
            marginTop: 2,
          }}>
            I build inference systems that don't fall over.
          </div>
          <div style={{
            fontFamily: "Instrument Sans, sans-serif",
            fontSize: 13,
            color: "#5a5249",
            lineHeight: 1.55,
            maxWidth: 540,
            marginTop: 6,
          }}>
            Engineer working at the seam of model serving and product. Previously infrastructure at a Series-B vector DB. Now independent, taking on three retainers a year.
          </div>

          {/* Two project rows */}
          <div style={{
            marginTop: 18,
            paddingTop: 14,
            borderTop: "0.5px solid #e9e6df",
            display: "flex",
            flexDirection: "column",
            gap: 10,
          }}>
            <div style={{ display: "grid", gridTemplateColumns: "100px 1fr auto", gap: 18, alignItems: "baseline" }}>
              <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 9, letterSpacing: "0.1em", color: "#a09889", textTransform: "uppercase" }}>OPEN-SOURCE</div>
              <div style={{ fontFamily: "Newsreader, serif", fontSize: 16, color: "#1a1814" }}>vllm-gateway</div>
              <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, color: "#888" }}>3.2k stars</div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "100px 1fr auto", gap: 18, alignItems: "baseline" }}>
              <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 9, letterSpacing: "0.1em", color: "#a09889", textTransform: "uppercase" }}>NEWSLETTER</div>
              <div style={{ fontFamily: "Newsreader, serif", fontSize: 16, color: "#1a1814" }}>Loadbearing</div>
              <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, color: "#888" }}>11k readers</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Static background grid + corner labels (always visible) ─────────────────

function HeroBackdrop() {
  return (
    <>
      {/* Subtle grid */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage:
          "linear-gradient(to right, rgba(0,0,0,0.025) 1px, transparent 1px)," +
          "linear-gradient(to bottom, rgba(0,0,0,0.025) 1px, transparent 1px)",
        backgroundSize: "80px 80px",
        opacity: 0.6,
      }}/>
      {/* Corner labels — editorial */}
      <div style={{ position: "absolute", left: 32, top: 28, fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.16em", color: "#a09889" }}>
        FOLIO / 01 — INPUTS
      </div>
      <div style={{ position: "absolute", right: 32, top: 28, fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.16em", color: "#a09889" }}>
        FROM SCATTERED → SHIPPED
      </div>
      <div style={{ position: "absolute", left: 32, bottom: 28, fontFamily: "Newsreader, serif", fontSize: 18, fontStyle: "italic", color: "#a09889" }}>
        a portfolio launch product
      </div>
      <div style={{ position: "absolute", right: 32, bottom: 28, fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.16em", color: "#a09889" }}>
        ◯ AUTOPLAY
      </div>
    </>
  );
}

// ── The Stage ───────────────────────────────────────────────────────────────

function HeroAnimation({ embedded = false }) {
  return (
    <Stage
      width={HERO_W}
      height={HERO_H}
      duration={HERO_DUR}
      background="#f6f1e8"
      autoplay={true}
      loop={true}
      chromeless={true}
      persistKey="folio-hero-v4"
    >
      <HeroBackdrop />
      <Sprite start={0} end={5}>
        <Scene1Artifacts />
      </Sprite>
      <ScanRing />
      <PortfolioBuild />
      <DomainBar />
      <LiveStamp />
    </Stage>
  );
}

window.HeroAnimation = HeroAnimation;