{"version":3,"file":"BehanceGate.D32JbDXX.mjs","names":["React.useState","React.useRef","React.useId"],"sources":["https:/framerusercontent.com/modules/Q9uWxh7mWS6IblwohFs3/xwct3ybh3MV6uhu9KOKx/BehanceGate.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{createPortal}from\"react-dom\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";/**\n * BehanceGate — click interceptor + side sheet, matching the visual\n * design of PasswordGate. Place this as an extra (invisible, 0x0)\n * child inside the same wrapper Frame as a Project Card. On mount it\n * listens for clicks on an ancestor element (capture phase), blocks\n * the card's own link/navigation, and opens a slide-in side sheet\n * pointing to the project's Behance case study instead.\n *\n * Framer wraps every component instance in its own thin positioning\n * div, so this layer's immediate DOM parent is just its own 0×0/1×1\n * wrapper — not the card next to it. We walk up the DOM until we\n * land on an ancestor that's actually sized like a card, then attach\n * the click listener there.\n *\n * On narrow viewports the sheet switches from a right-edge panel to\n * a bottom sheet (slides up instead of in from the side).\n *\n * Rendered through createPortal on document.body for the same reason\n * as PasswordGate: escapes Framer's transformed breakpoint wrappers\n * (which would hijack position:fixed) while keeping React event\n * delegation intact.\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function BehanceGate(props){const{behanceLink=\"https://www.behance.net/gallery/129341383/Farm-Rio-iOS-App-10\",title=\"A full case study is coming soon.\",body=\"I'm building out the write-up for this project right here in the portfolio. In the meantime, you can see the complete case — screens, process, and outcomes — over on Behance.\",buttonLabel=\"View on Behance\",minContainerSize=60,zIndex=1e3,scrimColor=\"rgba(13, 13, 13, 0.55)\",sheetBackground=\"#FFFFFF\",textColor=\"#0D0D0D\",mutedColor=\"#505050\",accentColor=\"#0D0D0D\",accentTextColor=\"#FFFFFF\"}=props;const isCanvas=RenderTarget.current()===RenderTarget.canvas;const[open,setOpen]=React.useState(false);const[mounted,setMounted]=React.useState(false);const anchorRef=React.useRef(null);const sheetRef=React.useRef(null);const uid=React.useId();React.useEffect(()=>{if(isCanvas)return;setMounted(true);},[isCanvas]);// Intercept clicks anywhere on the card this sits next to, so the\n// sheet opens instead of whatever link/navigation the card has.\nReact.useEffect(()=>{if(isCanvas)return;const root=anchorRef.current;if(!root)return;let container=null;let raf=0;let cleanupClick=null;const attach=()=>{// Walk up past Framer's own instance wrapper(s) — which are\n// sized to this layer (0×0 / 1×1) — until we reach an\n// ancestor that's actually sized like the card.\nlet el=root.parentElement;let hops=0;while(el&&hops<10){const rect=el.getBoundingClientRect();if(rect.width>=minContainerSize&&rect.height>=minContainerSize){break;}el=el.parentElement;hops++;}if(!el)return;container=el;const onClick=e=>{e.preventDefault();e.stopPropagation();setOpen(true);};const previousCursor=container.style.cursor;container.style.cursor=\"pointer\";container.addEventListener(\"click\",onClick,true);cleanupClick=()=>{if(!container)return;container.removeEventListener(\"click\",onClick,true);container.style.cursor=previousCursor;};};// Layout may not be settled the instant this effect runs, so\n// give the browser a frame before measuring ancestor sizes.\nraf=window.requestAnimationFrame(attach);return()=>{window.cancelAnimationFrame(raf);if(cleanupClick)cleanupClick();};},[isCanvas,minContainerSize]);// Lock background scroll while the sheet is visible.\nReact.useEffect(()=>{if(isCanvas||!open)return;const previous=document.body.style.overflow;document.body.style.overflow=\"hidden\";return()=>{document.body.style.overflow=previous;};},[isCanvas,open]);// Move focus into the sheet once it appears.\nReact.useEffect(()=>{if(isCanvas||!open)return;const t=window.setTimeout(()=>{const closeBtn=sheetRef.current?.querySelector(\"button\");closeBtn?.focus();},350);return()=>window.clearTimeout(t);},[isCanvas,open]);const handleClose=()=>setOpen(false);// Esc closes; Tab stays trapped inside the sheet.\nconst handleSheetKeyDown=e=>{if(e.key===\"Escape\"){e.preventDefault();handleClose();return;}if(e.key!==\"Tab\"||!sheetRef.current)return;const focusables=sheetRef.current.querySelectorAll('a[href], button, [tabindex]:not([tabindex=\"-1\"])');if(focusables.length===0)return;const first=focusables[0];const last=focusables[focusables.length-1];if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();}};const bodyFont='\"Instrument Sans\", \"Instrument Sans Variable\", -apple-system, BlinkMacSystemFont, sans-serif';const sheet=/*#__PURE__*/_jsxs(\"div\",{ref:sheetRef,role:\"dialog\",\"aria-modal\":\"true\",\"aria-labelledby\":`${uid}-title`,\"aria-describedby\":`${uid}-body`,onKeyDown:handleSheetKeyDown,className:\"bg-gate-sheet\",style:{position:\"absolute\",top:0,right:0,bottom:0,width:\"100%\",maxWidth:560,background:sheetBackground,color:textColor,display:\"flex\",flexDirection:\"column\",padding:\"32px 48px 48px 48px\",boxSizing:\"border-box\",boxShadow:\"-24px 0 64px rgba(13, 13, 13, 0.18)\",animation:isCanvas?\"none\":\"bgSlideIn 0.45s cubic-bezier(0.32, 0.72, 0.24, 1) both\",fontFamily:bodyFont,overflowY:\"auto\"},children:[/*#__PURE__*/_jsx(\"button\",{type:\"button\",onClick:handleClose,\"aria-label\":\"Close\",style:{alignSelf:\"flex-end\",width:40,height:40,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",border:\"none\",background:\"transparent\",color:textColor,cursor:\"pointer\",marginRight:-12},children:/*#__PURE__*/_jsx(\"svg\",{width:\"18\",height:\"18\",viewBox:\"0 0 18 18\",fill:\"none\",\"aria-hidden\":\"true\",children:/*#__PURE__*/_jsx(\"path\",{d:\"M2 2L16 16M16 2L2 16\",stroke:\"currentColor\",strokeWidth:\"2\",strokeLinecap:\"round\"})})}),/*#__PURE__*/_jsx(\"h2\",{id:`${uid}-title`,style:{fontFamily:bodyFont,fontWeight:600,fontSize:40,lineHeight:1.15,letterSpacing:\"-0.01em\",margin:0,marginTop:24,marginBottom:12,color:textColor},children:title}),/*#__PURE__*/_jsx(\"p\",{id:`${uid}-body`,style:{fontSize:16,lineHeight:1.55,margin:0,marginBottom:40,color:mutedColor},children:body}),/*#__PURE__*/_jsxs(\"a\",{href:behanceLink,target:\"_blank\",rel:\"noopener noreferrer\",\"aria-label\":`${buttonLabel} (opens in a new tab)`,style:{fontFamily:bodyFont,fontSize:16,fontWeight:600,width:\"100%\",height:56,border:\"none\",borderRadius:999,background:accentColor,color:accentTextColor,cursor:\"pointer\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",gap:8,textDecoration:\"none\",boxSizing:\"border-box\"},children:[/*#__PURE__*/_jsx(\"span\",{children:buttonLabel}),/*#__PURE__*/_jsxs(\"svg\",{width:\"16\",height:\"16\",viewBox:\"0 0 24 24\",fill:\"none\",\"aria-hidden\":\"true\",style:{flexShrink:0},children:[/*#__PURE__*/_jsx(\"path\",{d:\"M13 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\",stroke:\"currentColor\",strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M15 3h6v6\",stroke:\"currentColor\",strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M10 14 21 3\",stroke:\"currentColor\",strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\"})]})]}),/*#__PURE__*/_jsx(\"style\",{children:`\n                @keyframes bgSlideIn {\n                    from { transform: translateX(100%); }\n                    to { transform: translateX(0); }\n                }\n                @keyframes bgSlideInUp {\n                    from { transform: translateY(100%); }\n                    to { transform: translateY(0); }\n                }\n                @media (prefers-reduced-motion: reduce) {\n                    .bg-gate-sheet,\n                    .bg-gate-sheet * { animation: none !important; }\n                }\n                @media (max-width: 620px) {\n                    .bg-gate-sheet {\n                        top: auto !important;\n                        left: 0 !important;\n                        right: 0 !important;\n                        bottom: 0 !important;\n                        width: 100% !important;\n                        max-width: 100% !important;\n                        max-height: 85vh !important;\n                        border-top-left-radius: 20px !important;\n                        border-top-right-radius: 20px !important;\n                        padding: 24px 24px 40px 24px !important;\n                        box-shadow: 0 -24px 64px rgba(13, 13, 13, 0.18) !important;\n                        animation: bgSlideInUp 0.45s cubic-bezier(0.32, 0.72, 0.24, 1) both !important;\n                    }\n                    .bg-gate-sheet h2 { font-size: 32px !important; }\n                }\n            `})]});if(isCanvas){// Static preview that fits the layer on the canvas.\nreturn /*#__PURE__*/_jsx(\"div\",{ref:anchorRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",minWidth:32,minHeight:32,background:\"rgba(13, 13, 13, 0.06)\",border:\"1px dashed rgba(13, 13, 13, 0.3)\",borderRadius:8,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",fontFamily:bodyFont,fontSize:10,color:mutedColor,textAlign:\"center\",boxSizing:\"border-box\",padding:4},children:\"Behance gate\"});}return /*#__PURE__*/_jsx(\"div\",{ref:anchorRef,style:{width:0,height:0,overflow:\"visible\"},children:mounted&&open&&/*#__PURE__*/createPortal(/*#__PURE__*/_jsx(\"div\",{style:{position:\"fixed\",inset:0,zIndex:zIndex,background:scrimColor,backdropFilter:\"blur(16px)\",WebkitBackdropFilter:\"blur(16px)\"},onClick:e=>{if(e.target===e.currentTarget)handleClose();},children:sheet}),document.body)});}addPropertyControls(BehanceGate,{behanceLink:{type:ControlType.Link,title:\"Behance link\",defaultValue:\"https://www.behance.net/gallery/129341383/Farm-Rio-iOS-App-10\"},title:{type:ControlType.String,title:\"Title\",defaultValue:\"A full case study is coming soon.\"},body:{type:ControlType.String,title:\"Body\",displayTextArea:true,defaultValue:\"I'm building out the write-up for this project right here in the portfolio. In the meantime, you can see the complete case — screens, process, and outcomes — over on Behance.\"},buttonLabel:{type:ControlType.String,title:\"Button\",defaultValue:\"View on Behance\"},minContainerSize:{type:ControlType.Number,title:\"Min target size\",defaultValue:60,min:10,max:400,step:1,displayStepper:true},zIndex:{type:ControlType.Number,title:\"Z-index\",defaultValue:1e3,min:1,max:99999,step:1,displayStepper:true},scrimColor:{type:ControlType.Color,title:\"Scrim\",defaultValue:\"rgba(13, 13, 13, 0.55)\"},sheetBackground:{type:ControlType.Color,title:\"Sheet bg\",defaultValue:\"#FFFFFF\"},textColor:{type:ControlType.Color,title:\"Text\",defaultValue:\"#0D0D0D\"},mutedColor:{type:ControlType.Color,title:\"Muted text\",defaultValue:\"#505050\"},accentColor:{type:ControlType.Color,title:\"Button bg\",defaultValue:\"#0D0D0D\"},accentTextColor:{type:ControlType.Color,title:\"Button text\",defaultValue:\"#FFFFFF\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BehanceGate\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BehanceGate.map"],"mappings":"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"}