{"version":3,"file":"SVG_Transition.Be99DNAO.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/x5dZFrpACmbMVMJpxj86/KD4XTISE1Cq3SIpSlcSD/SVG_Transition.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{useEffect,useLayoutEffect,useRef,useState}from\"react\";import{createPortal}from\"react-dom\";const DEFAULT_PATH=\"M43 259C296 11.5688 994 -3 922.994 498.259C851.988 999.517 281.229 1004.28 123 767C-35.2287 529.721 179 259 472 259C765 259 792 498.259 659 654C526 809.741 319 755 285 669.001C251 583.001 299 452 496 452C693 452 876.073 639.171 935 937.001\";const SESSION_KEY=\"pt_draw_active\";/**\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function DrawSVGTransition({strokeColor=\"#ceaeff\",svgPath=DEFAULT_PATH,leaveDuration=1,enterDuration=1.25}){const isCanvas=RenderTarget.current()===RenderTarget.canvas;const portalEl=useRef(null);const pathRef=useRef(null);const[portalReady,setPortalReady]=useState(false);const isTransitionRef=useRef(false);const navigating=useRef(false);const allowNextClick=useRef(false);// Fallback timer: tracks whether the SVG is currently covering the screen.\n// If no enter animation fires (same-page in Preview), we sweep it out.\nconst isCovering=useRef(false);const gsapRef=useRef(null);const overlayRef=useRef(null);const reducedMotion=typeof window!==\"undefined\"?window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches:false;// ── GSAP LOADER ────────────────────────────────────────────────────────\nasync function loadGSAP(){if(gsapRef.current)return gsapRef.current;if(window.gsap){gsapRef.current=window.gsap;return gsapRef.current;}await new Promise((resolve,reject)=>{const s=document.createElement(\"script\");s.src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js\";s.async=true;s.onload=()=>resolve();s.onerror=()=>reject();document.head.appendChild(s);});gsapRef.current=window.gsap;return gsapRef.current;}// ── DRAW HELPERS ───────────────────────────────────────────────────────\nfunction applyDraw(path,len,start,end,widthPct){const visLen=Math.max(0,end-start)*len;path.style.strokeDasharray=`${visLen} ${len+10}`;path.style.strokeDashoffset=`${-start*len}`;path.style.strokeWidth=`${widthPct}%`;}function animateDrawSVG({gsap,path,fromStart,fromEnd,toStart,toEnd,fromWidthPct,toWidthPct,duration,ease=\"power1.inOut\",delay=0}){const len=path.getTotalLength();const proxy={s:fromStart,e:fromEnd,w:fromWidthPct};applyDraw(path,len,fromStart,fromEnd,fromWidthPct);return new Promise(resolve=>{gsap.to(proxy,{s:toStart,e:toEnd,w:toWidthPct,duration,ease,delay,onUpdate(){applyDraw(path,len,proxy.s,proxy.e,proxy.w);},onComplete:resolve});});}// ── PORTAL SETUP — before first paint ─────────────────────────────────\nuseLayoutEffect(()=>{if(isCanvas)return;const isTransition=sessionStorage.getItem(SESSION_KEY)===\"true\";isTransitionRef.current=isTransition;if(isTransition)sessionStorage.removeItem(SESSION_KEY);const el=document.createElement(\"div\");el.setAttribute(\"data-pt-draw-portal\",\"\");document.body.appendChild(el);portalEl.current=el;setPortalReady(true);return()=>{document.body.removeChild(el);portalEl.current=null;};},[]);// ── ENTER ANIMATION ────────────────────────────────────────────────────\nuseEffect(()=>{if(isCanvas||!portalReady)return;async function runEnter(){const path=pathRef.current;if(!path)return;const len=path.getTotalLength();// Real navigation happened — disarm the fallback timer\nisCovering.current=false;if(!isTransitionRef.current){applyDraw(path,len,0,0,5);return;}if(reducedMotion){applyDraw(path,len,0,0,5);return;}const gsap=await loadGSAP();// Snap to fully drawn + thick (screen is covered)\napplyDraw(path,len,0,1,30);await new Promise(r=>setTimeout(r,200));// Erase from front while thinning\nawait animateDrawSVG({gsap,path,fromStart:0,fromEnd:1,toStart:1,toEnd:1,fromWidthPct:30,toWidthPct:5,duration:enterDuration,ease:\"power1.inOut\"});applyDraw(path,len,0,0,5);// Restore interactivity now that animation is done\nif(overlayRef.current)overlayRef.current.style.pointerEvents=\"none\";}runEnter();},[portalReady]);// ── EXIT ANIMATION — intercept link clicks ─────────────────────────────\nuseEffect(()=>{if(isCanvas)return;const handleClick=e=>{const anchor=e.target.closest(\"a[href]\");if(!anchor)return;if(allowNextClick.current){allowNextClick.current=false;return;}if(navigating.current){e.preventDefault();return;}const href=anchor.getAttribute(\"href\");if(!href)return;if(href.startsWith(\"#\")||href.startsWith(\"mailto:\")||href.startsWith(\"tel:\")||href.startsWith(\"javascript:\"))return;let parsedUrl;try{parsedUrl=new URL(href,window.location.href);if(parsedUrl.hostname!==window.location.hostname)return;}catch{return;}// Same-page link on live site — skip so path never gets stuck\nif(parsedUrl.pathname===window.location.pathname)return;e.preventDefault();e.stopPropagation();navigating.current=true;async function runLeave(){const path=pathRef.current;if(!path||reducedMotion){sessionStorage.setItem(SESSION_KEY,\"true\");allowNextClick.current=true;navigating.current=false;anchor.click();return;}const gsap=await loadGSAP();const len=path.getTotalLength();// Block interaction during animation\nif(overlayRef.current)overlayRef.current.style.pointerEvents=\"auto\";applyDraw(path,len,0,0,5);const proxyDraw={s:0,e:0,w:5};// Draw path across screen\ngsap.to(proxyDraw,{e:.85,duration:leaveDuration,ease:\"power1.inOut\",onUpdate(){applyDraw(path,len,proxyDraw.s,proxyDraw.e,proxyDraw.w);}});// Simultaneously thicken the stroke to cover content\nawait new Promise(resolve=>{gsap.to(proxyDraw,{w:30,duration:leaveDuration*.75,ease:\"power1.inOut\",delay:leaveDuration*.25,onUpdate(){applyDraw(path,len,proxyDraw.s,proxyDraw.e,proxyDraw.w);},onComplete:resolve});});sessionStorage.setItem(SESSION_KEY,\"true\");isCovering.current=true;allowNextClick.current=true;navigating.current=false;anchor.click();// ── Fallback timer ─────────────────────────────────────────\n// In Framer Preview, same-page clicks don't remount the page\n// so the enter animation never fires. After a timeout we erase\n// the path ourselves so the user isn't locked out.\nconst fallbackMs=leaveDuration*1e3*1.5+enterDuration*1e3+800;setTimeout(async()=>{if(!isCovering.current)return;// enter already handled it\nisCovering.current=false;navigating.current=false;sessionStorage.removeItem(SESSION_KEY);const path2=pathRef.current;if(!path2)return;const len2=path2.getTotalLength();applyDraw(path2,len2,0,1,30);await animateDrawSVG({gsap,path:path2,fromStart:0,fromEnd:1,toStart:1,toEnd:1,fromWidthPct:30,toWidthPct:5,duration:enterDuration,ease:\"power1.inOut\"});applyDraw(path2,len2,0,0,5);if(overlayRef.current)overlayRef.current.style.pointerEvents=\"none\";},fallbackMs);}runLeave();};document.addEventListener(\"click\",handleClick,true);return()=>document.removeEventListener(\"click\",handleClick,true);},[leaveDuration,enterDuration,30,5]);// ── CANVAS — zero size, nothing visible ───────────────────────────────\nif(isCanvas)return /*#__PURE__*/_jsx(\"div\",{style:{width:0,height:0,overflow:\"hidden\"}});// ── LIVE OVERLAY (via portal) ──────────────────────────────────────────\nif(!portalReady||!portalEl.current)return null;const initialStrokeDasharray=isTransitionRef.current?\"100000 0\":\"0 100000\";const initialStrokeWidth=isTransitionRef.current?`${30}%`:`${5}%`;return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(\"div\",{ref:overlayRef,style:{position:\"fixed\",inset:0,zIndex:9999,pointerEvents:\"none\",overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"svg\",{xmlns:\"http://www.w3.org/2000/svg\",viewBox:\"0 0 1000 1000\",fill:\"none\",preserveAspectRatio:\"none\",style:{width:\"130%\",height:\"130%\",position:\"absolute\",top:\"-15%\",left:\"-15%\",overflow:\"visible\"},children:/*#__PURE__*/_jsx(\"path\",{ref:pathRef,d:svgPath,stroke:strokeColor,strokeLinecap:\"round\",strokeLinejoin:\"round\",fill:\"none\",style:{strokeWidth:initialStrokeWidth,strokeDasharray:initialStrokeDasharray,strokeDashoffset:\"0\"}})})}),portalEl.current);}// ── PROPERTY CONTROLS ──────────────────────────────────────────────────────\naddPropertyControls(DrawSVGTransition,{strokeColor:{type:ControlType.Color,title:\"Stroke Color\",defaultValue:\"#ceaeff\"},leaveDuration:{type:ControlType.Number,title:\"Leave Duration\",defaultValue:1,min:.2,max:3,step:.05,unit:\"s\",displayStepper:true},enterDuration:{type:ControlType.Number,title:\"Enter Duration\",defaultValue:1.25,min:.2,max:3,step:.05,unit:\"s\",displayStepper:true},svgPath:{type:ControlType.String,title:\"SVG Path\",defaultValue:DEFAULT_PATH,displayTextArea:true,description:'The \"d\" attribute of an SVG <path>. Paste any path here to customise the animation shape. The path should traverse the full 1000\\xd71000 viewBox. Setup: add this component to every page and keep all properties identical. Set Page Settings → Transitions to None (Instant). Transitions only fire on <a> tag elements — set this under Accessibility → Tag on your link layers.'}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"DrawSVGTransition\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"auto\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SVG_Transition.map"],"mappings":"8NAGG,SAAwB,EAAkB,CAAC,cAAY,UAAU,UAAQ,EAAa,gBAAc,EAAE,gBAAc,MAAM,CAAC,IAAM,EAAS,EAAa,SAAS,GAAG,EAAa,OAAa,EAASA,EAAO,KAAK,CAAO,EAAQA,EAAO,KAAK,CAAM,CAAC,EAAY,GAAgBC,EAAS,GAAM,CAAO,EAAgBD,EAAO,GAAM,CAAO,EAAWA,EAAO,GAAM,CAAO,EAAeA,EAAO,GAAM,CAElY,EAAWA,EAAO,GAAM,CAAO,EAAQA,EAAO,KAAK,CAAO,EAAWA,EAAO,KAAK,CAAO,EAAqB,IAAS,OAA0E,GAA9D,EAAO,WAAW,mCAAmC,CAAC,QAC9L,eAAe,GAAU,CAAsX,OAAlX,EAAQ,QAAe,EAAQ,QAAW,EAAO,MAAM,EAAQ,QAAQ,EAAO,KAAY,EAAQ,UAAS,MAAM,IAAI,SAAS,EAAQ,IAAS,CAAC,IAAM,EAAE,SAAS,cAAc,SAAS,CAAC,EAAE,IAAI,4DAA4D,EAAE,MAAM,GAAK,EAAE,WAAW,GAAS,CAAC,EAAE,YAAY,GAAQ,CAAC,SAAS,KAAK,YAAY,EAAE,EAAG,CAAC,EAAQ,QAAQ,EAAO,KAAY,EAAQ,SAC9Z,SAAS,EAAU,EAAK,EAAI,EAAM,EAAI,EAAS,CAAC,IAAM,EAAO,KAAK,IAAI,EAAE,EAAI,EAAM,CAAC,EAAI,EAAK,MAAM,gBAAgB,GAAG,EAAO,GAAG,EAAI,KAAK,EAAK,MAAM,iBAAiB,GAAG,CAAC,EAAM,IAAM,EAAK,MAAM,YAAY,GAAG,EAAS,GAAI,SAAS,EAAe,CAAC,OAAK,OAAK,YAAU,UAAQ,UAAQ,QAAM,eAAa,aAAW,WAAS,OAAK,eAAe,QAAM,GAAG,CAAC,IAAM,EAAI,EAAK,gBAAgB,CAAO,EAAM,CAAC,EAAE,EAAU,EAAE,EAAQ,EAAE,EAAa,CAAoD,OAAnD,EAAU,EAAK,EAAI,EAAU,EAAQ,EAAa,CAAQ,IAAI,QAAQ,GAAS,CAAC,EAAK,GAAG,EAAM,CAAC,EAAE,EAAQ,EAAE,EAAM,EAAE,EAAW,WAAS,OAAK,QAAM,UAAU,CAAC,EAAU,EAAK,EAAI,EAAM,EAAE,EAAM,EAAE,EAAM,EAAE,EAAG,WAAW,EAAQ,CAAC,EAAG,CAiBlpB,GAhBA,MAAoB,CAAC,GAAG,EAAS,OAAO,IAAM,EAAa,eAAe,QAAQ,EAAY,GAAG,OAAO,EAAgB,QAAQ,EAAgB,GAAa,eAAe,WAAW,EAAY,CAAC,IAAM,EAAG,SAAS,cAAc,MAAM,CAAkH,OAAjH,EAAG,aAAa,sBAAsB,GAAG,CAAC,SAAS,KAAK,YAAY,EAAG,CAAC,EAAS,QAAQ,EAAG,EAAe,GAAK,KAAW,CAAC,SAAS,KAAK,YAAY,EAAG,CAAC,EAAS,QAAQ,OAAS,EAAE,CAAC,CACla,MAAc,CAAC,GAAG,GAAU,CAAC,EAAY,OAAO,eAAe,GAAU,CAAC,IAAM,EAAK,EAAQ,QAAQ,GAAG,CAAC,EAAK,OAAO,IAAM,EAAI,EAAK,gBAAgB,CAC3H,GAAzB,EAAW,QAAQ,GAAS,CAAC,EAAgB,QAAQ,CAAC,EAAU,EAAK,EAAI,EAAE,EAAE,EAAE,CAAC,OAAQ,GAAG,EAAc,CAAC,EAAU,EAAK,EAAI,EAAE,EAAE,EAAE,CAAC,OAAQ,IAAM,EAAK,MAAM,GAAU,CACvK,EAAU,EAAK,EAAI,EAAE,EAAE,GAAG,CAAC,MAAM,IAAI,QAAQ,GAAG,WAAW,EAAE,IAAI,CAAC,CAClE,MAAM,EAAe,CAAC,OAAK,OAAK,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,GAAG,WAAW,EAAE,SAAS,EAAc,KAAK,eAAe,CAAC,CAAC,EAAU,EAAK,EAAI,EAAE,EAAE,EAAE,CACxK,EAAW,UAAQ,EAAW,QAAQ,MAAM,cAAc,QAAQ,GAAU,EAAG,CAAC,EAAY,CAAC,CAChG,MAAc,CAAC,GAAG,EAAS,OAAO,IAAM,EAAY,GAAG,CAAC,IAAM,EAAO,EAAE,OAAO,QAAQ,UAAU,CAAC,GAAG,CAAC,EAAO,OAAO,GAAG,EAAe,QAAQ,CAAC,EAAe,QAAQ,GAAM,OAAQ,GAAG,EAAW,QAAQ,CAAC,EAAE,gBAAgB,CAAC,OAAQ,IAAM,EAAK,EAAO,aAAa,OAAO,CAAiB,GAAb,CAAC,GAAe,EAAK,WAAW,IAAI,EAAE,EAAK,WAAW,UAAU,EAAE,EAAK,WAAW,OAAO,EAAE,EAAK,WAAW,cAAc,CAAC,OAAO,IAAI,EAAU,GAAG,CAA8C,GAA7C,EAAU,IAAI,IAAI,EAAK,EAAO,SAAS,KAAK,CAAI,EAAU,WAAW,EAAO,SAAS,SAAS,YAAa,CAAC,OAC9gB,GAAG,EAAU,WAAW,EAAO,SAAS,SAAS,OAAO,EAAE,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,EAAW,QAAQ,GAAK,eAAe,GAAU,CAAC,IAAM,EAAK,EAAQ,QAAQ,GAAG,CAAC,GAAM,EAAc,CAAC,eAAe,QAAQ,EAAY,OAAO,CAAC,EAAe,QAAQ,GAAK,EAAW,QAAQ,GAAM,EAAO,OAAO,CAAC,OAAQ,IAAM,EAAK,MAAM,GAAU,CAAO,EAAI,EAAK,gBAAgB,CACpX,EAAW,UAAQ,EAAW,QAAQ,MAAM,cAAc,QAAO,EAAU,EAAK,EAAI,EAAE,EAAE,EAAE,CAAC,IAAM,EAAU,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAC3H,EAAK,GAAG,EAAU,CAAC,EAAE,IAAI,SAAS,EAAc,KAAK,eAAe,UAAU,CAAC,EAAU,EAAK,EAAI,EAAU,EAAE,EAAU,EAAE,EAAU,EAAE,EAAG,CAAC,CAC1I,MAAM,IAAI,QAAQ,GAAS,CAAC,EAAK,GAAG,EAAU,CAAC,EAAE,GAAG,SAAS,EAAc,IAAI,KAAK,eAAe,MAAM,EAAc,IAAI,UAAU,CAAC,EAAU,EAAK,EAAI,EAAU,EAAE,EAAU,EAAE,EAAU,EAAE,EAAG,WAAW,EAAQ,CAAC,EAAG,CAAC,eAAe,QAAQ,EAAY,OAAO,CAAC,EAAW,QAAQ,GAAK,EAAe,QAAQ,GAAK,EAAW,QAAQ,GAAM,EAAO,OAAO,CAI9V,IAAM,EAAW,EAAc,IAAI,IAAI,EAAc,IAAI,IAAI,WAAW,SAAS,CAAC,GAAG,CAAC,EAAW,QAAQ,OACzG,EAAW,QAAQ,GAAM,EAAW,QAAQ,GAAM,eAAe,WAAW,EAAY,CAAC,IAAM,EAAM,EAAQ,QAAQ,GAAG,CAAC,EAAM,OAAO,IAAM,EAAK,EAAM,gBAAgB,CAAC,EAAU,EAAM,EAAK,EAAE,EAAE,GAAG,CAAC,MAAM,EAAe,CAAC,OAAK,KAAK,EAAM,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,GAAG,WAAW,EAAE,SAAS,EAAc,KAAK,eAAe,CAAC,CAAC,EAAU,EAAM,EAAK,EAAE,EAAE,EAAE,CAAI,EAAW,UAAQ,EAAW,QAAQ,MAAM,cAAc,SAAS,EAAW,CAAE,GAAU,EAAuD,OAApD,SAAS,iBAAiB,QAAQ,EAAY,GAAK,KAAW,SAAS,oBAAoB,QAAQ,EAAY,GAAK,EAAG,CAAC,EAAc,EAAc,GAAG,EAAE,CAAC,CAChnB,EAAS,OAAoB,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,SAAS,CAAC,CAAC,CACxF,GAAG,CAAC,GAAa,CAAC,EAAS,QAAQ,OAAO,KAAK,IAAM,EAAuB,EAAgB,QAAQ,WAAW,WAA6E,OAAoB,EAA0B,EAAK,MAAM,CAAC,IAAI,EAAW,MAAM,CAAC,SAAS,QAAQ,MAAM,EAAE,OAAO,KAAK,cAAc,OAAO,SAAS,SAAS,CAAC,SAAsB,EAAK,MAAM,CAAC,MAAM,6BAA6B,QAAQ,gBAAgB,KAAK,OAAO,oBAAoB,OAAO,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,SAAS,WAAW,IAAI,OAAO,KAAK,OAAO,SAAS,UAAU,CAAC,SAAsB,EAAK,OAAO,CAAC,IAAI,EAAQ,EAAE,EAAQ,OAAO,EAAY,cAAc,QAAQ,eAAe,QAAQ,KAAK,OAAO,MAAM,CAAC,YAAvjB,EAAgB,QAAQ,MAAS,KAAqjB,gBAAgB,EAAuB,iBAAiB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAS,QAAQ,0BAzBlxB,IAAiE,IAA6D,IAAoC,CAAM,EAAa,kPAAwP,EAAY,iBA0Bpe,EAAoB,EAAkB,CAAC,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,UAAU,CAAC,cAAc,CAAC,KAAK,EAAY,OAAO,MAAM,iBAAiB,aAAa,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,IAAI,KAAK,IAAI,eAAe,GAAK,CAAC,cAAc,CAAC,KAAK,EAAY,OAAO,MAAM,iBAAiB,aAAa,KAAK,IAAI,GAAG,IAAI,EAAE,KAAK,IAAI,KAAK,IAAI,eAAe,GAAK,CAAC,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,EAAa,gBAAgB,GAAK,YAAY,mXAAsX,CAAC,CAAC"}