// Marquee + trusted strip

function Marquee() {
  const items = ['AES-256-GCM', 'Argon2id', 'zero-knowledge', 'local-first', 'open-source crypto', 'notarized', '18 MB binary', 'no telemetry', 'macOS native', 'Swift + Rust'];
  const doubled = [...items, ...items, ...items];
  return (
    <section style={{
      padding:'48px 0', borderTop:`1px solid ${BONE_FAINT}`, borderBottom:`1px solid ${BONE_FAINT}`,
      overflow:'hidden', position:'relative',
      maskImage:'linear-gradient(90deg, transparent, black 10%, black 90%, transparent)',
      WebkitMaskImage:'linear-gradient(90deg, transparent, black 10%, black 90%, transparent)',
    }}>
      <div style={{
        display:'flex', gap:0, whiteSpace:'nowrap',
        animation:'marquee 40s linear infinite',
      }}>
        {doubled.map((t,i)=>(
          <span key={i} style={{
            display:'inline-flex', alignItems:'center', gap:24,
            fontSize:28, fontFamily:"'Instrument Serif', serif", fontStyle:'italic',
            color:'rgba(15,14,20,.5)', padding:'0 24px',
          }}>
            {t}
            <span style={{ width:6, height:6, borderRadius:'50%', background: ACCENT, opacity:.5 }}/>
          </span>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Marquee });