{"version":3,"file":"AutoFlowVisual.P0BF_74l.mjs","names":["React.useState","React.useMemo","React.useRef","__exportAll","pe","init_npm_react_18_3_1","de","window","init_ssg_sandbox_shims","init_jsx_runtime","p","ce","_e","useIsStaticRenderer","addPropertyControls","ControlType","init_framer_CaDWdxiz","AutoFlowVisual_exports","__FramerMetadata__","AutoFlowVisual","useCycle","isStatic","lit","setLit","n","seen","setSeen","ref","io","es","t","ms","loop","id","parse","v","s","raw","DEFAULT_STEPS","props","steps","progress","vars","style","title","CSS","badge","i","amberLast","endNote","init_AutoFlowVisual","__esmMin","\"exports\"","\"default\"","\"type\"","\"name\"","\"slots\"","\"annotations\"","\"framerIntrinsicWidth\"","\"framerContractVersion\"","\"framerSupportedLayoutHeight\"","\"framerSupportedLayoutWidth\"","\"__FramerMetadata__\""],"sources":["https:/framerusercontent.com/modules/9WzBr4DAjvhXz93RX5z1/Zod6JjkjHopHtAryJxOv/AutoFlowVisual.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";const CSS=\".cpf, .cpf * { box-sizing: border-box; margin: 0; padding: 0; }\\n.cpf { position: relative; width: 100%; font-family: Inter, 'Helvetica Neue', system-ui, -apple-system, sans-serif; color: #fff; border-radius: 20px; border: 1px solid rgba(139,108,240,0.38); background: radial-gradient(120% 90% at 50% 0%, rgba(76,52,160,0.35) 0%, rgba(26,16,51,0.9) 55%, #120c22 100%); box-shadow: 0 24px 60px rgba(0,0,0,0.35); overflow: hidden; padding: 26px 28px 28px; }\\n.cpf .bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(168,85,247,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(168,85,247,0.06) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 10%, transparent 75%); mask-image: radial-gradient(80% 70% at 50% 30%, #000 10%, transparent 75%); }\\n.cpf .hd { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }\\n.cpf .ht { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }\\n.cpf .hs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #a99fdc; }\\n.cpf .pulse { width: 7px; height: 7px; border-radius: 999px; background: #a78bfa; box-shadow: 0 0 8px #a78bfa; animation: cpf-pulse 1.2s ease-in-out infinite; }\\n@keyframes cpf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }\\n@media (prefers-reduced-motion: reduce) { .cpf * { animation: none !important; transition: none !important; } }\\n.cpf .track { position: relative; display: grid; gap: 14px; }\\n.cpf.h .track { grid-template-columns: repeat(var(--n), 1fr); }\\n.cpf .line { position: absolute; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); top: 17px; height: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }\\n.cpf .fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--p)); background: linear-gradient(90deg, #8b5cf6, #c4b5fd); transition: transform 0.6s ease; }\\n.cpf .step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }\\n.cpf .nc { display: flex; flex-direction: column; align-items: center; }\\n.cpf .rail { display: none; }\\n.cpf .body { width: 100%; }\\n.cpf .node { position: relative; z-index: 1; width: 36px; height: 36px; flex: none; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background: rgba(255,255,255,0.03); color: #8f86a8; transition: all 0.5s ease; }\\n.cpf .step.on .node { border-color: rgba(196,181,253,0.75); background: rgba(139,92,246,0.28); color: #fff; box-shadow: 0 0 0 5px rgba(139,92,246,0.14), 0 0 18px rgba(167,139,250,0.45); }\\n.cpf .step.amber.on .node { border-color: rgba(227,182,95,0.8); background: rgba(227,182,95,0.18); box-shadow: 0 0 0 5px rgba(227,182,95,0.12), 0 0 18px rgba(227,182,95,0.4); }\\n.cpf .card { width: 100%; border-radius: 14px; padding: 14px 14px 13px; border: 1px solid rgba(255,255,255,0.08); background: rgba(14,10,28,0.65); display: flex; flex-direction: column; gap: 6px; opacity: 0.45; transform: translateY(4px); transition: all 0.5s ease; }\\n.cpf .step.on .card { opacity: 1; transform: none; }\\n.cpf .step.amber.on .card { border-color: rgba(227,182,95,0.55); box-shadow: 0 0 22px rgba(227,182,95,0.14); }\\n.cpf .t { font-size: 15px; font-weight: 600; line-height: 1.25; }\\n.cpf .d { font-size: 13px; line-height: 1.45; color: #b9b2cf; }\\n.cpf .pill { align-self: center; margin-top: 2px; font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(196,181,253,0.4); color: #c4b5fd; background: rgba(139,92,246,0.12); }\\n.cpf .step.amber .pill { border-color: rgba(227,182,95,0.6); color: #f1c97a; background: rgba(227,182,95,0.1); }\\n.cpf .end { position: relative; margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(227,182,95,0.6); color: #f1c97a; background: rgba(227,182,95,0.08); opacity: 0.35; transform: translateY(4px); transition: all 0.5s ease; }\\n.cpf .end.on { opacity: 1; transform: none; }\\n.cpf.v .track { grid-template-columns: 1fr !important; gap: 0; }\\n.cpf.v .line { display: none; }\\n.cpf.v .step { flex-direction: row; align-items: stretch; text-align: left; gap: 14px; }\\n.cpf.v .rail { display: block; flex: 1; width: 2px; min-height: 12px; margin: 6px 0; background: rgba(255,255,255,0.08); border-radius: 2px; transition: background 0.5s ease; }\\n.cpf.v .step.on .rail { background: rgba(167,139,250,0.55); }\\n.cpf.v .step:last-child .rail { display: none; }\\n.cpf.v .body { flex: 1; padding-bottom: 12px; }\\n.cpf.v .step:last-child .body { padding-bottom: 0; }\\n.cpf.v .card { align-items: flex-start; }\\n.cpf.v .pill { align-self: flex-start; }\\n@media (max-width: 809.98px) {\\n.cpf { padding: 20px 18px 22px; }\\n.cpf .track { grid-template-columns: 1fr !important; gap: 0; }\\n.cpf .line { display: none; }\\n.cpf .step { flex-direction: row; align-items: stretch; text-align: left; gap: 14px; }\\n.cpf .rail { display: block; flex: 1; width: 2px; min-height: 12px; margin: 6px 0; background: rgba(255,255,255,0.08); border-radius: 2px; transition: background 0.5s ease; }\\n.cpf .step.on .rail { background: rgba(167,139,250,0.55); }\\n.cpf .step:last-child .rail { display: none; }\\n.cpf .body { flex: 1; padding-bottom: 12px; }\\n.cpf .step:last-child .body { padding-bottom: 0; }\\n.cpf .card { align-items: flex-start; }\\n.cpf .pill { align-self: flex-start; }\\n.cpf .d { font-size: 12.5px; }\\n}\";function useCycle(n,loop,ref){const isStatic=useIsStaticRenderer();const[lit,setLit]=React.useState(n);const[seen,setSeen]=React.useState(true);React.useEffect(()=>{if(typeof IntersectionObserver===\"undefined\"||!ref.current)return;const io=new IntersectionObserver(es=>setSeen(es.some(e=>e.isIntersecting)),{threshold:.2});io.observe(ref.current);return()=>io.disconnect();},[]);React.useEffect(()=>{setLit(n);if(isStatic||n<1||!seen)return;if(typeof window===\"undefined\")return;if(window.matchMedia&&window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches)return;let t=0;setLit(0);const ms=Math.max(650,Math.round(loop*1e3/(n+2)));const id=window.setInterval(()=>{t=(t+1)%(n+2);setLit(Math.min(t,n));},ms);return()=>window.clearInterval(id);},[n,loop,isStatic,seen]);return lit;}function parse(s){try{const v=JSON.parse(s||\"[]\");return Array.isArray(v)?v:[];}catch(e){return[];}}const DEFAULT_STEPS=JSON.stringify([{t:\"Detect\",d:\"A threat is found and confirmed.\"},{t:\"File\",d:\"The request goes to the provider.\"},{t:\"Verify\",d:\"Removal is checked until confirmed.\"}]);/**\n * Animated step flow for articles. Steps are a JSON array of { t, d, tag }.\n *\n * @framerIntrinsicWidth 760\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function AutoFlowVisual(props){const{title=\"How it flows\",badge=\"\",steps:raw=DEFAULT_STEPS,endNote=\"\",amberLast=false,loop=12,style}=props;const steps=React.useMemo(()=>parse(raw),[raw]);const n=steps.length;const ref=React.useRef(null);const lit=useCycle(n,loop,ref);const progress=n>1?Math.max(0,Math.min(1,(lit-1)/(n-1))):0;const vars={\"--n\":n||1,\"--p\":progress};return /*#__PURE__*/_jsxs(\"div\",{ref:ref,className:\"cpf\"+(n>5?\" v\":\" h\"),style:{...style,...vars},role:\"figure\",\"aria-label\":title,children:[/*#__PURE__*/_jsx(\"style\",{children:CSS}),/*#__PURE__*/_jsx(\"div\",{className:\"bg\"}),/*#__PURE__*/_jsxs(\"div\",{className:\"hd\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"ht\",children:title}),badge?/*#__PURE__*/_jsxs(\"div\",{className:\"hs\",children:[/*#__PURE__*/_jsx(\"span\",{className:\"pulse\"}),badge]}):null]}),/*#__PURE__*/_jsxs(\"div\",{className:\"track\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"line\",children:/*#__PURE__*/_jsx(\"div\",{className:\"fill\"})}),steps.map((s,i)=>/*#__PURE__*/_jsxs(\"div\",{className:\"step\"+(i<lit?\" on\":\"\")+(amberLast&&i===n-1?\" amber\":\"\"),children:[/*#__PURE__*/_jsxs(\"div\",{className:\"nc\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"node\",children:i+1}),/*#__PURE__*/_jsx(\"div\",{className:\"rail\"})]}),/*#__PURE__*/_jsx(\"div\",{className:\"body\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"card\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"t\",children:s.t}),s.d?/*#__PURE__*/_jsx(\"div\",{className:\"d\",children:s.d}):null,s.tag?/*#__PURE__*/_jsx(\"div\",{className:\"pill\",children:s.tag}):null]})})]},i))]}),endNote?/*#__PURE__*/_jsx(\"div\",{className:\"end\"+(lit>=n?\" on\":\"\"),children:endNote}):null]});}addPropertyControls(AutoFlowVisual,{title:{type:ControlType.String,title:\"Title\",defaultValue:\"How it flows\"},badge:{type:ControlType.String,title:\"Badge\",defaultValue:\"\"},steps:{type:ControlType.String,title:\"Steps JSON\",defaultValue:DEFAULT_STEPS,displayTextArea:true},endNote:{type:ControlType.String,title:\"End note\",defaultValue:\"\"},amberLast:{type:ControlType.Boolean,title:\"Amber last\",defaultValue:false},loop:{type:ControlType.Number,title:\"Loop (s)\",defaultValue:12,min:4,max:30,step:1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"AutoFlowVisual\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"760\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AutoFlowVisual.map"],"mappings":"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"}