// Scenes 1–3: Title · Vendor Cascade (with brand chips) · Document Ingestion → Knowledge Vault
const { useTime, useSprite, Easing, clamp, interpolate } = window;

const INK = '#070D16';
const INK_2 = '#0E1A2B';
const IVORY = '#F5F1E8';
const IVORY_DIM = 'rgba(245,241,232,0.62)';
const IVORY_DIMMER = 'rgba(245,241,232,0.38)';
const WINE = '#DC2626';
const GOLD = '#B79268';
const HAIRLINE = 'rgba(245,241,232,0.12)';

function Eyebrow({ children, color = WINE, delay = 0 }) {
  const { localTime } = useSprite();
  const t = clamp((localTime - delay) / 0.5, 0, 1);
  return (
    <div style={{
      fontFamily: 'Merriweather, Georgia, serif', fontSize: 11, fontWeight: 500,
      letterSpacing: '0.18em', textTransform: 'uppercase', color,
      opacity: t, transform: `translateY(${(1 - t) * 6}px)`,
    }}>{children}</div>
  );
}

function FadeUp({ children, delay = 0, dur = 0.6, y = 14, style = {} }) {
  const { localTime } = useSprite();
  const t = Easing.easeOutQuart(clamp((localTime - delay) / dur, 0, 1));
  return <div style={{ opacity: t, transform: `translateY(${(1 - t) * y}px)`, ...style }}>{children}</div>;
}

// ─────────────────────────────────────────────────────────────
// Scene 1 · Title
// ─────────────────────────────────────────────────────────────
window.Scene1Title = function Scene1Title() {
  const { localTime, duration } = useSprite();
  const bgScale = 1 + Math.max(0, (1 - localTime / duration)) * 0.04;
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(ellipse at 50% 42%, #15243B 0%, ${INK} 70%)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column',
    }}>
      <svg width="900" height="900" style={{ position: 'absolute', opacity: 0.16, transform: `scale(${bgScale})` }}>
        {[160, 250, 340, 430].map((r, i) => (
          <circle key={i} cx="450" cy="450" r={r} fill="none" stroke={GOLD} strokeWidth="0.6"
            strokeDasharray={i % 2 ? '2 6' : '1 4'} />
        ))}
      </svg>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 26, position: 'relative' }}>
        <FadeUp delay={0.05} dur={0.8}>
          <img src="assets/lenavix-logo.png" alt="Lenavix" style={{
            width: 96, height: 96, objectFit: 'contain',
            filter: 'drop-shadow(0 0 30px rgba(183,146,104,0.25))',
          }}/>
        </FadeUp>
        <FadeUp delay={0.25}>
          <div style={{
            fontFamily: '"EB Garamond", Georgia, serif', fontSize: 22, color: IVORY,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            paddingLeft: '0.18em',
          }}>Lenavix</div>
        </FadeUp>
        <FadeUp delay={0.5} dur={0.9}>
          <div style={{
            fontFamily: '"EB Garamond", Georgia, serif',
            fontSize: 84, fontWeight: 400, lineHeight: 1.04,
            letterSpacing: '-0.02em', color: IVORY, textAlign: 'center', maxWidth: 1100,
          }}>The AI Regulatory<br/><span style={{ fontStyle: 'italic', color: GOLD }}>Operating System.</span></div>
        </FadeUp>
        <FadeUp delay={1.1} dur={0.7}>
          <div style={{ width: 320, height: 1, background: 'rgba(183,146,104,0.5)' }} />
        </FadeUp>
        <FadeUp delay={1.35}>
          <div style={{
            fontFamily: 'Merriweather, Georgia, serif', fontSize: 17, fontWeight: 400,
            color: IVORY_DIM, textAlign: 'center', maxWidth: 760, lineHeight: 1.55,
          }}>Vendor due diligence, audit trails, and jurisdictional coverage. All in one workspace.</div>
        </FadeUp>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Brand chip — small monogram for AI vendors
// ─────────────────────────────────────────────────────────────
function BrandChip({ vendor, size = 36 }) {
  // hand-drawn monograms for recognizable AI vendors
  const inner = (() => {
    switch (vendor.id) {
      case 'anthropic':
        // Anthropic asterisk-like glyph
        return (
          <svg viewBox="0 0 24 24" width={size * 0.55} height={size * 0.55}>
            <path d="M5 4 L11 4 L16 20 L10 20 Z" fill="#0E1A2B"/>
            <path d="M14 4 L19 4 L13.5 20 L8.5 20 Z" fill="#0E1A2B" opacity="0"/>
            <path d="M14 4 L19 20 L13 20 L8 4 Z" fill="#0E1A2B" opacity="0.85"/>
          </svg>
        );
      case 'openai':
        return (
          <svg viewBox="0 0 32 32" width={size * 0.6} height={size * 0.6}>
            <g fill="none" stroke="#0E1A2B" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M11 7 L21 7 L26 16 L21 25 L11 25 L6 16 Z"/>
              <path d="M11 7 L21 25"/>
              <path d="M21 7 L11 25"/>
              <path d="M6 16 L26 16"/>
            </g>
          </svg>
        );
      case 'google':
        return (
          <div style={{
            fontFamily: 'Merriweather, Georgia, serif', fontSize: size * 0.42, fontWeight: 700,
            color: '#0E1A2B',
          }}>G</div>
        );
      case 'meta':
        return (
          <svg viewBox="0 0 32 32" width={size * 0.62} height={size * 0.62}>
            <path d="M4 22 C 4 12, 10 6, 14 12 C 18 18, 24 24, 28 14"
              fill="none" stroke="#0E1A2B" strokeWidth="2.4" strokeLinecap="round"/>
          </svg>
        );
      case 'mistral':
        return (
          <svg viewBox="0 0 24 24" width={size * 0.58} height={size * 0.58}>
            <rect x="3" y="3" width="6" height="18" fill="#0E1A2B"/>
            <rect x="9" y="9" width="6" height="6" fill="#0E1A2B" opacity="0.55"/>
            <rect x="15" y="3" width="6" height="18" fill="#0E1A2B"/>
          </svg>
        );
      case 'cohere':
        return (
          <svg viewBox="0 0 24 24" width={size * 0.58} height={size * 0.58}>
            <circle cx="12" cy="12" r="9" fill="none" stroke="#0E1A2B" strokeWidth="2.2"/>
            <circle cx="17" cy="12" r="2" fill="#0E1A2B"/>
          </svg>
        );
      case 'hf':
        return (
          <div style={{ fontSize: size * 0.6 }}>🤗</div>
        );
      case 'perplexity':
        return (
          <svg viewBox="0 0 24 24" width={size * 0.58} height={size * 0.58}>
            <path d="M4 4 L20 4 L20 20 L4 20 Z M4 4 L20 20 M20 4 L4 20"
              fill="none" stroke="#0E1A2B" strokeWidth="1.8"/>
          </svg>
        );
      case 'hirevue':
        return (
          <div style={{
            fontFamily: 'Merriweather, Georgia, serif', fontSize: size * 0.36, fontWeight: 700,
            color: '#0E1A2B', letterSpacing: '-0.04em',
          }}>HV</div>
        );
      case 'gong':
        return (
          <svg viewBox="0 0 24 24" width={size * 0.58} height={size * 0.58}>
            <circle cx="12" cy="12" r="9" fill="none" stroke="#0E1A2B" strokeWidth="2"/>
            <circle cx="12" cy="12" r="3" fill="#0E1A2B"/>
          </svg>
        );
      case 'glean':
        return (
          <svg viewBox="0 0 24 24" width={size * 0.58} height={size * 0.58}>
            <path d="M12 3 L21 9 L21 15 L12 21 L3 15 L3 9 Z"
              fill="none" stroke="#0E1A2B" strokeWidth="2"/>
            <circle cx="12" cy="12" r="2.5" fill="#0E1A2B"/>
          </svg>
        );
      case 'harvey':
        return (
          <div style={{
            fontFamily: '"EB Garamond", Georgia, serif', fontSize: size * 0.5,
            color: '#0E1A2B', letterSpacing: '-0.02em',
          }}>H</div>
        );
      case 'vanta':
        return (
          <div style={{
            fontFamily: 'Merriweather, Georgia, serif', fontSize: size * 0.5, fontWeight: 700,
            color: '#0E1A2B', letterSpacing: '-0.04em',
          }}>V</div>
        );
      case 'drata':
        return (
          <div style={{
            fontFamily: 'Merriweather, Georgia, serif', fontSize: size * 0.5, fontWeight: 700,
            color: '#0E1A2B', letterSpacing: '-0.04em',
          }}>D</div>
        );
      case 'gdrive':
        return (
          <svg viewBox="0 0 24 24" width={size * 0.6} height={size * 0.6}>
            <path d="M9 3 L15 3 L21 14 L18 19 L6 19 L3 14 Z M9 3 L3 14 M15 3 L21 14 M6 19 L12 8 L18 19"
              fill="none" stroke="#0E1A2B" strokeWidth="1.6" strokeLinejoin="round"/>
          </svg>
        );
      case 'spo':
        return (
          <svg viewBox="0 0 24 24" width={size * 0.58} height={size * 0.58}>
            <rect x="3" y="3" width="8" height="8" fill="#0E1A2B"/>
            <rect x="13" y="3" width="8" height="8" fill="#0E1A2B" opacity="0.55"/>
            <rect x="3" y="13" width="8" height="8" fill="#0E1A2B" opacity="0.55"/>
            <rect x="13" y="13" width="8" height="8" fill="#0E1A2B"/>
          </svg>
        );
      case 'dbx':
        return (
          <svg viewBox="0 0 24 24" width={size * 0.62} height={size * 0.62}>
            <path d="M6 4 L12 8 L6 12 L0 8 Z M18 4 L24 8 L18 12 L12 8 Z M6 12 L12 16 L6 20 L0 16 Z M18 12 L24 16 L18 20 L12 16 Z"
              fill="#0E1A2B" transform="translate(0,0)"/>
          </svg>
        );
      case 'iman':
        return (
          <div style={{
            fontFamily: '"EB Garamond", Georgia, serif', fontSize: size * 0.55,
            color: '#0E1A2B', letterSpacing: '-0.02em', fontStyle: 'italic',
          }}>i</div>
        );
      case 'pub':
        return (
          <svg viewBox="0 0 24 24" width={size * 0.62} height={size * 0.62}>
            <circle cx="12" cy="12" r="9" fill="none" stroke="#0E1A2B" strokeWidth="1.6"/>
            <ellipse cx="12" cy="12" rx="4.5" ry="9" fill="none" stroke="#0E1A2B" strokeWidth="1.2"/>
            <line x1="3" y1="12" x2="21" y2="12" stroke="#0E1A2B" strokeWidth="1.2"/>
          </svg>
        );
      default:
        return (
          <div style={{ fontFamily: 'Merriweather, Georgia, serif', fontSize: size * 0.4, fontWeight: 600, color: '#0E1A2B' }}>
            {vendor.label?.[0] || '·'}
          </div>
        );
    }
  })();
  return (
    <div style={{
      width: size, height: size,
      background: vendor.bg || GOLD,
      borderRadius: 6,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flex: '0 0 auto',
    }}>{inner}</div>
  );
}

const VENDORS = [
  { id: 'anthropic',  label: 'Anthropic',     bg: '#E8DCC7' },
  { id: 'openai',     label: 'OpenAI',        bg: '#F5F1E8' },
  { id: 'google',     label: 'Google',        bg: '#E8DCC7' },
  { id: 'meta',       label: 'Meta · Llama',  bg: '#F5F1E8' },
  { id: 'mistral',    label: 'Mistral',       bg: '#F3D9D6' },
  { id: 'cohere',     label: 'Cohere',        bg: '#E8DCC7' },
  { id: 'hf',         label: 'Hugging Face',  bg: '#F5F1E8' },
  { id: 'perplexity', label: 'Perplexity',    bg: '#D9E4EC' },
  { id: 'hirevue',    label: 'HireVue',       bg: '#F4D9D6' },
  { id: 'gong',       label: 'Gong',          bg: '#F5F1E8' },
  { id: 'glean',      label: 'Glean',         bg: '#E8DCC7' },
  { id: 'harvey',     label: 'Harvey AI',     bg: '#F3D9D6' },
];

// ─────────────────────────────────────────────────────────────
// Scene 2 · Vendor Cascade with real brand chips
// ─────────────────────────────────────────────────────────────
window.Scene2VendorCascade = function Scene2VendorCascade() {
  const { localTime } = useSprite();
  const counter = Math.floor(Easing.easeOutCubic(clamp(localTime / 2.0, 0, 1)) * 47);

  return (
    <div style={{
      position: 'absolute', inset: 0, background: INK,
      display: 'grid', gridTemplateColumns: '1fr 1fr',
    }}>
      {/* LEFT: copy */}
      <div style={{ padding: '90px 0 90px 110px', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 24 }}>
        <Eyebrow delay={0}>The state of play</Eyebrow>
        <FadeUp delay={0.2} dur={0.8} y={18}>
          <div style={{
            fontFamily: '"EB Garamond", Georgia, serif', fontSize: 60,
            color: IVORY, letterSpacing: '-0.02em', lineHeight: 1.04,
          }}>
            Your portfolio just<br/>
            shipped <span style={{ fontStyle: 'italic', color: GOLD }}>{counter}</span> new<br/>
            AI vendors.
          </div>
        </FadeUp>
        <FadeUp delay={2.2} dur={0.6}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '14px 18px', border: `1px solid ${WINE}`,
            background: 'rgba(220, 38, 38,0.10)', maxWidth: 460,
          }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              color: WINE, letterSpacing: '0.16em',
            }}>0 REVIEWED</div>
            <div style={{ width: 1, height: 16, background: HAIRLINE }} />
            <div style={{
              fontFamily: 'Merriweather, Georgia, serif', fontSize: 13, color: IVORY_DIM,
            }}>Counsel can't keep up.</div>
          </div>
        </FadeUp>
      </div>

      {/* RIGHT: vendor brand cards */}
      <div style={{
        padding: '70px 100px 70px 30px',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, width: '100%',
        }}>
          {VENDORS.map((v, i) => {
            const d = 0.5 + i * 0.11;
            const t = Easing.easeOutQuart(clamp((localTime - d) / 0.5, 0, 1));
            const flagDelay = 2.6 + i * 0.08;
            const flagged = localTime > flagDelay;
            return (
              <div key={v.id} style={{
                opacity: t, transform: `translateY(${(1 - t) * 12}px)`,
                padding: '14px 14px',
                border: `1px solid ${flagged ? WINE : HAIRLINE}`,
                background: flagged ? 'rgba(220, 38, 38,0.10)' : 'rgba(255,255,255,0.02)',
                display: 'flex', alignItems: 'center', gap: 12,
                transition: 'border-color 0.4s, background 0.4s',
              }}>
                <BrandChip vendor={v} size={32} />
                <div style={{ display: 'flex', flexDirection: 'column', gap: 2, flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: 'Merriweather, Georgia, serif', fontSize: 12, fontWeight: 500,
                    color: IVORY, lineHeight: 1.2,
                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                  }}>{v.label}</div>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
                    color: flagged ? WINE : IVORY_DIMMER,
                    letterSpacing: '0.14em', textTransform: 'uppercase',
                  }}>{flagged ? 'unreviewed' : 'pending'}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Scene 3 · Document Ingestion → Knowledge Vault
// Documents fly in from the left and land in a vault grid on the right
// ─────────────────────────────────────────────────────────────
function DocIcon({ kind, color = GOLD }) {
  // a generic legal/document SVG with a small kicker label
  return (
    <svg viewBox="0 0 32 40" width="22" height="28" style={{ flex: '0 0 auto' }}>
      <path d="M4 2 L22 2 L28 8 L28 38 L4 38 Z" fill="rgba(245,241,232,0.06)" stroke={color} strokeWidth="1.2"/>
      <path d="M22 2 L22 8 L28 8" fill="none" stroke={color} strokeWidth="1.2"/>
      <line x1="8"  y1="14" x2="24" y2="14" stroke={color} strokeWidth="0.8" opacity="0.55"/>
      <line x1="8"  y1="18" x2="24" y2="18" stroke={color} strokeWidth="0.8" opacity="0.55"/>
      <line x1="8"  y1="22" x2="20" y2="22" stroke={color} strokeWidth="0.8" opacity="0.55"/>
      <line x1="8"  y1="26" x2="24" y2="26" stroke={color} strokeWidth="0.8" opacity="0.4"/>
      <line x1="8"  y1="30" x2="18" y2="30" stroke={color} strokeWidth="0.8" opacity="0.4"/>
    </svg>
  );
}

const DOCS = [
  // Trust centers
  { name: 'SOC 2 Type II',                           kicker: 'via Vanta',        cat: 'security' },
  { name: 'ISO 27001 certificate',                   kicker: 'via Drata',        cat: 'security' },
  { name: 'ISO 42001 statement',                     kicker: 'via Vanta',        cat: 'ai' },
  { name: 'DPA · standard form',                     kicker: 'via Drata',        cat: 'privacy' },
  { name: 'Sub-processor list',                      kicker: 'via Vanta',        cat: 'privacy' },
  // Public sources
  { name: 'Claude · model card',                     kicker: 'Hugging Face',     cat: 'model' },
  { name: 'GPT-5 · system card',                     kicker: 'Vendor site',      cat: 'model' },
  { name: 'AEDT bias audit',                         kicker: 'NYC LL 144 reg.',  cat: 'audit' },
  { name: 'AI/ML 510(k) summary',                    kicker: 'FDA database',     cat: 'regulatory' },
  { name: 'EU AI Act · Art. 9',                      kicker: 'EUR-Lex',          cat: 'statute' },
  { name: 'NIST AI RMF 1.0',                         kicker: 'NIST',             cat: 'framework' },
  // Cloud & DMS
  { name: 'MSA · enterprise',                        kicker: 'iManage',          cat: 'contract' },
  { name: 'BAA · healthcare deployment',             kicker: 'SharePoint',       cat: 'contract' },
  { name: 'Policy · Acceptable Use',                 kicker: 'Google Drive',     cat: 'policy' },
  { name: 'Repo README · model weights',             kicker: 'GitHub',           cat: 'model' },
];

window.Scene3DocIngestion = function Scene3DocIngestion() {
  const { localTime } = useSprite();

  // Each doc flies in on a stagger
  const STAGGER = 0.20;
  const FLY_DUR = 0.9;
  const HOLD = 0.6;

  return (
    <div style={{
      position: 'absolute', inset: 0, background: INK,
      padding: '60px 80px', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
        <div>
          <Eyebrow delay={0}>Document Intake</Eyebrow>
          <FadeUp delay={0.2} style={{ marginTop: 12 }}>
            <div style={{
              fontFamily: '"EB Garamond", Georgia, serif', fontSize: 40,
              color: IVORY, letterSpacing: '-0.02em', lineHeight: 1.08, maxWidth: 820,
            }}>Wherever the vendor's stuff lives. <span style={{ fontStyle: 'italic', color: GOLD }}>Into the Knowledge Vault.</span></div>
          </FadeUp>
        </div>
        <FadeUp delay={0.4}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
            color: IVORY_DIMMER, letterSpacing: '0.16em', textTransform: 'uppercase',
          }}>Data room · live</div>
        </FadeUp>
      </div>

      {/* Main canvas: source on the left, vault grid on the right */}
      <div style={{
        flex: '1 1 auto', marginTop: 24, display: 'grid',
        gridTemplateColumns: '300px 1fr', gap: 32, position: 'relative',
        minHeight: 0,
      }}>
        {/* LEFT: source pile */}
        <FadeUp delay={0.5} dur={0.6}>
          <div style={{
            border: `1px dashed ${HAIRLINE}`,
            padding: '18px 16px',
            display: 'flex', flexDirection: 'column', gap: 12,
            height: '100%', position: 'relative',
          }}>
            <div style={{
              fontFamily: 'Merriweather, Georgia, serif', fontSize: 11, fontWeight: 500,
              letterSpacing: '0.16em', textTransform: 'uppercase', color: IVORY_DIMMER,
            }}>Sources</div>
            {[
              { heading: 'Trust Centers', items: [
                { id: 'vanta',  name: 'Vanta',         sub: 'Trust Center' },
                { id: 'drata',  name: 'Drata',         sub: 'Trust Center' },
              ]},
              { heading: 'Cloud & DMS', items: [
                { id: 'gdrive', name: 'Google Drive',  sub: 'Folder watch' },
                { id: 'spo',    name: 'SharePoint',    sub: 'Site library' },
                { id: 'dbx',    name: 'Dropbox',       sub: 'Team folder' },
                { id: 'iman',   name: 'iManage',       sub: 'Workspace sync' },
              ]},
              { heading: 'Public Sources', items: [
                { id: 'pub',    name: 'Public connectors',
                  sub: 'GitHub · HF · FDA · NYC LL 144' },
              ]},
              { heading: 'Regulatory Feeds · live', inline: [
                'EUR-Lex', 'NIST', 'State legislatures',
                'NAIC', 'FDA AI/ML', 'PACER',
              ]},
            ].map((group, gi) => (
              <div key={gi} style={{
                paddingTop: gi === 0 ? 0 : 8,
                borderTop: gi === 0 ? 'none' : `1px solid ${HAIRLINE}`,
                display: 'flex', flexDirection: 'column', gap: 6,
              }}>
                <div style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
                  color: GOLD, letterSpacing: '0.18em', textTransform: 'uppercase',
                }}>{group.heading}</div>
                {group.items && group.items.map((item) => (
                  <div key={item.id} style={{
                    display: 'flex', alignItems: 'center', gap: 10,
                  }}>
                    <BrandChip vendor={{ id: item.id, label: item.name, bg: '#E8DCC7' }} size={20} />
                    <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
                      <div style={{
                        fontFamily: 'Merriweather, Georgia, serif', fontSize: 12, fontWeight: 500,
                        color: IVORY, lineHeight: 1.2,
                        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                      }}>{item.name}</div>
                      <div style={{
                        fontFamily: 'Merriweather, Georgia, serif', fontSize: 10,
                        color: IVORY_DIMMER, lineHeight: 1.3,
                        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                      }}>{item.sub}</div>
                    </div>
                  </div>
                ))}
                {group.inline && (
                  <div style={{
                    fontFamily: 'Merriweather, Georgia, serif', fontSize: 11,
                    color: IVORY_DIM, lineHeight: 1.5,
                  }}>{group.inline.join(' · ')}</div>
                )}
              </div>
            ))}
            <div style={{ flex: 1 }} />
            {/* Pulsing dot showing "ingesting" */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{
                width: 7, height: 7, borderRadius: '50%', background: WINE,
                opacity: 0.4 + Math.abs(Math.sin(localTime * 3)) * 0.6,
              }} />
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                color: WINE, letterSpacing: '0.14em', textTransform: 'uppercase',
              }}>parsing · {Math.min(Math.floor(localTime * 2.4), 15)} / 15</div>
            </div>

            {/* Extracted counters — appear after parsing completes */}
            <div style={{
              marginTop: 10, paddingTop: 12, borderTop: `1px solid ${HAIRLINE}`,
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                color: GOLD, letterSpacing: '0.16em', textTransform: 'uppercase',
              }}>Extracted</div>
              {[
                { k: 'Vendor docs',   v: '1,284' },
                { k: 'Statutes',      v: '412'   },
                { k: 'Model cards',   v: '96'    },
                { k: 'Court filings', v: '38'    },
              ].map((r, i) => {
                const d = 5.0 + i * 0.18;
                const t = Easing.easeOutCubic(clamp((localTime - d) / 0.4, 0, 1));
                return (
                  <div key={i} style={{
                    opacity: t,
                    display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
                  }}>
                    <div style={{
                      fontFamily: 'Merriweather, Georgia, serif', fontSize: 11, color: IVORY_DIMMER,
                      textTransform: 'uppercase', letterSpacing: '0.12em',
                    }}>{r.k}</div>
                    <div style={{
                      fontFamily: '"EB Garamond", Georgia, serif', fontSize: 20, color: IVORY,
                    }}>{r.v}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </FadeUp>

        {/* RIGHT: vault grid (3 cols × 6 rows) */}
        <div style={{ position: 'relative' }}>
          {/* vault frame */}
          <FadeUp delay={0.4} dur={0.6} style={{
            position: 'absolute', inset: 0,
            border: `1px solid ${HAIRLINE}`,
            background: 'rgba(255,255,255,0.012)',
            padding: '14px 18px',
            display: 'flex', flexDirection: 'column',
          }}>
            {/* vault header strip */}
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              paddingBottom: 10, borderBottom: `1px solid ${HAIRLINE}`,
            }}>
              <div style={{
                fontFamily: 'Merriweather, Georgia, serif', fontSize: 11, fontWeight: 500,
                letterSpacing: '0.16em', textTransform: 'uppercase', color: GOLD,
              }}>Knowledge Vault · 2,847 docs</div>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
                color: IVORY_DIMMER, letterSpacing: '0.14em', textTransform: 'uppercase',
              }}>encrypted · privileged</div>
            </div>

            {/* doc grid */}
            <div style={{
              flex: 1, marginTop: 14,
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
              alignContent: 'start',
            }}>
              {DOCS.map((doc, i) => {
                const start = 0.9 + i * STAGGER;
                const t = Easing.easeOutCubic(clamp((localTime - start) / FLY_DUR, 0, 1));
                // fly in from left: translateX from -300 → 0, fade in
                const tx = (1 - t) * -200;
                const opacity = t;
                // mark "indexed" once landed + small dwell
                const indexed = localTime > start + FLY_DUR + HOLD * 0.3;
                const indexT = clamp((localTime - (start + FLY_DUR + 0.1)) / 0.3, 0, 1);

                return (
                  <div key={i} style={{
                    opacity, transform: `translateX(${tx}px)`,
                    padding: '10px 12px',
                    border: `1px solid ${indexed ? GOLD : HAIRLINE}`,
                    background: indexed ? 'rgba(183,146,104,0.06)' : 'rgba(255,255,255,0.02)',
                    display: 'flex', alignItems: 'center', gap: 10,
                    minHeight: 52,
                    transition: 'border-color 0.3s, background 0.3s',
                  }}>
                    <DocIcon color={indexed ? GOLD : 'rgba(245,241,232,0.45)'} />
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 2, flex: 1, minWidth: 0 }}>
                      <div style={{
                        fontFamily: 'Merriweather, Georgia, serif', fontSize: 11, fontWeight: 500,
                        color: IVORY, lineHeight: 1.25,
                        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                      }}>{doc.name}</div>
                      <div style={{
                        fontFamily: 'JetBrains Mono, monospace', fontSize: 8,
                        color: indexed ? GOLD : IVORY_DIMMER,
                        letterSpacing: '0.14em', textTransform: 'uppercase',
                      }}>{indexed ? 'indexed' : doc.kicker}</div>
                    </div>
                    {/* tiny check mark when indexed */}
                    {indexed && (
                      <svg width="11" height="11" viewBox="0 0 11 11" style={{ opacity: indexT, flex: '0 0 auto' }}>
                        <path d="M2 6 L4.5 8.5 L9 3" fill="none" stroke={GOLD} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    )}
                  </div>
                );
              })}
            </div>
          </FadeUp>
        </div>
      </div>

    </div>
  );
};