{"version":3,"file":"PhotoStrip.CBSRmxnG.mjs","names":["React.useRef","React.useState","React.useMemo"],"sources":["https:/framerusercontent.com/modules/Z8ukNJRoV7woV5Urq0kB/UzF8qrbfCxRvzrPEce5a/PhotoStrip.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";const DESKTOP_MQ=\"(min-width: 810px)\";let SEQ=0;/**\n * \"This is River Oaks\" photo strip: up to 4 tiles.\n *\n * Photos now show as shot. The blue-green wash and the grayscale it sat on\n * top of were both removed at the client's request; a grayscale-until-hover\n * treatment also does nothing on touch, where most of this traffic is.\n *\n * On a phone the auto-fit track only ever fitted one column, so four 4:5\n * tiles stacked into roughly 1,600px of scrolling. The 2026-08-18 review\n * asked for these to take up far less of the screen, so the phone layout is\n * a square 2x2 grid — same four photos, about a quarter of the height.\n *\n * Image URLs are plain string props so the MCP can set them. IO-staggered\n * reveal, transform/opacity only, static on mobile.\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n * @framerIntrinsicWidth 1100\n */export default function PhotoStrip(props){const{img1,img2,img3,img4,radius,mobileColumns=2,style}=props;const isCanvas=RenderTarget.current()===RenderTarget.canvas;const ref=React.useRef(null);const[shown,setShown]=React.useState(true);const urls=[img1,img2,img3,img4].filter(Boolean);// Scoped so two strips on one page can't fight over the same rules.\nconst uid=React.useMemo(()=>`ro-strip-${++SEQ}`,[]);React.useLayoutEffect(()=>{if(isCanvas||typeof window===\"undefined\")return;if(!window.matchMedia(DESKTOP_MQ).matches)return;if(window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches)return;if(!(\"IntersectionObserver\"in window))return;setShown(false);const io=new IntersectionObserver(entries=>{if(entries.some(e=>e.isIntersecting)){setShown(true);io.disconnect();}},{threshold:.15});if(ref.current)io.observe(ref.current);return()=>io.disconnect();},[isCanvas]);return /*#__PURE__*/_jsxs(\"div\",{ref:ref,className:uid,style:{width:\"100%\",display:\"grid\",gridTemplateColumns:\"repeat(auto-fit, minmax(min(200px, 100%), 1fr))\",gap:16,...style},children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                @media (max-width: 809px) {\n                    .${uid} {\n                        grid-template-columns: repeat(${Math.max(1,Number(mobileColumns)||2)}, 1fr) !important;\n                        gap: 10px !important;\n                    }\n                    .${uid} > div { aspect-ratio: 1 / 1 !important; }\n                }\n            `}),urls.map((u,i)=>/*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",aspectRatio:\"4 / 5\",borderRadius:radius,overflow:\"hidden\",background:\"#1f2933\",opacity:shown?1:0,transform:shown?\"none\":\"translateY(24px)\",transition:`opacity 0.5s ease ${i*.09}s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) ${i*.09}s`},children:/*#__PURE__*/_jsx(\"img\",{src:u,alt:\"\",loading:\"lazy\",style:{position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",objectFit:\"cover\"}})},i))]});}addPropertyControls(PhotoStrip,{img1:{type:ControlType.String,title:\"Image 1 URL\",defaultValue:\"\"},img2:{type:ControlType.String,title:\"Image 2 URL\",defaultValue:\"\"},img3:{type:ControlType.String,title:\"Image 3 URL\",defaultValue:\"\"},img4:{type:ControlType.String,title:\"Image 4 URL\",defaultValue:\"\"},radius:{type:ControlType.Number,title:\"Radius\",defaultValue:20,min:0,max:40},mobileColumns:{type:ControlType.Number,title:\"Phone Columns\",defaultValue:2,min:1,max:2,step:1,displayStepper:true,description:\"2 gives a compact square 2x2 grid on phones\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PhotoStrip\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\",\"framerIntrinsicWidth\":\"1100\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PhotoStrip.map"],"mappings":"sNAkBG,SAAwB,EAAW,EAAM,CAAC,GAAK,CAAC,OAAK,OAAK,OAAK,OAAK,SAAO,gBAAc,EAAE,SAAO,EAAY,EAAS,EAAa,QAAQ,IAAI,EAAa,OAAa,EAAIA,EAAa,IAAI,EAAO,CAAC,EAAM,GAAUC,EAAe,EAAI,EAAQ,EAAK,CAAC,EAAK,EAAK,EAAK,CAAI,CAAC,CAAC,OAAO,OAAO,EACxR,EAAIC,MAAkB,YAAY,EAAE,IAAM,CAAC,CAAC,EAAud,OAArd,MAA0B,CAA0K,GAAtK,GAAiB,IAAS,QAAsB,CAAC,EAAO,WAAW,CAAU,CAAC,CAAC,SAAkB,EAAO,WAAW,kCAAkC,CAAC,CAAC,SAAkB,EAAE,yBAAyB,GAAQ,OAAO,EAAS,EAAK,EAAE,IAAM,EAAG,IAAI,qBAAqB,GAAS,CAAI,EAAQ,KAAK,GAAG,EAAE,cAAc,IAAG,EAAS,EAAI,EAAE,EAAG,WAAW,EAAG,EAAE,CAAC,UAAU,GAAG,CAAC,EAAyC,OAApC,EAAI,SAAQ,EAAG,QAAQ,EAAI,OAAO,MAAY,EAAG,WAAW,CAAE,EAAE,CAAC,CAAQ,CAAC,EAAsB,EAAM,MAAM,CAAK,MAAI,UAAU,EAAI,MAAM,CAAC,MAAM,OAAO,QAAQ,OAAO,oBAAoB,kDAAkD,IAAI,GAAG,GAAG,CAAK,EAAE,SAAS,CAAc,EAAK,QAAQ,CAAC,SAAS;;uBAEjtB,EAAI;wDAC6B,KAAK,IAAI,EAAE,OAAO,CAAa,GAAG,CAAC,EAAE;;;uBAGtE,EAAI;;aAEd,CAAC,EAAE,EAAK,KAAK,EAAE,IAAiB,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,YAAY,QAAQ,aAAa,EAAO,SAAS,SAAS,WAAW,UAAU,QAAQ,KAAU,UAAU,EAAM,OAAO,mBAAmB,WAAW,qBAAqB,EAAE,IAAI,oDAAoD,EAAE,IAAI,EAAE,EAAE,SAAsB,EAAK,MAAM,CAAC,IAAI,EAAE,IAAI,GAAG,QAAQ,OAAO,MAAM,CAAC,SAAS,WAAW,MAAM,EAAE,MAAM,OAAO,OAAO,OAAO,UAAU,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,yBA3Bpa,IAA4B,IAAiE,EAAO,EAAW,qBAAyB,EAAI,EA2ByR,EAAoB,EAAW,CAAC,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,EAAE,EAAE,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,EAAE,EAAE,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,EAAE,EAAE,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,EAAE,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,GAAG,IAAI,EAAE,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,EAAY,OAAO,MAAM,gBAAgB,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,GAAK,YAAY,6CAA6C,CAAC,CAAC"}