{"version":3,"file":"ProcessSteps.UEADU_r2.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/YZRlofFccalQOuJ3jBfI/h8WwaxL28iodOQ8OYszw/ProcessSteps.js"],"sourcesContent":["// @codeFileName ProcessSteps.tsx\n// Moziro — Process steps\n// Numbered steps with a progress line that fills as the section scrolls past.\n// Horizontal on wide screens, vertical on narrow ones.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{useScroll,useMotionValueEvent}from\"framer-motion\";const DEFAULT_STEPS=[{title:\"Listen\",time:\"Weeks 1–2\",text:\"Interviews, audits and long lunches. We map what your brand already says — and what it should be saying.\"},{title:\"Frame\",time:\"Weeks 3–4\",text:\"Strategy on one page, then three visual territories in rough, honest sketches. You pick the light we chase.\"},{title:\"Make\",time:\"Weeks 5–10\",text:\"Identity, site and film come together as one system, refined in weekly reviews you can actually join.\"},{title:\"Launch\",time:\"Weeks 11–12\",text:\"We ship, brief your team and stay on for 60 days of tweaks, assets and launch-day nerves.\"}];/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n * @framerIntrinsicWidth 1200\n */export default function ProcessSteps(props){const{steps=DEFAULT_STEPS,textColor=\"#2A1022\",mutedColor=\"#7A5A6C\",accentColor=\"#6E1F5C\",lineColor=\"rgba(42,16,34,0.14)\",dotColor=\"#F9EFF0\",animate=true,style}=props;const list=steps&&steps.length?steps:DEFAULT_STEPS;const ref=useRef(null);const fillH=useRef(null);const fillV=useRef(null);const[active,setActive]=useState(list.length);const[reduced,setReduced]=useState(false);const isCanvas=RenderTarget.current()===RenderTarget.canvas;const still=!animate||reduced||isCanvas;const{scrollYProgress}=useScroll({target:ref,offset:[\"start 0.75\",\"end 0.55\"]});const paint=p=>{const v=still?1:Math.min(1,Math.max(0,p));if(fillH.current)fillH.current.style.transform=`scaleX(${v})`;if(fillV.current)fillV.current.style.transform=`scaleY(${v})`;const n=list.length;const a=still?n:Math.min(n,Math.floor(v*n+.35));setActive(prev=>prev===a?prev:a);};useEffect(()=>{setReduced(!!window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches);},[]);useEffect(()=>paint(scrollYProgress.get()),[still]);useMotionValueEvent(scrollYProgress,\"change\",p=>paint(p));const css=`\n    .mzs { container-type: inline-size; width: 100%; }\n    .mzs-grid { position: relative; display: grid; grid-template-columns: repeat(${list.length}, minmax(0, 1fr)); gap: 40px; padding: 64px 0 0 0; }\n    .mzs-lineH { position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: ${lineColor}; border-radius: 2px; overflow: hidden; }\n    .mzs-lineV { display: none; }\n    .mzs-dot { position: absolute; top: -64px; left: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 500 13px/1 \"Unbounded\", sans-serif; transition: background .45s cubic-bezier(.22,1,.36,1), color .45s cubic-bezier(.22,1,.36,1), border-color .45s; }\n    .mzs-step { position: relative; }\n    @container (max-width: 720px) {\n      .mzs-grid { grid-template-columns: 1fr; gap: 44px; padding: 0 0 0 68px; }\n      .mzs-lineH { display: none; }\n      .mzs-lineV { display: block; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: ${lineColor}; border-radius: 2px; overflow: hidden; }\n      .mzs-dot { top: -4px; left: -68px; }\n    }\n    @media (prefers-reduced-motion: reduce) { .mzs-dot { transition: none; } }\n    `;return /*#__PURE__*/_jsxs(\"div\",{ref:ref,className:\"mzs\",style:{...style,fontFamily:'\"Manrope\", sans-serif'},children:[/*#__PURE__*/_jsx(\"style\",{children:css}),/*#__PURE__*/_jsx(\"link\",{rel:\"stylesheet\",href:\"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;500;600&display=swap\"}),/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\"},children:[/*#__PURE__*/_jsx(\"div\",{className:\"mzs-lineH\",\"aria-hidden\":true,children:/*#__PURE__*/_jsx(\"div\",{ref:fillH,style:{position:\"absolute\",inset:0,background:accentColor,transformOrigin:\"left\",transform:\"scaleX(1)\"}})}),/*#__PURE__*/_jsx(\"div\",{className:\"mzs-lineV\",\"aria-hidden\":true,children:/*#__PURE__*/_jsx(\"div\",{ref:fillV,style:{position:\"absolute\",inset:0,background:accentColor,transformOrigin:\"top\",transform:\"scaleY(1)\"}})}),/*#__PURE__*/_jsx(\"ol\",{className:\"mzs-grid\",style:{listStyle:\"none\",margin:0},children:list.map((s,i)=>{const on=i<active;return /*#__PURE__*/_jsxs(\"li\",{className:\"mzs-step\",children:[/*#__PURE__*/_jsx(\"span\",{className:\"mzs-dot\",\"aria-hidden\":true,style:{background:on?accentColor:dotColor,color:on?dotColor:mutedColor,border:`2px solid ${on?accentColor:lineColor}`},children:String(i+1).padStart(2,\"0\")}),s.time?/*#__PURE__*/_jsx(\"div\",{style:{fontSize:12,fontWeight:700,letterSpacing:\".2em\",textTransform:\"uppercase\",color:accentColor,marginBottom:14},children:s.time}):null,/*#__PURE__*/_jsx(\"h3\",{style:{margin:0,fontFamily:'\"Unbounded\", sans-serif',fontWeight:500,fontSize:28,lineHeight:1.2,letterSpacing:\"-0.01em\",color:textColor},children:s.title}),/*#__PURE__*/_jsx(\"p\",{style:{margin:\"14px 0 0\",fontSize:16,lineHeight:1.6,color:mutedColor,maxWidth:320},children:s.text})]},i);})})]})]});}addPropertyControls(ProcessSteps,{steps:{type:ControlType.Array,title:\"Steps\",maxCount:5,control:{type:ControlType.Object,controls:{title:{type:ControlType.String,title:\"Title\",defaultValue:\"Step\"},time:{type:ControlType.String,title:\"Timing\",defaultValue:\"Week 1\"},text:{type:ControlType.String,title:\"Text\",displayTextArea:true,defaultValue:\"What happens in this step.\"}}},defaultValue:DEFAULT_STEPS},textColor:{type:ControlType.Color,title:\"Text\",defaultValue:\"#2A1022\"},mutedColor:{type:ControlType.Color,title:\"Muted text\",defaultValue:\"#7A5A6C\"},accentColor:{type:ControlType.Color,title:\"Accent\",defaultValue:\"#6E1F5C\"},lineColor:{type:ControlType.Color,title:\"Line\",defaultValue:\"rgba(42,16,34,0.14)\"},dotColor:{type:ControlType.Color,title:\"Dot fill\",defaultValue:\"#F9EFF0\",description:\"Match your page background.\"},animate:{type:ControlType.Boolean,title:\"Animate\",defaultValue:true,description:\"Off (or reduced motion) shows the line full.\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ProcessSteps\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"1200\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ProcessSteps.map"],"mappings":"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"}