{"version":3,"file":"NavTransparency.Cl2lCgaa.mjs","names":["useState","_Fragment"],"sources":["https:/framerusercontent.com/modules/bpLwaHRAobxTb9DRWVjT/qoMVxCKL6VDBjPs8oviY/NavTransparency.js"],"sourcesContent":["// Homepage header: transparent with a white logo and menu while it sits over the hero,\n// fading to the regular white bar once the first light section (Selected Work) slides up under it.\n// Styles target the Navigation component's closed variants (Desktop / Tablet / Phone),\n// so the open menu always keeps its solid background.\n// When the footer (layer \"Footer Takeover\") rises into the header, it pushes the header up and out of\n// frame; the footer carries its own navigation links. Scrolling back down lets the header slide back in.\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{forwardRef,useEffect,useState}from\"react\";import{RenderTarget}from\"framer\";// Framer can keep hidden copies of a layer for other breakpoints; use the one actually on screen.\nfunction visible(selector){const all=Array.from(document.querySelectorAll(selector));return all.find(el=>el.getClientRects().length>0)??null;}const CLOSED=[\"Desktop\",\"Tablet\",\"Phone\"];const sel=(inner=\"\")=>CLOSED.map(v=>`.zd-nav.zd-clear [data-framer-name=\"${v}\"]${inner}`).join(\", \");const all=(inner=\"\")=>CLOSED.map(v=>`.zd-nav [data-framer-name=\"${v}\"]${inner}`).join(\", \");const CSS=`\n${all()} { transition: background-color 0.4s ease; }\n${all(' [data-framer-name=\"Logo & Title\"]')}, ${all(' [data-framer-name=\"Menu Trigger\"]')} { transition: filter 0.4s ease; }\n${sel()} { background-color: transparent !important; }\n${sel(' [data-framer-name=\"Logo & Title\"]')}, ${sel(' [data-framer-name=\"Menu Trigger\"]')} { filter: brightness(0) invert(1); }\n`;export function withTransparentOverHero(Component){return /*#__PURE__*/forwardRef(function TransparentOverHero(props,ref){// Start clear so the first paint (server HTML) already matches the top of the page.\nconst[clear,setClear]=useState(true);const isCanvas=RenderTarget.current()===RenderTarget.canvas;useEffect(()=>{if(isCanvas||typeof window===\"undefined\")return;let frame=0;const update=()=>{frame=0;const header=visible(\".zd-nav\");const headerH=header?header.offsetHeight||80:80;// Footer pushes the header out: once its top edge touches the header's bottom edge,\n// the header moves up with it until it is fully out of view. Uses the CSS translate\n// property so it never fights Framer's own transforms on the layer.\nconst footer=visible('[data-framer-name=\"Footer Takeover\"]');const footerTop=footer?footer.getBoundingClientRect().top:Infinity;const push=Math.max(-headerH,Math.min(0,footerTop-headerH));document.querySelectorAll(\".zd-nav\").forEach(el=>{el.style.translate=push?`0px ${push}px`:\"\";});// The hero is pinned and the first content section slides up over it.\n// Stay clear until that section reaches the header, then switch to the white bar.\n// First visible light section after the dark intro.\nconst next=[\"Selected Work\",\"Services\"].map(n=>visible(`[data-framer-name=\"${n}\"]`)).filter(el=>!!el).sort((a,b)=>a.getBoundingClientRect().top-b.getBoundingClientRect().top)[0]??null;if(next){setClear(next.getBoundingClientRect().top>headerH);return;}// Fallback for pages without that section: clear while the hero is behind the header.\nconst hero=document.querySelector('[data-framer-name=\"Hero Section\"]');const heroEnd=hero?hero.getBoundingClientRect().bottom:0;setClear(heroEnd>headerH);};const onScroll=()=>{if(!frame)frame=requestAnimationFrame(update);};update();window.addEventListener(\"scroll\",onScroll,{passive:true});window.addEventListener(\"resize\",onScroll);return()=>{window.removeEventListener(\"scroll\",onScroll);window.removeEventListener(\"resize\",onScroll);if(frame)cancelAnimationFrame(frame);};},[]);if(isCanvas)return /*#__PURE__*/_jsx(Component,{...props,ref:ref});const className=[props.className,\"zd-nav\",clear?\"zd-clear\":\"\"].filter(Boolean).join(\" \");return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"style\",{children:CSS}),/*#__PURE__*/_jsx(Component,{...props,ref:ref,className:className})]});});}// Case study pages: the nav sits on the dark page as a black bar with a white logo and menu.\nconst DARK_CSS=`\n${CLOSED.map(v=>`.zd-nav.zd-dark [data-framer-name=\"${v}\"]`).join(\", \")} { background-color: #000 !important; }\n${CLOSED.map(v=>`.zd-nav.zd-dark [data-framer-name=\"${v}\"] [data-framer-name=\"Logo & Title\"], .zd-nav.zd-dark [data-framer-name=\"${v}\"] [data-framer-name=\"Menu Trigger\"]`).join(\", \")} { filter: brightness(0) invert(1); }\n`;export function withDarkNav(Component){return /*#__PURE__*/forwardRef(function DarkNav(props,ref){if(RenderTarget.current()===RenderTarget.canvas)return /*#__PURE__*/_jsx(Component,{...props,ref:ref});const className=[props.className,\"zd-nav\",\"zd-dark\"].filter(Boolean).join(\" \");return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"style\",{children:DARK_CSS}),/*#__PURE__*/_jsx(Component,{...props,ref:ref,className:className})]});});}\nexport const __FramerMetadata__ = {\"exports\":{\"withTransparentOverHero\":{\"type\":\"reactHoc\",\"name\":\"withTransparentOverHero\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withDarkNav\":{\"type\":\"reactHoc\",\"name\":\"withDarkNav\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./NavTransparency.map"],"mappings":"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"}