https://cyberseq.io/assets/CryptoJourney-k0oxggvd.js

1import{r as d,j as e}from"./index-ByC25D-T.js";const i={alice:"#a676ff",bob:"#5ee6cb",classical:"#e0556e",symmetric:"#e0a93d",hybrid:"#6691ff",pqc:"#4ad6b4",bg:"#070814",bgSoft:"#0d0f1f",ink:"#e8e8f0",inkSoft:"#a8a8c0",inkMuted:"#6a6a85",border:"rgba(166,118,255,0.18)"},f={classical:{label:"Classical",desc:"Quantum-vulnerable",color:i.classical},symmetric:{label:"Symmetric",desc:"Lower immediate risk",color:i.symmetric},hybrid:{label:"Hybrid",desc:"Transitional / migrating",color:i.hybrid},pqc:{label:"Post-Quantum",desc:"Quantum-safe",color:i.pqc}},g=14e3,p=[{id:"alice-phone",icon:"phone",side:"alice",label:"Alice's phone",where:"Her hand",crypto:"Signal · iMessage · WhatsApp",detail:"The app generates a message and prepares to encrypt it before it leaves the device. Identity keys are checked.",risk:"hybrid",endpoint:!0},{id:"app",icon:"lock",side:"alice",label:"App E2EE",where:"Inside the messaging app",crypto:"X3DH → PQXDH · Double Ratchet · AES-256-GCM",detail:"The app wraps the message in end-to-end encryption. Only Alice and Bob hold the keys. Not Apple, not Meta, not the carrier.",risk:"hybrid"},{id:"device",icon:"chip",side:"alice",label:"Device & OS",where:"Phone hardware",crypto:"Secure Enclave · Android Keystore · AES-XTS",detail:"Keys live inside a hardware security chip (Apple Secure Enclave or TEE). The OS encrypts local storage so nothing leaks if the phone is lost.",risk:"classical"},{id:"sim",icon:"sim",side:"alice",label:"SIM / eSIM",where:"The chip in the phone",crypto:"USIM Secret (Ki) · Milenage · eSIM RSP",detail:"The SIM proves to the network that this phone is really Alice's. A 128-bit secret on the chip authenticates her to the carrier.",risk:"symmetric"},{id:"radio-a",icon:"tower",side:"alice",label:"5G Radio",where:"Cell tower nearby",crypto:"5G-AKA · SUCI · PDCP · NAS / RRC",detail:"Over the air, the carrier encrypts traffic between phone and tower. The 5G-AKA handshake uses elliptic-curve crypto. Quantum-breakable.",risk:"classical"},{id:"transport",icon:"globe",side:"shared",label:"Internet Transport",where:"Backbone fibres",crypto:"TLS 1.3 · QUIC · DTLS · X.509",detail:"Between the carrier and the messaging server, traffic is wrapped in TLS. Today's TLS key exchange is ECDHE. Quantum-breakable without hybrid PQC.",risk:"hybrid"},{id:"cloud",icon:"cloud",side:"shared",label:"Cloud Relay",where:"Signal / Meta / Apple",crypto:"mTLS · KMS / HSM · ML-DSA signing",detail:"The encrypted message sits in a queue until Bob's phone fetches it. Service-to-service auth uses X.509 certificates. These need post-quantum signatures.",risk:"classical"},{id:"radio-b",icon:"tower",side:"bob",label:"5G Radio",where:"Cell tower near Bob",crypto:"5G-AKA · NAS · RRC · PDCP",detail:"Mirror of Alice's side. The carrier encrypts the leg between Bob's tower and his phone.",risk:"classical"},{id:"sim-b",icon:"sim",side:"bob",label:"SIM / eSIM",where:"Bob's chip",crypto:"USIM Secret · AKA · eSIM profile",detail:"Bob's SIM authenticates him to his carrier so the message can be delivered.",risk:"symmetric"},{id:"device-b",icon:"chip",side:"bob",label:"Device & OS",where:"Bob's phone hardware",crypto:"Secure Enclave · Keystore · AES-XTS",detail:"Bob's OS receives the ciphertext and routes it to the messaging app. His private keys never leave the secure chip.",risk:"classical"},{id:"app-b",icon:"lock",side:"bob",label:"App Decrypts",where:"Inside Bob's app",crypto:"Ratchet advance · AEAD verify · HMAC",detail:"Bob's app derives the message key from the ratchet, verifies the authentication tag, and decrypts the payload.",risk:"pqc"},{id:"bob-phone",icon:"phone",side:"bob",label:"Bob's phone",where:"His hand",crypto:"Plaintext revealed only here",detail:"Bob reads the message. This is the only place anywhere along the path where the plaintext exists.",risk:"pqc",endpoint:!0}];function v({type:r,color:t,size:o=36,glow:a=!1}){const s={width:o,height:o,viewBox:"0 0 40 40",fill:"none",stroke:t,strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round",style:a?{filter:`drop-shadow(0 0 6px ${t})`}:void 0};switch(r){case"phone":return e.jsxs("svg",{...s,children:[e.jsx("rect",{x:"11",y:"3",width:"18",height:"34",rx:"3"}),e.jsx("rect",{x:"13",y:"7",width:"14",height:"25",rx:"1",fill:t,fillOpacity:"0.1"}),e.jsx("line",{x1:"18",y1:"34",x2:"22",y2:"34"}),e.jsx("rect",{x:"15",y:"11",width:"9",height:"4",rx:"1",fill:t,fillOpacity:"0.3"}),e.jsx("rect",{x:"17",y:"17",width:"9",height:"4",rx:"1",fill:t,fillOpacity:"0.3"})]});case"lock":return e.jsxs("svg",{...s,children:[e.jsx("rect",{x:"9",y:"18",width:"22",height:"16",rx:"2"}),e.jsx("path",{d:"M14 18 V13 a6 6 0 0 1 12 0 V18"}),e.jsx("circle",{cx:"20",cy:"25",r:"1.8",fill:t}),e.jsx("line",{x1:"20",y1:"26.8",x2:"20",y2:"30"})]});case"chip":return e.jsxs("svg",{...s,children:[e.jsx("rect",{x:"10",y:"10",width:"20",height:"20",rx:"2"}),e.jsx("rect",{x:"14",y:"14",width:"12",height:"12",rx:"1",fill:t,fillOpacity:"0.1"}),e.jsx("line",{x1:"14",y1:"7",x2:"14",y2:"10"}),e.jsx("line",{x1:"20",y1:"7",x2:"20",y2:"10"}),e.jsx("line",{x1:"26",y1:"7",x2:"26",y2:"10"}),e.jsx("line",{x1:"14",y1:"30",x2:"14",y2:"33"}),e.jsx("line",{x1:"20",y1:"30",x2:"20",y2:"33"}),e.jsx("line",{x1:"26",y1:"30",x2:"26",y2:"33"}),e.jsx("line",{x1:"7",y1:"14",x2:"10",y2:"14"}),e.jsx("line",{x1:"7",y1:"20",x2:"10",y2:"20"}),e.jsx("line",{x1:"7",y1:"26",x2:"10",y2:"26"}),e.jsx("line",{x1:"30",y1:"14",x2:"33",y2:"14"}),e.jsx("line",{x1:"30",y1:"20",x2:"33",y2:"20"}),e.jsx("line",{x1:"30",y1:"26",x2:"33",y2:"26"})]});case"sim":return e.jsxs("svg",{...s,children:[e.jsx("path",{d:"M9 8 L2

16 8 L31 13 L31 33 L9 33 Z",fill:t,fillOpacity:"0.06"}),e.jsx("rect",{x:"13",y:"16",width:"14",height:"12",rx:"1",fill:t,fillOpacity:"0.15"}),e.jsx("line",{x1:"13",y1:"20",x2:"27",y2:"20"}),e.jsx("line",{x1:"13",y1:"24",x2:"27",y2:"24"}),e.jsx("line",{x1:"17.66",y1:"16",x2:"17.66",y2:"28"}),e.jsx("line",{x1:"22.33",y1:"16",x2:"22.33",y2:"28"})]});case"tower":return e.jsxs("svg",{...s,children:[e.jsx("path",{d:"M18 37 L20 9 L22 37"}),e.jsx("line",{x1:"17",y1:"20",x2:"23",y2:"20"}),e.jsx("line",{x1:"16",y1:"28",x2:"24",y2:"28"}),e.jsx("circle",{cx:"20",cy:"9",r:"1.5",fill:t}),e.jsx("path",{d:"M11 9 Q8 13 11 17",opacity:"0.7"}),e.jsx("path",{d:"M7 6 Q3 13 7 20",opacity:"0.4"}),e.jsx("path",{d:"M29 9 Q32 13 29 17",opacity:"0.7"}),e.jsx("path",{d:"M33 6 Q37 13 33 20",opacity:"0.4"})]});case"globe":return e.jsxs("svg",{...s,children:[e.jsx("circle",{cx:"20",cy:"20",r:"13"}),e.jsx("ellipse",{cx:"20",cy:"20",rx:"5",ry:"13"}),e.jsx("line",{x1:"7",y1:"20",x2:"33",y2:"20"}),e.jsx("path",{d:"M9 13 Q20 16 31 13"}),e.jsx("path",{d:"M9 27 Q20 24 31 27"})]});case"cloud":return e.jsxs("svg",{...s,children:[e.jsx("path",{d:"M11 27 Q5 27 5 22 Q5 17 11 17 Q12 11 19 11 Q26 11 28 16 Q35 16 35 22 Q35 28 29 28 L11 28 Z",fill:t,fillOpacity:"0.08"}),e.jsx("line",{x1:"13",y1:"22",x2:"27",y2:"22"}),e.jsx("line",{x1:"13",y1:"24.5",x2:"27",y2:"24.5"}),e.jsx("circle",{cx:"15",cy:"22",r:"0.6",fill:t}),e.jsx("circle",{cx:"15",cy:"24.5",r:"0.6",fill:t})]})}}function R(){const r=d.useMemo(()=>{const t=[];for(let o=0;o<80;o++)t.push({x:o*73%100,y:o*137%100,size:1+o%3,delay:o%8*.4,color:o%3===0?i.alice:o%3===1?i.bob:"#ffffff"});return t},[]);return e.jsxs("div",{className:"absolute inset-0 pointer-events-none overflow-hidden",style:{opacity:.4},"aria-hidden":!0,children:[r.map((t,o)=>e.jsx("span",{style:{position:"absolute",left:`${t.x}%`,top:`${t.y}%`,width:t.size,height:t.size,borderRadius:99,background:t.color,boxShadow:`0 0 ${t.size*3}px ${t.color}`,animation:"csqTwinkle 4s ease-in-out infinite",animationDelay:`${t.delay}s`,opacity:.5}},o)),e.jsx("style",{children:"@keyframes csqTwinkle {0%,100%{opacity:0.2}50%{opacity:0.9}}"})]})}function C({hop:r,active:t,passed:o,onHover:a,onLeave:s,onActivate:h}){const l=f[r.risk];return e.jsxs("button",{type:"button",onMouseEnter:a,onMouseLeave:s,onFocus:a,onBlur:s,onClick:h,"aria-label":`${r.label}. ${r.where}. Cryptography: ${r.crypto}. Quantum risk: ${l.label}, ${l.desc}. Click for details.`,className:"relative flex flex-col items-center cursor-pointer bg-transparent border-0 p-0 outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-black rounded-lg",style:{paddingTop:8,transform:t?"translateY(-6px)":"translateY(0)",transition:"transform 200ms ease","--tw-ring-color":l.color},"data-testid":`hop-${r.id}`,children:[e.jsxs("div",{style:{width:64,height:64,borderRadius:12,background:t?`radial-gradient(circle, ${l.color}33, ${i.bgSoft})`:o?`${l.color}14`:i.bgSoft,border:`1.5px solid ${t?l.color:o?`${l.color}66`:i.border}`,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:t?`0 0 24px ${l.color}66, 0 8px 16px rgba(0,0,0,0.4)`:"0 4px 8px rgba(0,0,0,0.3)",transition:"all 250ms ease",position:"relative",zIndex:2},children:[e.jsx(v,{type:r.icon,color:t||o?l.color:i.inkSoft,size:36,glow:t}),e.jsx("div",{style:{position:"absolute",top:-4,right:-4,width:12,height:12,borderRadius:99,background:l.color,boxShadow:`0 0 8px ${l.color}`,border:`2px solid ${i.bg}`}}),r.endpoint&&e.jsx("div",{style:{position:"absolute",bottom:-6,left:"50%",transform:"translateX(-50%)",fontSize:8,fontFamily:"monospace",letterSpacing:"0.2em",padding:"2px 6px",borderRadius:99,background:r.side==="alice"?i.alice:i.bob,color:i.bg,fontWeight:700},children:r.side==="alice"?"ALICE":"BOB"})]}),e.jsx("div",{style:{marginTop:r.endpoint?18:10,fontFamily:"monospace",fontSize:10,fontWeight:700,letterSpacing:"0.08em",color:t?l.color:i.ink,textAlign:"center",lineHeight:1.2,wordBreak:"break-word",hyphens:"auto"},children:r.label.toUpperCase()}),e.jsx("div",{style:{marginTop:3,fontFamily:"monospace",fontSize:9,color:i.inkMuted,textAlign:"center",lineHeight:1.2,minHeight:22,padding:"0 2px"},children:r.where})]})}function E({progress:r,lockCount:t,activeIdx:o,total:a}){const s=4+r*92;return e.jsxs("div",{style:{position:"absolute",top:90,left:`${s}%`,transform:"translate(-50%, 0)",zIndex:10,transition:"left 100ms linear",pointerEvents:"none"}

1,"aria-hidden":!0,children:[e.jsx("div",{style:{position:"absolute",left:"50%",top:-38,width:1,height:36,background:`linear-gradient(180deg, transparent, ${i.bob})`}}),e.jsxs("div",{style:{background:i.bgSoft,border:`1.5px solid ${i.bob}`,borderRadius:12,padding:"8px 14px",fontSize:13,color:i.ink,whiteSpace:"nowrap",boxShadow:`0 0 20px ${i.bob}55, 0 4px 12px rgba(0,0,0,0.5)`,position:"relative"},children:[e.jsx("div",{style:{position:"absolute",top:-8,left:"50%",transform:"translateX(-50%) rotate(45deg)",width:10,height:10,background:i.bgSoft,borderTop:`1.5px solid ${i.bob}`,borderLeft:`1.5px solid ${i.bob}`}}),e.jsx("span",{style:{fontFamily:"system-ui, sans-serif"},children:o<a-1?'"Hey Bob, meet at 3?"':"Read · 9:42"})]}),e.jsx("div",{style:{display:"flex",justifyContent:"center",gap:2,marginTop:4},children:Array.from({length:t}).map((h,l)=>e.jsx("div",{style:{width:14,height:14,borderRadius:3,background:`${i.bob}33`,border:`1px solid ${i.bob}`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:8,color:i.bob},children:"🔒"},l))})]})}function T({hop:r,idx:t,total:o,lockCount:a}){const s=f[r.risk];return e.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-4",style:{background:`${i.bg}99`,border:`1px solid ${s.color}44`,borderLeft:`3px solid ${s.color}`,borderRadius:6,padding:"12px 18px"},"aria-live":"polite",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("div",{style:{fontFamily:"monospace",fontSize:10,letterSpacing:"0.2em",background:`${s.color}22`,padding:"3px 8px",borderRadius:3,color:s.color},children:["STEP ",(t+1).toString().padStart(2,"0")," / ",o]}),e.jsxs("div",{children:[e.jsxs("div",{style:{fontSize:14,fontWeight:600,color:i.ink,lineHeight:1.3},children:[r.label," ",e.jsxs("span",{style:{color:i.inkMuted,fontWeight:400},children:["· ",r.where]})]}),e.jsx("div",{style:{fontFamily:"monospace",fontSize:11,color:s.color,marginTop:2,letterSpacing:"0.04em"},children:r.crypto})]})]}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsxs("div",{style:{fontFamily:"monospace",fontSize:10,letterSpacing:"0.2em",color:i.inkMuted},children:["LOCKS WRAPPED · ",a]}),e.jsx("div",{style:{fontFamily:"monospace",fontSize:11,color:s.color,background:`${s.color}1a`,border:`1px solid ${s.color}55`,padding:"3px 10px",borderRadius:99,letterSpacing:"0.08em",fontWeight:600},children:s.label.toUpperCase()})]})]})}function z({hop:r,onClose:t,sticky:o}){const a=f[r.risk];return e.jsxs("div",{role:"dialog","aria-label":`Details for ${r.label}`,className:"fixed z-50",style:{bottom:24,right:24,maxWidth:360,background:`${i.bg}f0`,border:`1px solid ${a.color}66`,borderLeft:`4px solid ${a.color}`,borderRadius:8,padding:18,backdropFilter:"blur(12px)",boxShadow:`0 16px 48px rgba(0,0,0,0.6), 0 0 32px ${a.color}22`},children:[e.jsxs("div",{className:"flex items-start gap-3 mb-3",children:[e.jsx("div",{style:{width:44,height:44,borderRadius:8,background:`${a.color}22`,border:`1px solid ${a.color}55`,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:e.jsx(v,{type:r.icon,color:a.color,size:28})}),e.jsxs("div",{style:{flex:1},children:[e.jsx("div",{style:{fontSize:14,fontWeight:600,color:i.ink},children:r.label}),e.jsx("div",{style:{fontSize:11,color:i.inkMuted,fontFamily:"monospace",marginTop:2},children:r.where})]}),e.jsx("div",{style:{fontFamily:"monospace",fontSize:9,letterSpacing:"0.15em",color:a.color,background:`${a.color}1a`,border:`1px solid ${a.color}55`,padding:"3px 7px",borderRadius:3,fontWeight:700},children:a.label.toUpperCase()}),o&&t&&e.jsx("button",{type:"button",onClick:t,"aria-label":"Close details",style:{background:"rgba(255,255,255,0.06)",color:i.inkMuted,border:"0",padding:"3px 7px",borderRadius:3,fontSize:10,fontFamily:"monospace",cursor:"pointer"},children:"ESC"})]}),e.jsx("div",{style:{fontFamily:"monospace",fontSize:10,color:i.inkMuted,letterSpacing:"0.08em",marginBottom:4},children:"CRYPTOGRAPHY IN USE"}),e.jsx("div",{style:{fontFamily:"monospace",fontSize:12,color:a.color,marginBottom:12,lineHeight:1.5},children:r.crypto}),e.jsx("div",{style:{fontSize:12,color:i.inkSoft,lineHeight:1.6},children:r.detail})]})}function L(){const[r,t]=d.useState(0),[o,a]=d.useState(null),[s,h]=d.useState(null),[l,k]=d.use

1State(!1),y=d.useRef(null),b=d.useRef(null),m=d.useRef(l),u=typeof window<"u"?window.matchMedia("(prefers-reduced-motion: reduce)").matches:!1;d.useEffect(()=>{m.current=l},[l]),d.useEffect(()=>{if(u){t(0);return}function n(c){if(m.current)b.current=c-r*g;else{b.current==null&&(b.current=c);const A=(c-b.current)%g;t(A/g)}y.current=requestAnimationFrame(n)}return y.current=requestAnimationFrame(n),()=>{y.current!=null&&cancelAnimationFrame(y.current)}},[u]),d.useEffect(()=>{function n(c){c.key==="Escape"&&s&&h(null)}return window.addEventListener("keydown",n),()=>window.removeEventListener("keydown",n)},[s]);const x=Math.min(p.length-1,Math.floor(r*p.length)),w=p[x],$=p.length/2,j=x<$?x+1:Math.max(0,p.length-x),S=s??o,M=d.useCallback(n=>{h(c=>(c==null?void 0:c.id)===n.id?null:n)},[]);return e.jsxs("section",{className:"relative w-full overflow-hidden",style:{background:`radial-gradient(ellipse 80% 50% at 50% 0%, rgba(166,118,255,0.10), transparent 60%),
2                     radial-gradient(ellipse 80% 50% at 50% 100%, rgba(94,230,203,0.08), transparent 60%),
3                     ${i.bg}`,color:i.ink,fontFamily:"ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",borderRadius:16,border:`1px solid ${i.border}`},"aria-label":"Animated Alice to Bob cryptographic communication map",children:[e.jsx(R,{}),e.jsxs("div",{className:"relative z-10",style:{padding:"40px 24px 32px"},children:[e.jsx(T,{hop:w,idx:x,total:p.length,lockCount:j}),e.jsx("div",{className:"relative mt-6 pb-4",children:e.jsx("div",{className:"relative mx-auto",style:{width:"100%",maxWidth:1280,perspective:"1400px",perspectiveOrigin:"50% 100%"},children:e.jsxs("div",{className:"relative",style:{transformStyle:"preserve-3d",transform:"rotateX(6deg)"},children:[e.jsx("div",{style:{position:"absolute",left:"4%",right:"4%",top:56,height:2,background:`linear-gradient(90deg, ${i.alice} 0%, ${i.classical} 25%, ${i.hybrid} 50%, ${i.classical} 75%, ${i.bob} 100%)`,opacity:.35,borderRadius:99},"aria-hidden":!0}),e.jsx("div",{style:{position:"absolute",left:"4%",top:55,height:4,width:`${Math.max(0,r*92)}%`,background:`linear-gradient(90deg, ${i.alice}, ${i.bob})`,boxShadow:`0 0 16px ${i.bob}`,borderRadius:99,transition:"width 100ms linear"},"aria-hidden":!0}),e.jsx("div",{className:"grid",style:{gridTemplateColumns:`repeat(${p.length}, 1fr)`,gap:4,position:"relative"},children:p.map((n,c)=>e.jsx(C,{hop:n,active:c===x,passed:c<x,onHover:()=>a(n),onLeave:()=>a(null),onActivate:()=>M(n)},n.id))}),!u&&e.jsx(E,{progress:r,lockCount:j,activeIdx:x,total:p.length})]})})}),e.jsxs("div",{className:"mt-8 flex flex-wrap items-center justify-between gap-4",children:[e.jsx("div",{className:"flex flex-wrap gap-x-5 gap-y-2",children:Object.entries(f).map(([n,c])=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{style:{width:8,height:8,borderRadius:99,background:c.color,boxShadow:`0 0 10px ${c.color}`}}),e.jsx("span",{style:{color:c.color,fontFamily:"monospace",fontSize:11,letterSpacing:"0.1em",fontWeight:600},children:c.label}),e.jsx("span",{style:{color:i.inkMuted,fontFamily:"monospace",fontSize:10},children:c.desc})]},n))}),!u&&e.jsx("button",{type:"button",onClick:()=>k(n=>!n),style:{background:"transparent",border:`1px solid ${i.border}`,color:i.inkSoft,padding:"6px 14px",fontFamily:"monospace",fontSize:11,letterSpacing:"0.2em",borderRadius:4,cursor:"pointer"},onMouseEnter:n=>n.currentTarget.style.borderColor=i.alice,onMouseLeave:n=>n.currentTarget.style.borderColor=i.border,"aria-pressed":l,"data-testid":"journey-pause",children:l?"▶ RESUME":"❚❚ PAUSE"})]})]}),S&&e.jsx(z,{hop:S,sticky:!!s,onClose:()=>h(null)})]})}export{L as default};