Vimeo Showcase Gallery

\r\n

\r\n \r\n \r\n

\r\n

\r\n\r\n \r\n\r\n \r\n\r\n"},"parentType":"container","style":{"margin":[["top","0px"],["bottom","0%"]],"padding":[["top","0px"],["bottom","800px"],["left","0px"],["right","0px"]],"transform":{"rotateY":"0deg","translateY":"0%","translateX":"0%"},"overflowX":"visible","overflowY":"visible","zIndex":"100"},"containerItem":{"style":{"alignSelf":""}},"media":{"mobile":{"style":{"padding":[["top","10px"],["bottom","10px"],["left","0px"],["right","0px"]],"overflowX":"visible","overflowY":"visible"}},"tablet":{"style":{"padding":[["top","10px"],["bottom","700px"],["left","0px"],["right","0px"]],"overflowX":"hidden","overflowY":"hidden"}}},"links":{"items":[{"id":"4s2g7wez","label":"Home7","icon":{"visible":"none","icon":null},"settings":{"hrefType":"page"},"url":"68c6e970d3f152002c9ada88"},{"id":"mevpr262","label":"Portfolio","icon":{"visible":"none","icon":null},"settings":{"hrefType":"page"},"url":"68cb429688d5ec005c6da70c"},{"id":"h6kpjks4","label":"Owners","icon":{"visible":"none","icon":null},"settings":{"hrefType":"page"},"url":"68c87d7994970900bc245f89"},{"id":"kh90s5ii","label":"Feedback","icon":{"visible":"none","icon":null},"settings":{"hrefType":"page"},"url":"68b974e8f0b0e60167085839"},{"id":"gtdemb6m","label":"FAQ","icon":{"visible":"none","icon":null},"settings":{"hrefType":"page"},"url":"68c37fcced3b760050075844"},{"id":"2suuvmpu","label":"Contact","icon":{"visible":"none","icon":null},"settings":{"hrefType":"page"},"url":"68caa1180bb3630050482eb5"}]}}},"vo6r682e":{"name":"Shuffle Repeate","id":"vo6r682e","data":{"name":"Section","content":[{"name":"Container","holder":"container","type":"container","content":[{"name":"Title","titleType":"h1","type":"heading","_elType":"ELEMENT","component_path":"title","content":"

\n","settings":{"dynamicText":{"_enabled":true}},"dynamicText":{"items":[{"id":"hfgvo35u","content":"

Click, shuffle, repeat.

\n"},{"id":"hfgvo35i","content":"

Click twice, shuffle twice.

\n"}],"options":{"typeSpeed":"70","loop":false,"backSpeed":"20","showCursor":true,"cursorChar":true},"style":{"backgroundColor":""}},"style":{"margin":[["top","8px"],["bottom","8px"]],"color":"#fcb12b","fontSize":"20px"},"id":"uyswdsxo"}],"id":"cmlug7nc","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","10px"],["bottom","0px"]],"flexBasis":"100%","alignItems":"center","margin":[["bottom","0px"]]},"animation":{"type":"","duration":"1000ms"}}],"id":"ur34009h","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}},"style":{"margin":[["top","0px"],["bottom","-60px"]],"overflowX":"visible","overflowY":"visible","padding":[["bottom","0px"]]}}},"f11tobnf":{"name":"Milestones","id":"f11tobnf","data":{"type":"code","name":"Custom Code","_elType":"ELEMENT","component_path":"code","id":"uml00ire","advanced":{"html":"\r\n\r\n\r\n\r\n

\r\n

\r\n \r\n

\r\n

\r\n\r\n\r\n"},"style":{"zIndex":"50","overflowX":"hidden","overflowY":"hidden","margin":[["left","0px"],["right","0px"],["bottom","0px"],["top","0px"]],"padding":[["top","100px"],["bottom","100px"],["left","0px"],["right","0px"]]},"parentType":"container"}},"voxsy3d4":{"name":"Our Milstones","id":"voxsy3d4","data":{"name":"Title","titleType":"h1","type":"heading","_elType":"ELEMENT","component_path":"title","content":"

Our Milestones

\n","settings":{"dynamicText":{"_enabled":false}},"dynamicText":{"items":[{"id":"gfa466a7","content":"

Our Milestones

\n"},{"id":"iqevazjs","content":"

Our Timeline

\n","settings":{"dynamicText":{"_enabled":true}},"dynamicText":{"items":[{"id":"xuqs7i2l","content":"

Meet the Team Driving Fine Line

\n"},{"id":"hfgvo35u","content":"

Meet The Owners

\n"}],"options":{"typeSpeed":"40","loop":false,"backSpeed":"40","showCursor":true,"cursorChar":true}},"style":{"margin":[["top","0px"],["bottom","0px"]],"color":{"key":"--color-1","value":"#FCB12B"},"fontSize":"35px","lineHeight":"1","textAlign":"center"},"id":"3g92lph2","media":{"mobile":{"style":{"fontSize":"19px","margin":[["top","0px"],["bottom","8px"]]}},"tablet":{"style":{"fontSize":"25px"}}},"parentType":"column"}},"5ohm1nzs":{"name":"Social","id":"5ohm1nzs","data":{"type":"socialIcon","name":"Social Icon","_elType":"ELEMENT","component_path":"socialIcon","settings":{"socialIcons":{"brandType":"custom"}},"socialIcons":{"gap":"10px","color":"","shape":"circle","type":"filled","size":"32px","items":[{"id":"5iiwit45","label":"Facebook","url":"https://vimeo.com/finelineprodleb","target":"_blank"},{"id":"1nka1vrb","label":"Instagram","url":"https://www.instagram.com/fineline.lb/","target":"_blank"},{"id":"tg370mk5","label":"Youtube","url":"https://www.youtube.com/@FineLine-lb","target":"_blank"},{"id":"k0ndseut","label":"Whatsapp","url":"https://wa.me/+96179385921","target":"_blank"},{"id":"11w7n0ox","label":"Tiktok","url":"https://www.tiktok.com/@fineline.lb","target":"_blank"}],"iconStyle":{"fill":"#FCFDFD","size":{"height":"32px","width":"32px","min-width":"32px"}}},"style":{"display":"flex","flexDirection":"row","listStyle":"none","lineHeight":"1","margin":[["top","30px"],["bottom","0px"],["left","5px"],["right","0px"]],"padding":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"justifyContent":"center"},"id":"uwh8hmp0","media":{"mobile":{"style":{"justifyContent":"center"}},"tablet":{"style":{"justifyContent":"center"}}},"parentType":"column"}},"frr6858i":{"name":"Portfolio Button ","id":"frr6858i","data":{"type":"button","name":"Button","_elType":"ELEMENT","content":"Portfolio","settings":{"buttonType":"text-only","hrefType":"page"},"pseudoClass":{"hover":{"style":{"color":"#ffffff","backgroundColor":"#fcb12b","transform":{"scale":"1"},"boxShadow":{"type":"none"}},"icon":{"color":"#ffffff"}}},"style":{"padding":[["top","15px"],["bottom","15px"],["left","15px"],["right","15px"]],"textDecoration":{"type":"none"},"justifyContent":"center","borderRadius":"11px 11px 11px 11px","border":[["width","0px"],["style",""],["color",""]],"backgroundColor":{"key":"--color-1","value":"#FDBB30"},"fontSize":"16px","color":"#000000","lineHeight":"15px","margin":[["top","0px"],["bottom","0px"]],"flexDirection":"row-reverse","textTransform":"uppercase","fontWeight":"600","boxShadow":{"type":"none","color":"#fdbb3080","spread":"1px","blur":"4px"},"transform":{"rotateZ":"0deg"},"transition":"50ms","__backgroundType":"color"},"component_path":"button","id":"427g4c85","wrapper":{"textAlign":"center"},"icon":{"color":"#000000","icon":null,"gap":"6px","size":"20px","visible":"none","stroke":"1.5"},"animation":{"type":"","easing":"ease-in-out-quart","duration":"2500ms","delay":"800ms","offset":"300px","once":"false"},"media":{"mobile":{"style":{"margin":[["top","20px"],["left","100px"],["right","100px"]],"fontSize":"16px","textTransform":"uppercase","width":"100%","padding":[["top","20px"],["bottom","20px"],["left","20px"],["right","20px"]]}},"tablet":{"wrapper":{"textAlign":"center"},"style":{"padding":[["top","20px"],["bottom","20px"],["left","20px"],["right","20px"]],"margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]]}}},"attr":{"href":"68c7a6830e389200387a09f7"},"parentType":"container"}},"24hnym2o":{"name":"Clients Logos","id":"24hnym2o","data":{"type":"code","name":"Clients Logos","_elType":"ELEMENT","component_path":"code","id":"mxaogqff","advanced":{"html":"\r\n\r\n\r\n \r\n \r\n Carousel with Lightbox\r\n \r\n\r\n\r\n\r\n

\r\n

\r\n\r\n

\r\n \r\n \r\n $\"Magnified$ \r\n \r\n

\r\n\r\n \r\n\r\n\r\n","js":"","customStyle":{"general":""}},"style":{"overflowX":"visible","overflowY":"visible","margin":[["bottom","0px"],["top","0px"],["right","0px"],["left","0px"]],"padding":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"zIndex":"100","border":[["width","0px"],["style","solid"],["color",""]],"boxShadow":{"type":"none"},"transform":{"scale":"1.2","rotateX":"-5deg"}},"animation":{"type":"","easing":"ease-in-out","duration":"2000ms","delay":"0ms","once":"false","mirror":"false","offset":"0px"},"parentType":"container","media":{"tablet":{"style":{"overflowX":"visible","overflowY":"visible","transform":{"scale":"1"}}},"mobile":{"style":{"overflowX":"visible","overflowY":"visible","border":[["width","0px"],["style","solid"],["color",""]],"zIndex":"100","margin":[["bottom","0px"],["top","0px"],["right","0px"],["left","0px"]],"padding":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]]}}}}},"t4oan5av":{"name":"contact form 03","id":"t4oan5av","data":{"type":"code","name":"Custom Code","_elType":"ELEMENT","component_path":"code","id":"v5rvd060","advanced":{"html":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

\r\n

\r\n\r\n

\r\n

Get in Touch

\r\n

We'd love to hear from you. Fill out the form below.

\r\n\r\n

\r\n

\r\n Full Name\r\n \r\n

\r\n\r\n

\r\n Email Address\r\n \r\n

\r\n\r\n

\r\n Subject\r\n \r\n

\r\n\r\n

\r\n Message\r\n \r\n

\r\n \r\n

\r\n \r\n \r\n Subscribe to our newsletter\r\n \r\n \r\n

\r\n\r\n \r\n\r\n \r\n

\r\n

\r\n\r\n

\r\n

\r\n $\"FineLine$ \r\n

\r\n

Contact Information

\r\n

\r\n \r\n \r\n \r\n info@finelineprod.com\r\n \r\n

\r\n

\r\n \r\n \r\n \r\n +961 1 741 744\r\n \r\n

\r\n

\r\n \r\n \r\n \r\n +961 3 061 979\r\n \r\n

\r\n

\r\n \r\n \r\n \r\n \r\n 204, Matta Bldg,
Makdessi St, Beirut\r\n \r\n

\r\n

\r\n\r\n

\r\n

\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n

\r\n

\r\n\r\n

\r\n \r\n

\r\n

","js":"document.addEventListener('DOMContentLoaded', function() {\r\n const form = document.getElementById('contact-form');\r\n const overlay = document.getElementById('success-overlay');\r\n const closeBtn = document.getElementById('close-modal-btn');\r\n\r\n async function handleSubmit(event) {\r\n event.preventDefault();\r\n const data = new FormData(event.target);\r\n \r\n fetch(event.target.action, {\r\n method: form.method,\r\n body: data,\r\n headers: {\r\n 'Accept': 'application/json'\r\n }\r\n }).then(response => {\r\n if (response.ok) {\r\n overlay.classList.add('visible');\r\n form.reset(); \r\n } else {\r\n response.json().then(data => {\r\n if (Object.hasOwn(data, 'errors')) {\r\n console.error(data[\"errors\"].map(error => error[\"message\"]).join(\", \"));\r\n } else {\r\n console.error('Oops! There was a problem submitting your form.');\r\n }\r\n })\r\n }\r\n }).catch(error => {\r\n console.error('Oops! There was a problem submitting your form.', error);\r\n });\r\n }\r\n\r\n form.addEventListener(\"submit\", handleSubmit);\r\n\r\n closeBtn.addEventListener('click', () => {\r\n overlay.classList.remove('visible');\r\n });\r\n \r\n // Copy to clipboard\r\n const copyButtons = document.querySelectorAll('.copy-btn');\r\n copyButtons.forEach(button => {\r\n const originalIcon = button.innerHTML;\r\n\r\n button.addEventListener('click', () => {\r\n const valueToCopy = button.dataset.copyValue;\r\n try {\r\n const textArea = document.createElement('textarea');\r\n textArea.value = valueToCopy;\r\n document.body.appendChild(textArea);\r\n textArea.select();\r\n document.execCommand('copy');\r\n document.body.removeChild(textArea);\r\n\r\n button.innerHTML = '';\r\n button.classList.add('text-green-500');\r\n button.classList.remove('text-gray-400');\r\n\r\n setTimeout(() => {\r\n button.innerHTML = originalIcon;\r\n button.classList.remove('text-green-500');\r\n button.classList.add('text-gray-400');\r\n }, 2000);\r\n } catch (err) {\r\n console.error('Failed to copy text: ', err);\r\n }\r\n });\r\n });\r\n});"},"style":{"overflowX":"hidden","overflowY":"hidden"},"parentType":"container"}},"8q8mzcek":{"name":"Fine Line Social Media","id":"8q8mzcek","data":{"type":"code","name":"Custom Code","_elType":"ELEMENT","component_path":"code","id":"qx6sz0v6","advanced":{"html":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n"},"parentType":"container"}},"r80irn61":{"name":"Portfolio Button","id":"r80irn61","data":{"type":"button","name":"Portfolio Button","_elType":"ELEMENT","content":"Portfolio","settings":{"buttonType":"icon-text","hrefType":"page"},"pseudoClass":{"hover":{"style":{"color":"#ffffff","backgroundColor":"#fcb12bb3","transform":{"scale":"1.02","rotateZ":"0deg"},"boxShadow":{"type":"none"},"border":[["width",""],["style","solid"],["color","#ffc152"]]},"icon":{"color":"#ffffff"}}},"style":{"padding":[["top","13px"],["bottom","13px"],["left","13px"],["right","13px"]],"textDecoration":{"type":"none"},"justifyContent":"center","borderRadius":"20px 20px 20px 20px","border":[["width","1px"],["style","solid"],["color","#838383"]],"backgroundColor":"#030303b3","fontSize":"16px","color":"#ffffff","lineHeight":"15px","margin":[["top",""]],"flexDirection":"row-reverse","textTransform":"uppercase","fontWeight":"600","boxShadow":{"type":"none","color":"#fdbb3080","spread":"1px","blur":"4px"},"transform":{"rotateZ":"0deg","scale":"0.8"},"transition":"500ms","__backgroundType":"color"},"component_path":"button","id":"ujj8ppzg","wrapper":{"textAlign":"center"},"icon":{"color":"#000000","icon":null,"gap":"6px","size":"20px","visible":"none","stroke":"1.5"},"animation":{"type":"","easing":"ease-in-out","duration":"2000ms","once":"false","offset":"0px","delay":"2000ms"},"media":{"mobile":{"style":{"margin":[["top","0px"],["left","0px"],["bottom","0px"],["right","0px"]],"fontSize":"16px","textTransform":"uppercase","width":"auto","padding":[["top","10px"],["bottom","10px"],["left","10px"],["right","10px"]],"transform":{"scale":"0.9"}}},"tablet":{"wrapper":{"textAlign":"center"},"style":{"padding":[["top","10px"],["bottom","10px"],["left","10px"],["right","10px"]],"textTransform":"uppercase","transform":{"scale":"0.9"},"overflowX":"hidden","overflowY":"hidden"}}},"attr":{"href":"68d259096f31060012c838cb"},"parentType":"container","advanced":{"customStyle":{"general":""}}}},"71b9g6ma":{"name":"top links","id":"71b9g6ma","data":{"type":"links","name":"Links","_elType":"ELEMENT","component_path":"links","links":{"gap":"17px","icon":{"gap":"5px"},"style":{"textDecoration":{"type":"none"},"fontSize":"16px","color":"#ffffff"},"items":[{"id":"4s2g7wez","label":"Home","icon":{"visible":"none","icon":null},"settings":{"hrefType":"page"},"url":"68cccc82ec58c500126b83e4"},{"id":"zz6nyzut","label":"Portfolio","icon":{"visible":"none","icon":null},"settings":{"hrefType":"page"},"url":"68d259096f31060012c838cb"},{"id":"h6kpjks4","label":"Partners","icon":{"visible":"none","icon":null},"settings":{"hrefType":"page"},"url":"68f17781ce081000451ea650"},{"id":"kh90s5ii","label":"Feedback","icon":{"visible":"none","icon":null},"settings":{"hrefType":"page"},"url":"68d0ed188cc179002165136e"},{"id":"gtdemb6m","label":"FAQ","icon":{"visible":"none","icon":null},"settings":{"hrefType":"page"},"url":"68d0ebc78cc1790021650560"},{"id":"359relej","label":"Studio","url":"68f18c7fce0810004520413b","target":"","settings":{"hrefType":"page"}},{"id":"2suuvmpu","label":"Social","icon":{"visible":"none","icon":null},"settings":{"hrefType":"page"},"url":"68caa86f0bb363005048b31f"},{"id":"w81as9ef","label":"Portfolio PDF","url":"https://cdn.cmsfly.com/6894ac6dc19c7b0021803999/documents/2025-FineLineProfile-HWtAg.pdf","target":"_blank","icon":{"icon":{"type":"font-awesome","prefix":"fas","iconName":"file-pdf"},"color":"#f8f4f4","visible":"font-awesome","size":"17px"}},{"id":"wk1rsjw2","label":"Contact","icon":{"visible":"none","icon":null},"settings":{"hrefType":"page"},"url":"68df501e4fa4270013b3354b"}]},"id":"f2k0ygst","version":"2.0.0","style":{"justifyContent":"center","overflowX":"visible","margin":[["right","0px"],["top","0px"],["left","0px"],["bottom","0px"]],"flexDirection":"row","alignItems":"flex-start","transition":"600ms","padding":[["top","0px"],["right","0px"],["left","0px"],["bottom","0px"]],"fontFamily":"'Inter',sans-serif"},"pseudoClass":{"hover":{"links":{"style":{"color":"#fcb12b","textDecoration":{"type":"none"}}},"style":{"transform":{"scale":"1.1"}}}},"media":{"mobile":{"style":{"alignItems":"center","justifyContent":"center","margin":[["right","0px"],["top","0px"],["left","0px"],["bottom","0px"]],"padding":[["top","8px"],["bottom","8px"],["left","0px"],["right","0px"]]},"links":{"style":{"fontSize":"17px"},"icon":{"style":{"fontSize":"14px"}}}},"tablet":{"style":{"justifyContent":"center","padding":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"borderRadius":"0px 0px 0px 0px"},"links":{"style":{"fontSize":"16px"}}}},"advanced":{"customStyle":{"general":""}},"settings":{"hideOn":""},"parentType":"container"}},"0v5sfta9":{"name":"Clients Logos Section","id":"0v5sfta9","data":{"name":"Portfolio Button","content":[{"name":"Partners Who Believe..","holder":"root","type":"container","content":[],"id":"sd46wkan","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","0px"],["left","0px"],["right","0px"],["bottom","0px"]],"flexBasis":"100%","justifyContent":"center","margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"width":"","zIndex":"50"},"media":{"mobile":{"style":{"padding":[["top","0px"],["left","0px"],["right","0px"],["bottom","0px"]],"margin":[["top","20px"],["bottom","0px"],["left","0px"],["right","0px"]],"overflowX":"visible","overflowY":"visible"}},"tablet":{"style":{"margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"alignItems":"flex-start","overflowX":"hidden","overflowY":"hidden"}}},"animation":{"type":"","duration":"2000ms","delay":"400ms","easing":"ease-in-out","offset":"200px","mirror":"false"}}],"id":"074aqmno","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}},"style":{"margin":[["bottom","0px"],["top","0px"],["left","0px"],["right","0px"]],"overflowX":"hidden","overflowY":"hidden","padding":[["bottom","0px"],["top","0px"],["left","0px"],["right","0px"]],"transform":{"translateX":"0%"},"zIndex":"100"},"media":{"tablet":{"style":{"overflowX":"hidden","overflowY":"hidden","margin":[["bottom","10px"],["top","0px"],["left","-30px"],["right","-30px"]]}},"mobile":{"style":{"overflowX":"hidden","overflowY":"hidden","margin":[["bottom","0px"],["top","0px"],["left","-30px"],["right","-30px"]],"padding":[["bottom","0px"],["top","0px"],["left","0px"],["right","0px"]]}}},"attr":{"customClass":[]},"advanced":{"customStyle":{"general":""}},"frames":{"top":{"flip":""}}}},"7uivtd6k":{"name":"Footer with SM","id":"7uivtd6k","data":{"name":"Footer","content":[{"name":"Container","holder":"root","type":"container","content":[{"name":"Container","media":{"mobile":{"style":{"flexBasis":"100%","padding":[["top","0px"],["bottom","0px"]]}}},"holder":"container","type":"container","content":[{"type":"code","name":"Custom Code","_elType":"ELEMENT","component_path":"code","id":"egutm4j8","advanced":{"html":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n"},"style":{"overflowX":"visible","overflowY":"visible","margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"padding":[["right","0px"],["left","0px"],["bottom","0px"],["top","0px"]]}}],"id":"vmtw87a4","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","0px"],["bottom","0px"],["right","0px"],["left","0px"]],"flexBasis":"100%","alignItems":"center","justifyContent":"center","margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]]},"configuration":{"globalWidth":true}}],"id":"6vu6de4v","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","0px"],["left","0px"],["right","0px"],["bottom","20px"]],"flexBasis":"100%","justifyContent":"center","width":"100%","alignItems":"flex-start","margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"minHeight":"0px"},"media":{"mobile":{"style":{"padding":[["top","0px"],["left","40px"],["right","40px"],["bottom","20px"]]}}}}],"id":"dqg52jw9","type":"section","_elType":"SECTION","component_path":"section","style":{"padding":[["top","0px"],["bottom","0px"],["right","0px"],["left","0px"]],"backgroundColor":"","__backgroundType":"color","backgroundImage":{"gradient":"","advancedGradient":{"gradientString":"linear-gradient(90deg, rgba(2,0,36,1) 0%,rgba(2,51,89,1) 24%,rgba(1,106,146,1) 50%,rgba(1,131,172,1) 62%,rgba(0,189,231,1) 89%,rgba(0,212,255,1) 100%)","markers":[{"color":"rgba(2,0,36,1)","position":0},{"color":"rgba(2,51,89,1)","position":24},{"color":"rgba(1,106,146,1)","position":50},{"color":"rgba(1,131,172,1)","position":62},{"color":"rgba(0,189,231,1)","position":89},{"color":"rgba(0,212,255,1)","position":100}],"type":"linear-gradient","radial_shape":"circle at","angle":"90deg","centerX":"50%","centerY":"50%"}},"__gradientType":"simple","margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"overflowY":"hidden","overflowX":"hidden"},"frames":{"top":{"frameId":0,"color":"#000000","height":"20px","flip":"rotateY(180deg)"},"corner":{"frameId":0},"bottom":{"frameId":0,"height":"20px"}},"media":{"mobile":{"style":{"padding":[["top","0px"],["bottom","0px"],["right","0px"],["left","0px"]],"margin":[["top","0px"],["bottom","-30px"],["left","0px"],["right","0px"]]}}},"settings":{"hideOn":""}}},"hbhmv3wu":{"name":"Home Text","id":"hbhmv3wu","data":{"name":"Container","media":{"mobile":{"style":{"flexBasis":"100%","margin":[["right","0px"],["left","0px"],["bottom","0px"],["top","0px"]],"padding":[["top","10px"],["bottom","10px"],["right","10px"],["left","10px"]]}},"tablet":{"style":{"overflowX":"hidden","overflowY":"hidden","padding":[["top","10px"],["bottom","10px"],["left","10px"],["right","10px"]]}}},"holder":"container","type":"container","content":[{"name":"Title","titleType":"h1","type":"heading","_elType":"ELEMENT","component_path":"title","content":"

We Make Films

that Inspire Action!

\n","settings":{"dynamicText":{"_enabled":false}},"dynamicText":{"items":[{"id":"hfgvo35u","content":"Lorem ipsum"},{"id":"hfgvo35i","content":"dolor sit amet"},{"id":"hfgvo35j","content":"consectetur adipiscing"}],"options":{"typeSpeed":50,"loop":true,"backSpeed":40,"showCursor":true,"cursorChar":true}},"style":{"margin":[["top","0px"],["bottom","8px"],["right","0px"]],"color":{"key":"--color-1","value":"#FCB12B"},"fontSize":"35px","lineHeight":"1","textAlign":"center","backgroundColor":""},"id":"foy9fi1a","media":{"mobile":{"style":{"margin":[["top","0px"],["bottom","20px"],["right","0px"],["left","0px"]],"fontSize":"25px","padding":[["left","0px"],["right","0px"],["bottom","0px"],["top","0px"]]}},"tablet":{"style":{"fontSize":"35px","textAlign":"center","margin":[["top","0px"],["bottom","0px"],["right","0px"],["left","0px"]],"padding":[["right","0px"],["left","0px"],["bottom","0px"],["top","0px"]],"overflowX":"hidden","overflowY":"hidden"}}},"animation":{"type":"zoom-in","duration":"2000ms","delay":"1000ms","easing":"ease-in-out","offset":"0px"},"attr":{"customClass":[]},"advanced":{"customStyle":{"general":""}}}],"id":"0shlivx5","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","10px"],["bottom","10px"],["left","0px"],["right","0px"]],"flexBasis":"100%","alignItems":"center","justifyContent":"center","margin":[["left","0px"],["right","0px"],["top","0px"],["bottom","0px"]]},"parentType":"container"}},"ikk55lga":{"name":"New Logo Carousel Section","id":"ikk55lga","data":{"name":"Logo Carousel Section","content":[{"name":"Container","holder":"root","type":"container","content":[{"name":"Title","titleType":"h1","type":"heading","_elType":"ELEMENT","component_path":"title","content":"

Partners Who Believe in Our Work

\n","settings":{"dynamicText":{"_enabled":false}},"dynamicText":{"items":[{"id":"hfgvo35u","content":"Lorem ipsum"},{"id":"hfgvo35i","content":"dolor sit amet"},{"id":"hfgvo35j","content":"consectetur adipiscing"}],"options":{"typeSpeed":50,"loop":true,"backSpeed":40,"showCursor":true,"cursorChar":true}},"style":{"margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"color":"#ffffff","textAlign":"center","fontSize":"15px","padding":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"textTransform":"none"},"id":"wr0g0klu","media":{"mobile":{"style":{"fontSize":"15px","margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]]}},"tablet":{"style":{"fontSize":"18px","margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"overflowX":"hidden","overflowY":"hidden"}}}}],"id":"xoz45e5h","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","0px"],["left","0px"],["right","0px"],["bottom","0px"]],"flexBasis":"100%","justifyContent":"center","margin":[["bottom","20px"],["top","0px"],["left","0px"],["right","0px"]]},"media":{"tablet":{"style":{"overflowX":"hidden","overflowY":"hidden"}},"mobile":{"style":{"margin":[["bottom","20px"],["top","0px"],["left","0px"],["right","0px"]],"padding":[["top","0px"],["left","0px"],["right","0px"],["bottom","0px"]]}}}},{"name":"Container","holder":"root","type":"container","content":[{"name":"Container","media":{"mobile":{"style":{"flexBasis":"100%","overflowX":"hidden","overflowY":"hidden","alignItems":"unset","justifyContent":"unset"}},"tablet":{"style":{"overflowX":"hidden","overflowY":"hidden"}}},"holder":"container","type":"container","content":[{"type":"code","name":"Custom Code","_elType":"ELEMENT","component_path":"code","id":"4a1euels","advanced":{"html":"\r\n\r\n\r\n \r\n \r\n Carousel with Lightbox\r\n \r\n\r\n\r\n\r\n

\r\n

\r\n\r\n

\r\n \r\n \r\n $\"Magnified$ \r\n \r\n

\r\n\r\n \r\n\r\n\r\n"},"media":{"mobile":{"style":{"overflowX":"hidden","overflowY":"hidden"}},"tablet":{"style":{"overflowX":"hidden","overflowY":"hidden"}}},"style":{"overflowY":"hidden","overflowX":"hidden","margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"padding":[["right","0px"],["left","0px"],["bottom","0px"],["top","0px"]]}}],"id":"20ed0mw1","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","0px"],["bottom","0px"],["right","0px"],["left","0px"]],"flexBasis":"100%","alignItems":"stretch","overflowY":"hidden","overflowX":"hidden","margin":[["bottom","0px"],["top","0px"],["left","0px"],["right","0px"]]}}],"id":"c6nph1lr","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","0px"],["left","0px"],["right","0px"],["bottom","0px"]],"flexBasis":"100%","justifyContent":"center","width":"100%","overflowY":"hidden","overflowX":"hidden","margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"alignItems":"flex-start"},"media":{"mobile":{"style":{"overflowX":"hidden","overflowY":"hidden","width":"","minHeight":"100px","justifyContent":"unset","alignItems":"unset","flexDirection":"column","flexWrap":"wrap"}},"tablet":{"style":{"overflowX":"hidden","overflowY":"hidden"}}}}],"id":"o4xo4lkl","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}},"style":{"overflowX":"hidden","overflowY":"hidden","margin":[["left","0px"],["right","0px"],["top","350px"],["bottom","0px"]],"padding":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]]},"media":{"mobile":{"style":{"margin":[["left","0px"],["right","0px"],["top","200px"],["bottom","0px"]],"padding":[["top","0px"],["left","0px"],["right","0px"],["bottom","0px"]]}},"tablet":{"style":{"margin":[["left","0px"],["right","0px"],["top","300px"],["bottom","0px"]]}}},"advanced":{"customStyle":{"general":"max-inline-size: 100vw;\r\nposition: fixed;\r\nbottom: 10px;\r\nleft: 0;\r\nright: 0;\r\n"}}}},"aausjzn0":{"name":"Custom Navigation Menu","id":"aausjzn0","data":{"type":"code","name":"Custom Code","_elType":"ELEMENT","component_path":"code","id":"5lfhvq8c","advanced":{"html":"\r\n\r\n\r\n \r\n \r\n Responsive Navigation Menu\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n\r\n \r\n \r\n

\r\n \r\n

\r\n Home\r\n Portfolio\r\n Social\r\n Owners\r\n Feedback\r\n FAQ\r\n Contact\r\n

\r\n\r\n \r\n

\r\n \r\n \r\n \r\n \r\n \r\n \r\n

\r\n

\r\n \r\n \r\n

\r\n\r\n \r\n \r\n\r\n\r\n\r\n\r\n\r\n","customStyle":{"general":"overflow: visible !important;"}},"parentType":"container","media":{"mobile":{"style":{"overflowX":"hidden","overflowY":"hidden"}}},"style":{"zIndex":"0"}}},"00c4zocq":{"name":"Custom Navigation Menu","id":"00c4zocq","data":{"name":"Custom Navigation Menu","content":[{"name":"Container","holder":"root","type":"container","content":[{"name":"Container","media":{"mobile":{"style":{"flexBasis":"100%"}}},"holder":"container","type":"container","content":[{"symbolId":"aausjzn0"}],"id":"jknu4qus","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","0px"],["bottom","0px"]],"flexBasis":"100%","alignItems":"stretch"}}],"id":"xkxtc7r0","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","0px"],["left","0px"],["right","0px"],["bottom","0px"]],"flexBasis":"100%","justifyContent":"center","width":"100%"}}],"id":"xaxmpqnh","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}},"advanced":{"customStyle":{"general":"position: sticky;\ntop: 0px;\nz-index: 1000;\npadding-top: 12px;\npadding-bottom: 12px;"}}}},"w7wmgl5c":{"name":"New Navigation 03 ","id":"w7wmgl5c","data":{"name":"Custom Navigation Menu","content":[{"name":"Container","holder":"root","type":"container","content":[{"name":"Container","media":{"mobile":{"style":{"flexBasis":"100%"}}},"holder":"container","type":"container","content":[{"type":"contactForm","name":"Contact Form","_elType":"ELEMENT","component_path":"contactForm","fields":{"name":{"_enabled":true,"label":"Name","attr":{"placeholder":"Enter your name"}},"email":{"_enabled":true,"label":"Email","attr":{"placeholder":"Enter your email"}},"phone":{"_enabled":false,"label":"Phone","attr":{"placeholder":"Enter your phone number"}},"message":{"_enabled":true,"label":"Message","attr":{"rows":4,"placeholder":"Write your message..."}},"subject":{"_enabled":true,"label":"Subject","attr":{"placeholder":"Email Subject"}},"button":{"_enabled":true,"text":"Submit","waitingText":"Please wait..."}},"form":{"gap":"15px","successMessage":"Thank you for your email :-)","labelStyle":{"color":"#171A21","fontSize":"16px","padding":[["bottom","10px"]]},"fieldStyle":{"color":"#171A21","fontSize":"14px","minHeight":"50px","padding":[["left","15px"],["right","15px"],["top","10px"],["bottom","10px"]],"_border":"2px solid #26C281","borderRadius":"5px 5px 5px 5px","backgroundColor":"#FFFFFF"},"buttonStyle":{"color":"#FFFFFF","height":"50px","fontSize":"18px","padding":[["left","30px"],["right","30px"]],"_border":"0px solid ","borderRadius":"5px 5px 5px 5px","backgroundColor":"#26C281"},"toEmail":"contact@finelineprod.com","subject":""},"id":"ch9p481w","advanced":{"customStyle":{"general":""}}}],"id":"jknu4qus","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"nowrap","padding":[["top","0px"],["bottom","0px"]],"flexBasis":"100%","alignItems":"stretch","zIndex":"0"},"advanced":{"customStyle":{"general":"overflow: visible !important;"}}}],"id":"xkxtc7r0","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"nowrap","padding":[["top","0px"],["left","0px"],["right","0px"],["bottom","0px"]],"flexBasis":"100%","justifyContent":"center","width":"100%","zIndex":"0"},"advanced":{"customStyle":{"general":""}}}],"id":"xaxmpqnh","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}},"advanced":{"customStyle":{"general":"position: sticky;\ntop: 0px;\nz-index: 1000;\noverflow: visible !important;"}},"media":{"mobile":{"style":{"margin":[["bottom","0px"],["top","0px"],["right","0px"],["left","0px"]],"padding":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"overflowY":"hidden","overflowX":"hidden"}}},"style":{"margin":[["bottom","0px"]],"padding":[["bottom","0px"]],"zIndex":"0"}}},"1qwcvkvd":{"name":"Home Centered Text & Portfolio Button","id":"1qwcvkvd","data":{"name":"Fixed-text+button","content":[{"name":"Container","holder":"root","type":"container","content":[{"name":"Container","media":{"mobile":{"style":{"flexBasis":"100%"}}},"holder":"container","type":"container","content":[{"symbolId":"hbhmv3wu","id":"1yivfret"}],"id":"s30s1j6x","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","10px"],["bottom","10px"]],"flexBasis":"100%","alignItems":"stretch"}}],"id":"thpuch9l","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","10px"],["left","10px"],["right","10px"],["bottom","10px"]],"flexBasis":"100%","justifyContent":"center"},"media":{"mobile":{"style":{"width":""}}},"settings":{"hideOn":"mobile"}},{"name":"Container","holder":"root","type":"container","content":[{"name":"Container","media":{"mobile":{"style":{"flexBasis":"40%"}}},"holder":"container","type":"container","content":[{"symbolId":"r80irn61","id":"4z9c00zd"}],"id":"xz95amcf","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","10px"],["bottom","10px"]],"flexBasis":"100%","alignItems":"stretch"}}],"id":"hpg8834c","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","10px"],["left","10px"],["right","10px"],["bottom","10px"]],"flexBasis":"100%","justifyContent":"center"},"media":{"mobile":{"style":{"width":""}}}}],"id":"dc5y7feg","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}},"advanced":{"customStyle":{"general":""}},"style":{"margin":[["top","120px"],["bottom","0px"],["left","0px"],["right","0px"]]},"media":{"mobile":{"style":{"padding":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"margin":[["top","350px"],["bottom","0px"],["left","0px"],["right","0px"]]}}}}},"9eegzq8z":{"name":"FL Glass Footer","id":"9eegzq8z","data":{"name":"Glass Footer","content":[],"id":"zdqnu26p","type":"section","_elType":"SECTION","component_path":"section","style":{"padding":[["top","0px"],["bottom","0px"],["right","0px"],["left","0px"]],"backgroundColor":"","margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]]},"media":{"mobile":{"style":{"padding":[["top","0px"],["bottom","0px"],["left","30px"],["right","30px"]]}}},"advanced":{"customStyle":{"general":"background-color: rgba(0, 0, 0, 0.5);\r\nbackdrop-filter: blur(5px);\r\nborder-top: 1px solid #fff;\r\nmargin-top: 20px;"}}}},"mzj8sbxu":{"name":"Custom Footer Section","id":"mzj8sbxu","data":{"name":"Footer Custom Section","content":[{"name":"Container","holder":"container","type":"container","content":[{"symbolId":"tpdcqie8"}],"id":"qjzllis9","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","10px"],["bottom","10px"]],"flexBasis":"100%","alignItems":"stretch"}}],"id":"2p4jv2jy","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}},"advanced":{"customStyle":{"general":"display: flex;\r\n flex-direction: column;\r\n min-height: 100vh;\r\n height: 10%;\r\n margin: 0;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n backdrop-filter: blur(5px);\r\n border-top: 1px solid #fff;"}},"style":{"margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"padding":[["right","0px"],["left","0px"],["bottom","0px"],["top","0px"]]}}},"tpdcqie8":{"name":"Custom Footer","id":"tpdcqie8","data":{"type":"code","name":"Custom Footer","_elType":"ELEMENT","component_path":"code","id":"i63r6whe","advanced":{"html":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

\r\n \r\n

","js":"document.addEventListener('DOMContentLoaded', function() {\r\n const copyButtons = document.querySelectorAll('.copy-btn');\r\n \r\n copyButtons.forEach(button => {\r\n const originalIcon = button.innerHTML;\r\n\r\n button.addEventListener('click', () => {\r\n const valueToCopy = button.dataset.copyValue;\r\n const textArea = document.createElement(\"textarea\");\r\n textArea.value = valueToCopy;\r\n \r\n textArea.style.position = \"fixed\";\r\n textArea.style.opacity = \"0\";\r\n\r\n document.body.appendChild(textArea);\r\n textArea.focus();\r\n textArea.select();\r\n\r\n try {\r\n document.execCommand('copy');\r\n button.innerHTML = '';\r\n setTimeout(() => {\r\n button.innerHTML = originalIcon;\r\n }, 2000);\r\n } catch (err) {\r\n console.error('Fallback: Oops, unable to copy', err);\r\n }\r\n document.body.removeChild(textArea);\r\n });\r\n });\r\n});"},"style":{"margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"padding":[["right","0px"],["left","0px"],["bottom","0px"],["top","0px"]]},"parentType":"container"}},"sumdvjcs":{"name":"Clients Logos","id":"sumdvjcs","data":{"name":"Logo Carousel Section","content":[{"name":"Container","holder":"container","type":"container","content":[{"name":"Container","holder":"container","type":"container","content":[{"name":"Partners Who Believe in Us","titleType":"h1","type":"heading","_elType":"ELEMENT","component_path":"title","content":"

Partners Who Believe in Our Work

\n","settings":{"dynamicText":{"_enabled":false}},"dynamicText":{"items":[{"id":"hfgvo35u","content":"Lorem ipsum"},{"id":"hfgvo35i","content":"dolor sit amet"},{"id":"hfgvo35j","content":"consectetur adipiscing"}],"options":{"typeSpeed":50,"loop":true,"backSpeed":40,"showCursor":true,"cursorChar":true}},"style":{"margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"color":"#ffffff","textAlign":"center","fontSize":"15px","padding":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"textTransform":"none"},"id":"9uw7ockz","media":{"mobile":{"style":{"fontSize":"15px","margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]]}},"tablet":{"style":{"fontSize":"18px","margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"overflowX":"hidden","overflowY":"hidden"}}}}],"id":"byoygal7","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","10px"],["bottom","10px"]],"flexBasis":"100%","alignItems":"stretch"}}],"id":"qd6lwjto","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","10px"],["bottom","10px"]],"flexBasis":"100%","alignItems":"stretch"}},{"name":"Container","holder":"root","type":"container","content":[{"name":"Container","media":{"mobile":{"style":{"flexBasis":"100%","overflowX":"hidden","overflowY":"hidden","alignItems":"unset","justifyContent":"unset"}},"tablet":{"style":{"overflowX":"hidden","overflowY":"hidden"}}},"holder":"container","type":"container","content":[{"type":"code","name":"Clients Logos","_elType":"ELEMENT","component_path":"code","id":"jf8ia24b","advanced":{"html":"\r\n\r\n

\r\n

\r\n\r\n

\r\n \r\n \r\n $\"Magnified$ \r\n \r\n

","js":"document.addEventListener(\"DOMContentLoaded\", function() {\r\n // Your published Google Sheets CSV link\r\n const googleSheetCsvUrl = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSx1v-g13texCUwMW04-w1gqsPs-SlrSxYcxtoLyxWp-lhmy-r7-LMjJw54SKf9MPRD6GzijB3XV_mp/pub?output=csv'; \r\n\r\n fetch(googleSheetCsvUrl)\r\n .then(response => response.ok ? response.text() : Promise.reject(response.statusText))\r\n .then(text => {\r\n // Split the text by line breaks and filter out empty rows or headers\r\n const rawLinks = text.split('\\n')\r\n .map(link => link.trim())\r\n .filter(link => link.startsWith('http')); // Ensures only valid URLs are used\r\n \r\n if (rawLinks.length > 0) {\r\n initializeCarousel(rawLinks);\r\n } else {\r\n console.error('No valid URLs found in the Google Sheet.');\r\n }\r\n })\r\n .catch(error => console.error('Failed to fetch logo links:', error));\r\n\r\n function initializeCarousel(sources) {\r\n const marquee = document.getElementById(\"marquee\");\r\n const track = document.getElementById(\"track\");\r\n const magnifyOverlay = document.getElementById(\"magnifyOverlay\");\r\n const magnifiedImg = document.getElementById(\"magnifiedImg\");\r\n const closeMagnifyBtn = document.getElementById(\"closeMagnifyBtn\");\r\n const prevBtn = document.getElementById(\"prevBtn\");\r\n const nextBtn = document.getElementById(\"nextBtn\");\r\n \r\n let pos = 0, vel = 30, base = 30, friction = 0.96;\r\n let isDragging = false, startX = 0, startPos = 0, lastDragX = 0, lastTime = 0;\r\n let contentWidth = 0, lastT = performance.now(), running = true;\r\n let currentLogoIndex = 0;\r\n\r\n let holdTimer = null;\r\n const HOLD_DELAY = 200; \r\n let holdOpened = false;\r\n let firstTapItem = null;\r\n\r\n const navigateNext = () => {\r\n const newIndex = (currentLogoIndex + 1) % sources.length;\r\n showMagnifiedImage(newIndex);\r\n };\r\n\r\n const navigatePrev = () => {\r\n const newIndex = (currentLogoIndex - 1 + sources.length) % sources.length;\r\n showMagnifiedImage(newIndex);\r\n };\r\n \r\n const handleOverlayClick = (e) => {\r\n if (e.target === magnifyOverlay) closeMagnify();\r\n };\r\n\r\n const handleKeyDown = (e) => { \r\n if (e.key === \"Escape\") closeMagnify(); \r\n if (e.key === \"ArrowRight\") navigateNext();\r\n if (e.key === \"ArrowLeft\") navigatePrev();\r\n };\r\n\r\n function buildTrack() {\r\n track.innerHTML = \"\";\r\n const imageLoadPromises = [];\r\n const makeSet = (isClone = false) => {\r\n const frag = document.createDocumentFragment();\r\n sources.forEach((src, index) => {\r\n const item = document.createElement(\"div\");\r\n item.className = \"item\";\r\n const img = document.createElement(\"img\");\r\n img.src = src; img.alt = \"Client logo\";\r\n if (!isClone) {\r\n img.dataset.index = index;\r\n const promise = new Promise((resolve, reject) => {\r\n img.onload = resolve;\r\n img.onerror = reject;\r\n });\r\n imageLoadPromises.push(promise);\r\n }\r\n item.appendChild(img);\r\n frag.appendChild(item);\r\n });\r\n return frag;\r\n };\r\n track.appendChild(makeSet());\r\n track.appendChild(makeSet(true));\r\n return Promise.all(imageLoadPromises);\r\n }\r\n\r\n function wrap() {\r\n if (contentWidth <= 0) return false;\r\n let wrapped = false;\r\n while (pos <= -contentWidth) { pos += contentWidth; wrapped = true; }\r\n while (pos > 0) { pos -= contentWidth; wrapped = true; }\r\n return wrapped;\r\n }\r\n\r\n function loop(now) {\r\n if (!running) { requestAnimationFrame(loop); return; }\r\n const dt = (now - lastT) / 1000;\r\n lastT = now;\r\n if (!isDragging && contentWidth > 0) {\r\n pos -= vel * dt;\r\n wrap();\r\n track.style.transform = `translate3d(${pos}px,0,0)`;\r\n vel *= friction;\r\n if (Math.abs(vel) < Math.abs(base)) vel = base;\r\n }\r\n requestAnimationFrame(loop);\r\n }\r\n \r\n const CLICK_DIST = 10;\r\n let pressT = 0, pressX = 0, pressY = 0, dragged = false, clickedItem = null;\r\n\r\n function resumeCarousel() {\r\n if (firstTapItem) {\r\n firstTapItem.classList.remove('tapped');\r\n firstTapItem = null;\r\n }\r\n if (!magnifyOverlay.classList.contains('show')) {\r\n running = true;\r\n lastT = performance.now();\r\n }\r\n }\r\n\r\n function pressStart(x, y, target, isTouch) {\r\n pressT = performance.now(); pressX = x; pressY = y;\r\n dragged = false;\r\n const newClickedItem = target.closest('.item')?.querySelector('img');\r\n if (firstTapItem && firstTapItem !== newClickedItem) {\r\n resumeCarousel();\r\n }\r\n clickedItem = newClickedItem;\r\n isDragging = true;\r\n marquee.classList.add(\"dragging\");\r\n startX = x; startPos = pos; vel = 0;\r\n lastDragX = x; lastTime = performance.now();\r\n if (isTouch) {\r\n holdTimer = setTimeout(() => {\r\n if (!dragged && clickedItem) {\r\n holdOpened = true;\r\n magnifyLogo(parseInt(clickedItem.dataset.index), {showControls: false});\r\n }\r\n }, HOLD_DELAY);\r\n }\r\n }\r\n\r\n function pressMove(x, y) {\r\n if (!isDragging) return;\r\n if (!dragged && Math.hypot(x - pressX, y - pressY) > CLICK_DIST) {\r\n dragged = true;\r\n clickedItem = null;\r\n clearTimeout(holdTimer);\r\n if (firstTapItem) resumeCarousel();\r\n }\r\n if (!dragged) return;\r\n pos = startPos + (x - startX);\r\n if (wrap()) { startPos = pos; startX = x; }\r\n track.style.transform = `translate3d(${pos}px,0,0)`;\r\n const now = performance.now();\r\n const dt = now - lastTime;\r\n if (dt > 0) { vel = -((x - lastDragX) / dt) * 1000; }\r\n lastDragX = x; lastTime = now;\r\n }\r\n\r\n function pressEnd() {\r\n isDragging = false;\r\n marquee.classList.remove(\"dragging\");\r\n clearTimeout(holdTimer);\r\n if (holdOpened) {\r\n closeMagnify();\r\n holdOpened = false;\r\n return;\r\n }\r\n if (dragged) {\r\n if (Math.abs(vel) > 10) { base = vel > 0 ? Math.abs(base) : -Math.abs(base); }\r\n resumeCarousel();\r\n } else if (clickedItem) {\r\n const isDesktop = !('ontouchstart' in window);\r\n const isTouch = 'ontouchstart' in window;\r\n if (isDesktop) {\r\n magnifyLogo(parseInt(clickedItem.dataset.index), {showControls: true});\r\n } else if (isTouch) {\r\n if (firstTapItem === clickedItem) {\r\n magnifyLogo(parseInt(clickedItem.dataset.index), {showControls: true});\r\n } else {\r\n running = false;\r\n firstTapItem = clickedItem;\r\n firstTapItem.classList.add('tapped');\r\n }\r\n }\r\n } else {\r\n resumeCarousel();\r\n }\r\n }\r\n \r\n function updateButtonPositions() {\r\n if (!magnifyOverlay.classList.contains('show')) return;\r\n const imgRect = magnifiedImg.getBoundingClientRect();\r\n const btnHeight = 44; const btnWidth = 44;\r\n closeMagnifyBtn.style.top = `${imgRect.top - btnHeight - 15}px`;\r\n closeMagnifyBtn.style.left = `${imgRect.left + (imgRect.width / 2) - (btnWidth / 2)}px`;\r\n const arrowTop = `${imgRect.top + (imgRect.height / 2) - (btnHeight / 2)}px`;\r\n prevBtn.style.top = arrowTop; nextBtn.style.top = arrowTop;\r\n prevBtn.style.left = `${imgRect.left - btnWidth - 15}px`;\r\n nextBtn.style.left = `${imgRect.right + 15}px`;\r\n }\r\n\r\n function showMagnifiedImage(index) {\r\n magnifiedImg.style.opacity = 0; \r\n \r\n setTimeout(() => {\r\n currentLogoIndex = index;\r\n magnifiedImg.src = sources[currentLogoIndex];\r\n \r\n magnifiedImg.onload = () => {\r\n updateButtonPositions();\r\n magnifiedImg.style.opacity = 1; \r\n };\r\n }, 150);\r\n }\r\n \r\n function magnifyLogo(index, options = {}) {\r\n const { showControls = true } = options;\r\n running = false;\r\n document.documentElement.classList.add('modal-open');\r\n magnifyOverlay.classList.add('show');\r\n showMagnifiedImage(index);\r\n const displayStyle = showControls ? 'flex' : 'none';\r\n closeMagnifyBtn.style.display = displayStyle;\r\n prevBtn.style.display = displayStyle;\r\n nextBtn.style.display = displayStyle;\r\n\r\n if (showControls) {\r\n prevBtn.addEventListener('click', navigatePrev);\r\n nextBtn.addEventListener('click', navigateNext);\r\n closeMagnifyBtn.addEventListener('click', closeMagnify);\r\n magnifyOverlay.addEventListener('click', handleOverlayClick);\r\n window.addEventListener(\"keydown\", handleKeyDown);\r\n window.addEventListener(\"resize\", updateButtonPositions);\r\n }\r\n }\r\n\r\n function closeMagnify() {\r\n document.documentElement.classList.remove('modal-open');\r\n magnifyOverlay.classList.remove('show');\r\n resumeCarousel();\r\n \r\n prevBtn.removeEventListener('click', navigatePrev);\r\n nextBtn.removeEventListener('click', navigateNext);\r\n closeMagnifyBtn.removeEventListener('click', closeMagnify);\r\n magnifyOverlay.removeEventListener('click', handleOverlayClick);\r\n window.removeEventListener(\"keydown\", handleKeyDown);\r\n window.removeEventListener(\"resize\", updateButtonPositions);\r\n }\r\n\r\n marquee.addEventListener(\"mouseenter\", () => { if (!firstTapItem) running = false; });\r\n marquee.addEventListener(\"mouseleave\", () => { if (!isDragging && !firstTapItem) resumeCarousel(); });\r\n marquee.addEventListener(\"wheel\", e => {\r\n e.preventDefault();\r\n resumeCarousel();\r\n if (e.deltaY < 0) base = -Math.abs(base);\r\n else if (e.deltaY > 0) base = Math.abs(base);\r\n if (!running) {\r\n pos -= e.deltaY;\r\n wrap();\r\n track.style.transform = `translate3d(${pos}px,0,0)`;\r\n } else {\r\n vel += e.deltaY * 5;\r\n }\r\n }, { passive: false });\r\n marquee.addEventListener(\"mousedown\", e => pressStart(e.clientX, e.clientY, e.target, false));\r\n window.addEventListener(\"mousemove\", e => pressMove(e.clientX, e.clientY));\r\n window.addEventListener(\"mouseup\", pressEnd);\r\n marquee.addEventListener(\"touchstart\", e => { if (e.touches.length === 1) pressStart(e.touches[0].clientX, e.touches[0].clientY, e.target, true); }, { passive: false });\r\n marquee.addEventListener(\"touchmove\", e => { if (e.touches.length === 1) pressMove(e.touches[0].clientX, e.touches[0].clientY); }, { passive: false });\r\n marquee.addEventListener(\"touchend\", pressEnd);\r\n marquee.addEventListener(\"touchcancel\", pressEnd);\r\n marquee.addEventListener('contextmenu', e => e.preventDefault());\r\n\r\n buildTrack().then(() => {\r\n const ro = new ResizeObserver(() => { \r\n contentWidth = track.scrollWidth / 2;\r\n wrap();\r\n });\r\n contentWidth = track.scrollWidth / 2;\r\n if (contentWidth > 0) {\r\n ro.observe(track);\r\n requestAnimationFrame((t) => { lastT = t; loop(t); });\r\n } else {\r\n console.error(\"Could not calculate marquee width.\");\r\n }\r\n }).catch(err => console.error(\"Error loading images:\", err));\r\n }\r\n});"},"media":{"mobile":{"style":{"overflowX":"hidden","overflowY":"hidden"}},"tablet":{"style":{"overflowX":"hidden","overflowY":"hidden"}}},"style":{"overflowY":"hidden","overflowX":"hidden","margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"padding":[["right","0px"],["left","0px"],["bottom","0px"],["top","0px"]]}}],"id":"y8vmus2s","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","0px"],["bottom","0px"],["right","0px"],["left","0px"]],"flexBasis":"100%","alignItems":"stretch","overflowY":"hidden","overflowX":"hidden","margin":[["bottom","0px"],["top","0px"],["left","0px"],["right","0px"]]}}],"id":"3jiu3knr","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","0px"],["left","0px"],["right","0px"],["bottom","0px"]],"flexBasis":"100%","justifyContent":"center","width":"100%","overflowY":"hidden","overflowX":"hidden","margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"alignItems":"flex-start"},"media":{"mobile":{"style":{"overflowX":"hidden","overflowY":"hidden","width":"","minHeight":"100px","justifyContent":"unset","alignItems":"unset","flexDirection":"column","flexWrap":"wrap"}},"tablet":{"style":{"overflowX":"hidden","overflowY":"hidden"}}}}],"id":"y1n4ali7","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}},"style":{"overflowX":"hidden","overflowY":"hidden","margin":[["left","0px"],["right","0px"],["top","250px"],["bottom","0px"]],"padding":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]]},"media":{"mobile":{"style":{"margin":[["left","0px"],["right","0px"],["top","50px"],["bottom","0px"]],"padding":[["top","0px"],["left","0px"],["right","0px"],["bottom","0px"]]}},"tablet":{"style":{"margin":[["left","0px"],["right","0px"],["top","300px"],["bottom","0px"]]}}},"advanced":{"customStyle":{"general":"max-inline-size: 100vw;\r\n"}}}},"g9dsf631":{"name":"Studio Section","id":"g9dsf631","data":{"name":"Section","content":[{"name":"Container","holder":"root","type":"container","content":[{"name":"Container","media":{"mobile":{"style":{"flexBasis":"100%"}}},"holder":"container","type":"container","content":[{"type":"code","name":"Custom Code","_elType":"ELEMENT","component_path":"code","id":"g1gkljuc","advanced":{"html":"\r\n\r\n\r\n\r\n\r\nFine Line — Muted Loop Rail\r\n\r\n\r\n\r\n

\r\n

\r\n\r\n\r\n\r\n","js":"="}}],"id":"l6ga2a41","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","10px"],["bottom","10px"]],"flexBasis":"100%","alignItems":"stretch"}}],"id":"1jf8ed70","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","10px"],["left","10px"],["right","10px"],["bottom","10px"]],"flexBasis":"100%","justifyContent":"center","width":"100%"}}],"id":"b8qtmlat","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}},"advanced":{"customStyle":{"general":"","&:before":""}}}},"gbowzz63":{"name":"Portfolio Gallery","id":"gbowzz63","data":{"name":"Portfolio Gallery","content":[{"name":"Container","holder":"root","type":"container","content":[{"name":"Container","media":{"mobile":{"style":{"flexBasis":"100%"}}},"holder":"container","type":"container","content":[{"type":"code","name":"Actual Portfolio","_elType":"ELEMENT","component_path":"code","id":"0jjycjl4","advanced":{"html":"\r\n\r\n

\r\n \r\n

\r\n

\r\n \r\n \r\n

\r\n

\r\n \r\n

\r\n

\r\n","js":"(function() {\r\n // Check if the main gallery element exists before running any code\r\n const root = document.getElementById('vimeo-gallery');\r\n if (!root) return;\r\n\r\n // --- CONFIGURATION ---\r\n const GIST_URL = \"https://gist.githubusercontent.com/finelineprod2025/fd183374a280101efd53cd83ba1c5a07/raw/menu-order.txt\";\r\n\r\n // --- DOM ELEMENT REFERENCES ---\r\n const filtersContainer = root.querySelector('.vgal__filters-container');\r\n const filtersEl = root.querySelector('.vgal__filters');\r\n const filtersDropdownEl = root.querySelector('.vgal__filters-dropdown');\r\n const grid = root.querySelector('.vgal__grid');\r\n const status = root.querySelector('.vgal__status');\r\n const lightbox = document.getElementById('vimeo-lightbox');\r\n const lightboxContent = lightbox.querySelector('.vgal__lightboxContent');\r\n const lightboxTitle = lightbox.querySelector('#vimeo-title');\r\n const player = lightbox.querySelector('#vimeo-player');\r\n const closeBtn = lightbox.querySelector('.vgal__close');\r\n const descriptionBox = lightbox.querySelector('#vimeo-description');\r\n const prevBtn = lightbox.querySelector('#vimeo-prev');\r\n const nextBtn = lightbox.querySelector('#vimeo-next');\r\n const aboutBtn = lightbox.querySelector('#about-btn');\r\n const rotatePrompt = lightbox.querySelector('#rotate-prompt');\r\n const shareBtn = lightbox.querySelector('#share-btn');\r\n const progressIndicator = lightbox.querySelector('.vgal__progress-indicator');\r\n const progressBar = lightbox.querySelector('.vgal__progress-bar');\r\n const progressPercentage = lightbox.querySelector('.vgal__progress-percentage');\r\n\r\n // --- STATE MANAGEMENT ---\r\n let lastFocusedElement = null,\r\n isClosing = false,\r\n isNavigating = false,\r\n isFiltering = false;\r\n let allVideosData = [],\r\n currentVideoList = [],\r\n currentVideoIndex = -1;\r\n let preloadNextFrame = null,\r\n preloadPrevFrame = null,\r\n lastScrollYPosition = 0;\r\n let progressInterval = null,\r\n rotatePromptTimeout = null,\r\n intersectionObserver = null;\r\n let preloadFramePool = [],\r\n nextFrameIndex = 0;\r\n const POOL_SIZE = 5; // Number of iframes to pool for preloading\r\n\r\n // --- SEO FUNCTION ---\r\n /**\r\n * Generates and injects a JSON-LD script tag into the document head for SEO.\r\n * This helps search engines understand the video content on the page.\r\n * @param {Array} videoData - An array of video objects fetched from the API.\r\n */\r\n function generateAndInjectSchema(videoData) {\r\n if (!videoData || videoData.length === 0) return;\r\n\r\n const allSchema = videoData.map(video => ({\r\n \"@context\": \"https://schema.org\",\r\n \"@type\": \"VideoObject\",\r\n \"name\": video.title || 'Untitled Video',\r\n \"description\": video.description || 'A video project.',\r\n \"thumbnailUrl\": video.thumbnail_large,\r\n \"uploadDate\": video.upload_date,\r\n \"duration\": `PT${video.duration}S`, // Converts seconds to ISO 8601 duration format\r\n \"embedUrl\": `https://player.vimeo.com/video/${video.id}`,\r\n \"contentUrl\": `https://vimeo.com/${video.id}`\r\n }));\r\n\r\n const existingSchema = document.getElementById('dynamic-video-schema');\r\n if (existingSchema) {\r\n existingSchema.remove();\r\n }\r\n\r\n const script = document.createElement('script');\r\n script.type = 'application/ld+json';\r\n script.id = 'dynamic-video-schema';\r\n script.text = JSON.stringify(allSchema);\r\n document.head.appendChild(script);\r\n }\r\n\r\n // --- UI & UX FUNCTIONS ---\r\n function scrollToTopThenLockBody() {\r\n if (!lightbox) return;\r\n const scroller = document.scrollingElement || document.documentElement;\r\n lightbox.scrollTop = 0;\r\n window.scrollTo({\r\n top: 0,\r\n left: 0,\r\n behavior: 'auto'\r\n });\r\n requestAnimationFrame(() => {\r\n requestAnimationFrame(() => {\r\n document.body.style.overflow = 'hidden';\r\n scroller.scrollTo({\r\n top: 0,\r\n left: 0,\r\n behavior: 'auto'\r\n });\r\n });\r\n });\r\n }\r\n\r\n function startProgressSimulation() {\r\n if (!progressIndicator || !progressBar || !progressPercentage || !player) return;\r\n if (progressInterval) clearInterval(progressInterval);\r\n progressIndicator.classList.remove('is-hidden');\r\n progressBar.style.transition = 'width .2s linear';\r\n progressBar.style.width = '0%';\r\n progressPercentage.textContent = '0%';\r\n player.style.opacity = '0';\r\n let current = 0,\r\n target = 95,\r\n steps = 50,\r\n duration = 2500,\r\n inc = target / steps,\r\n iv = duration / steps;\r\n progressInterval = setInterval(() => {\r\n current += inc;\r\n if (current >= target) {\r\n current = target;\r\n clearInterval(progressInterval);\r\n progressInterval = null;\r\n }\r\n progressBar.style.width = current + '%';\r\n progressPercentage.textContent = Math.floor(current) + '%';\r\n }, iv);\r\n }\r\n\r\n function completeProgressSimulation() {\r\n if (!progressIndicator || !progressBar || !progressPercentage || !player) return;\r\n if (progressInterval) {\r\n clearInterval(progressInterval);\r\n progressInterval = null;\r\n }\r\n progressBar.style.transition = 'width .3s ease-out';\r\n progressBar.style.width = '100%';\r\n progressPercentage.textContent = '100%';\r\n setTimeout(() => {\r\n progressIndicator.classList.add('is-hidden');\r\n player.style.opacity = '1';\r\n setTimeout(() => {\r\n progressBar.style.width = '0%';\r\n }, 300);\r\n }, 300);\r\n }\r\n\r\n // --- DATA FETCHING ---\r\n async function fetchDataFromGist(gistUrl) {\r\n const proxyUrl = `https://corsproxy.io/?${encodeURIComponent(gistUrl)}`;\r\n try {\r\n const response = await fetch(proxyUrl, {\r\n cache: 'no-store'\r\n });\r\n if (!response.ok) return null;\r\n const text = await response.text();\r\n const lines = text.split('\\n').map(l => l.trim()).filter(Boolean);\r\n const categories = [];\r\n let current = null;\r\n for (const line of lines) {\r\n if (line.startsWith('http')) {\r\n if (current) {\r\n const showcaseMatch = line.match(/(?:album|showcase)\\/(\\d+)/);\r\n const videoMatch = line.match(/vimeo\\.com\\/(\\d+)/);\r\n if (showcaseMatch && showcaseMatch[1]) current.sources.push({\r\n id: showcaseMatch[1],\r\n type: 'showcase'\r\n });\r\n else if (videoMatch && videoMatch[1]) current.sources.push({\r\n id: videoMatch[1],\r\n type: 'video'\r\n });\r\n }\r\n } else {\r\n current = {\r\n title: line,\r\n id: line.replace(/\\s+/g, '-').toLowerCase(),\r\n sources: []\r\n };\r\n categories.push(current);\r\n }\r\n }\r\n return categories;\r\n } catch (error) {\r\n console.error(\"Error fetching Gist via proxy:\", error);\r\n return null;\r\n }\r\n }\r\n\r\n function jsonp(url) {\r\n return new Promise((resolve, reject) => {\r\n const cb = 'vimeoJSONP_' + Math.random().toString(36).slice(2);\r\n window[cb] = (data) => {\r\n cleanup();\r\n resolve(data);\r\n };\r\n const s = document.createElement('script');\r\n s.src = url + (url.includes('?') ? '&' : '?') + 'callback=' + cb + '&_=' + Date.now();\r\n s.onerror = () => {\r\n cleanup();\r\n reject(new Error('JSONP failed'));\r\n };\r\n document.body.appendChild(s);\r\n\r\n function cleanup() {\r\n delete window[cb];\r\n s.remove();\r\n }\r\n });\r\n }\r\n\r\n // --- DOM MANIPULATION & RENDERING ---\r\n function setStatus(html) {\r\n if (status) status.innerHTML = html || '';\r\n }\r\n\r\n function shuffleArray(a) {\r\n for (let i = a.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [a[i], a[j]] = [a[j], a[i]];\r\n }\r\n }\r\n\r\n function getNextPreloadFrame() {\r\n const f = preloadFramePool[nextFrameIndex];\r\n nextFrameIndex = (nextFrameIndex + 1) % POOL_SIZE;\r\n return f;\r\n }\r\n\r\n function preloadVideo(video) {\r\n if (!video) return;\r\n const f = getNextPreloadFrame();\r\n const src = `https://player.vimeo.com/video/${video.id}?autoplay=0&muted=1&controls=0`;\r\n if (f.src !== src) f.src = src;\r\n }\r\n\r\n function cardFor(video) {\r\n const {\r\n title,\r\n thumbnail_large,\r\n id\r\n } = video;\r\n const card = document.createElement('a');\r\n card.className = 'vgal__card';\r\n const url = new URL(window.location.href);\r\n url.searchParams.set('video', id);\r\n card.href = url.href;\r\n card.setAttribute('role', 'listitem');\r\n card.setAttribute('aria-label', `Play ${title||'video'}`);\r\n card.dataset.showcaseId = video.showcaseId;\r\n card.dataset.videoId = video.id;\r\n card.innerHTML = ` $\"\"$ ${title||'Untitled'}`;\r\n card.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n openLightbox(video);\r\n });\r\n return card;\r\n }\r\n\r\n function renderGrid(videos) {\r\n if (!grid) return;\r\n grid.innerHTML = '';\r\n const frag = document.createDocumentFragment();\r\n videos.forEach(v => {\r\n const s = document.createElement('div');\r\n s.className = 'vgal__section';\r\n s.appendChild(cardFor(v));\r\n frag.appendChild(s);\r\n });\r\n grid.appendChild(frag);\r\n if (grid.children.length === 0) setStatus('No videos found.');\r\n }\r\n\r\n // --- LIGHTBOX LOGIC ---\r\n function loadVideoInLightbox(video) {\r\n if (!video || !player || !lightboxContent || !rotatePrompt || !lightboxTitle || !descriptionBox || !aboutBtn) return;\r\n if (rotatePromptTimeout) clearTimeout(rotatePromptTimeout);\r\n const isVertical = video.height > video.width;\r\n lightboxContent.classList.toggle('is-vertical', isVertical);\r\n const isMobile = window.matchMedia(\"(max-width: 768px)\").matches;\r\n const shouldShowPrompt = isMobile && !isVertical;\r\n rotatePrompt.classList.toggle('is-hidden', !shouldShowPrompt);\r\n if (shouldShowPrompt) {\r\n rotatePromptTimeout = setTimeout(() => {\r\n rotatePrompt.classList.add('is-hidden');\r\n }, 3000);\r\n }\r\n player.src = `https://player.vimeo.com/video/${video.id}?autoplay=1`;\r\n lightboxTitle.textContent = video.title;\r\n const hasDesc = video.description && video.description.trim() !== '';\r\n descriptionBox.innerHTML = hasDesc ? video.description : '';\r\n aboutBtn.hidden = !hasDesc;\r\n descriptionBox.classList.remove('is-visible');\r\n }\r\n\r\n function updateNavState() {\r\n if (!prevBtn || !nextBtn) return;\r\n prevBtn.hidden = currentVideoIndex <= 0;\r\n nextBtn.hidden = currentVideoIndex >= currentVideoList.length - 1;\r\n }\r\n\r\n function openLightbox(video) {\r\n if (!video || !lightbox || !shareBtn || !grid) return;\r\n lastFocusedElement = document.activeElement;\r\n lastScrollYPosition = window.scrollY;\r\n scrollToTopThenLockBody();\r\n\r\n if ('orientation' in screen) {\r\n screen.orientation.addEventListener('change', handleOrientationChange);\r\n }\r\n\r\n const url = new URL(window.location.href);\r\n url.searchParams.set('video', video.id);\r\n history.pushState({\r\n videoId: video.id\r\n }, '', url);\r\n\r\n const visibleCards = Array.from(grid.querySelectorAll('.vgal__card:not(.is-filtered-out)'));\r\n currentVideoList = visibleCards.map(card => allVideosData.find(v => String(v.id) === card.dataset.videoId)).filter(Boolean);\r\n currentVideoIndex = currentVideoList.findIndex(v => v.id === video.id);\r\n if (player) player.onload = () => {\r\n completeProgressSimulation();\r\n updateNavState();\r\n updatePreloadedNavVideos();\r\n player.onload = null;\r\n };\r\n startProgressSimulation();\r\n loadVideoInLightbox(video);\r\n lightbox.classList.add('is-open');\r\n lightbox.setAttribute('aria-hidden', 'false');\r\n setTimeout(() => shareBtn.focus(), 100);\r\n }\r\n\r\n function closeLightbox() {\r\n if (isClosing || !lightbox) return;\r\n isClosing = true;\r\n if ('orientation' in screen) {\r\n screen.orientation.removeEventListener('change', handleOrientationChange);\r\n }\r\n if (rotatePromptTimeout) clearTimeout(rotatePromptTimeout);\r\n if (rotatePrompt) rotatePrompt.classList.add('is-hidden');\r\n const url = new URL(window.location.href);\r\n url.searchParams.delete('video');\r\n history.pushState({}, '', url);\r\n lightbox.classList.remove('is-open');\r\n setTimeout(() => {\r\n if (player) player.src = '';\r\n if (lightboxTitle) lightboxTitle.textContent = '';\r\n if (descriptionBox) {\r\n descriptionBox.innerHTML = '';\r\n descriptionBox.classList.remove('is-visible');\r\n }\r\n if (lightboxContent) lightboxContent.classList.remove('is-vertical');\r\n lightbox.setAttribute('aria-hidden', 'true');\r\n if (progressInterval) {\r\n clearInterval(progressInterval);\r\n progressInterval = null;\r\n }\r\n if (progressIndicator) progressIndicator.classList.add('is-hidden');\r\n if (preloadNextFrame) {\r\n preloadNextFrame.remove();\r\n preloadNextFrame = null;\r\n }\r\n if (preloadPrevFrame) {\r\n preloadPrevFrame.remove();\r\n preloadPrevFrame = null;\r\n }\r\n document.body.style.overflow = '';\r\n if (lastFocusedElement) {\r\n lastFocusedElement.focus({\r\n preventScroll: true\r\n });\r\n }\r\n setTimeout(() => {\r\n const scroller = document.scrollingElement || document.documentElement;\r\n scroller.scrollTo({\r\n top: lastScrollYPosition,\r\n left: 0,\r\n behavior: 'auto'\r\n });\r\n }, 0);\r\n isClosing = false;\r\n }, 400);\r\n }\r\n\r\n function navigateLightbox(dir) {\r\n if (isNavigating) return;\r\n const ni = currentVideoIndex + dir;\r\n if (ni < 0 || ni >= currentVideoList.length) return;\r\n isNavigating = true;\r\n currentVideoIndex = ni;\r\n const nextVideo = currentVideoList[currentVideoIndex];\r\n if (nextVideo) {\r\n const url = new URL(window.location.href);\r\n url.searchParams.set('video', nextVideo.id);\r\n history.pushState({\r\n videoId: nextVideo.id\r\n }, '', url);\r\n }\r\n if (player) player.onload = () => {\r\n completeProgressSimulation();\r\n updateNavState();\r\n updatePreloadedNavVideos();\r\n isNavigating = false;\r\n player.onload = null;\r\n };\r\n startProgressSimulation();\r\n loadVideoInLightbox(currentVideoList[currentVideoIndex]);\r\n }\r\n\r\n // --- EVENT HANDLERS ---\r\n function handleOrientationChange() {\r\n if (!lightbox || !lightbox.classList.contains('is-open')) return;\r\n setTimeout(() => {\r\n const isLandscape = screen.orientation.type.includes('landscape');\r\n if (isLandscape) {\r\n if (player && typeof player.requestFullscreen === 'function' && !document.fullscreenElement) {\r\n player.requestFullscreen().catch(err => console.error(\"Could not enter fullscreen:\", err));\r\n }\r\n } else {\r\n if (document.fullscreenElement && typeof document.exitFullscreen === 'function') {\r\n document.exitFullscreen().catch(err => console.error(\"Could not exit fullscreen:\", err));\r\n }\r\n }\r\n }, 200);\r\n }\r\n\r\n function handleFocusTrap(e) {\r\n if (e.key !== 'Tab' || !shareBtn || !closeBtn || !aboutBtn || !prevBtn || !nextBtn) return;\r\n const f = [shareBtn, closeBtn, aboutBtn, prevBtn, nextBtn].filter(el => !el.hidden);\r\n const first = f[0];\r\n const last = f[f.length - 1];\r\n if (e.shiftKey) {\r\n if (document.activeElement === first) {\r\n last.focus();\r\n e.preventDefault();\r\n }\r\n } else {\r\n if (document.activeElement === last) {\r\n first.focus();\r\n e.preventDefault();\r\n }\r\n }\r\n }\r\n\r\n function handleGlobalKeydown(e) {\r\n if (!lightbox || !lightbox.classList.contains('is-open')) return;\r\n if (e.key === 'Escape') closeLightbox();\r\n if (e.key === 'ArrowLeft') {\r\n e.preventDefault();\r\n navigateLightbox(-1);\r\n }\r\n if (e.key === 'ArrowRight') {\r\n e.preventDefault();\r\n navigateLightbox(1);\r\n }\r\n handleFocusTrap(e);\r\n }\r\n\r\n function handleFilterClick(e) {\r\n const t = e.target;\r\n if (!t.matches('.vgal__filter-btn') || isFiltering || !grid || !filtersDropdownEl) return;\r\n window.scrollTo({\r\n top: 0,\r\n behavior: 'smooth'\r\n });\r\n isFiltering = true;\r\n const filterId = t.dataset.filterId;\r\n const firstPositions = new Map();\r\n grid.querySelectorAll('.vgal__card:not(.is-filtered-out)').forEach(card => {\r\n firstPositions.set(card, card.getBoundingClientRect());\r\n });\r\n let cardsToShow;\r\n if (filterId === 'all') {\r\n cardsToShow = Array.from(grid.querySelectorAll('.vgal__card'));\r\n } else {\r\n cardsToShow = Array.from(grid.querySelectorAll(`.vgal__card[data-showcase-id=\"${filterId}\"]`));\r\n }\r\n shuffleArray(cardsToShow);\r\n cardsToShow.forEach(card => grid.appendChild(card));\r\n document.querySelectorAll('.vgal__filter-btn.is-active').forEach(btn => btn.classList.remove('is-active'));\r\n document.querySelectorAll(`.vgal__filter-btn[data-filter-id=\"${filterId}\"]`).forEach(btn => btn.classList.add('is-active'));\r\n const allCards = Array.from(grid.querySelectorAll('.vgal__card'));\r\n if (filterId !== 'all') {\r\n allCards.forEach(card => card.classList.toggle('is-filtered-out', card.dataset.showcaseId !== filterId));\r\n } else {\r\n allCards.forEach(card => card.classList.remove('is-filtered-out'));\r\n }\r\n allCards.forEach(card => {\r\n const lastPos = card.getBoundingClientRect();\r\n const firstPos = firstPositions.get(card);\r\n if (firstPos && !card.classList.contains('is-filtered-out')) {\r\n const dx = firstPos.left - lastPos.left;\r\n const dy = firstPos.top - lastPos.top;\r\n card.style.transition = 'none';\r\n card.style.transform = `translate(${dx}px, ${dy}px)`;\r\n card.offsetHeight;\r\n card.style.transition = '';\r\n card.style.transform = 'translate(0,0)';\r\n }\r\n if (firstPos && card.classList.contains('is-filtered-out')) {\r\n card.style.transition = 'opacity .2s ease-out';\r\n card.style.opacity = '0';\r\n }\r\n if (!firstPos && !card.classList.contains('is-filtered-out')) {\r\n card.style.transition = 'none';\r\n card.style.opacity = '0';\r\n card.offsetHeight;\r\n card.style.transition = '';\r\n card.style.opacity = '1';\r\n }\r\n });\r\n setTimeout(() => {\r\n isFiltering = false;\r\n setupIntersectionObserver();\r\n filtersDropdownEl.classList.remove('is-open');\r\n }, 500);\r\n }\r\n\r\n async function handleShare() {\r\n if (!shareBtn) return;\r\n const video = currentVideoList[currentVideoIndex];\r\n if (!video) return;\r\n const shareData = {\r\n title: `Check out this video: ${video.title}`,\r\n text: video.title,\r\n url: window.location.href\r\n };\r\n if (navigator.share) {\r\n try {\r\n await navigator.share(shareData);\r\n } catch (err) {\r\n console.error('Share failed:', err);\r\n }\r\n } else {\r\n try {\r\n const textArea = document.createElement(\"textarea\");\r\n textArea.value = window.location.href;\r\n textArea.style.position = \"fixed\";\r\n document.body.appendChild(textArea);\r\n textArea.focus();\r\n textArea.select();\r\n document.execCommand('copy');\r\n document.body.removeChild(textArea);\r\n const originalContent = shareBtn.innerHTML;\r\n shareBtn.innerHTML = 'Copied!';\r\n shareBtn.style.fontSize = '12px';\r\n setTimeout(() => {\r\n shareBtn.innerHTML = originalContent;\r\n shareBtn.style.fontSize = '';\r\n }, 2000);\r\n } catch (err) {\r\n console.error('Failed to copy link:', err);\r\n alert('Could not copy link to clipboard.');\r\n }\r\n }\r\n }\r\n\r\n // --- INITIALIZATION ---\r\n function updatePreloadedNavVideos() {\r\n const nextVideo = currentVideoList[currentVideoIndex + 1];\r\n if (nextVideo) {\r\n if (!preloadNextFrame) {\r\n preloadNextFrame = document.createElement('iframe');\r\n preloadNextFrame.style.display = 'none';\r\n preloadNextFrame.ariaHidden = 'true';\r\n document.body.appendChild(preloadNextFrame);\r\n }\r\n const expected = `https://player.vimeo.com/video/${nextVideo.id}?autoplay=0&muted=1&controls=0`;\r\n if (preloadNextFrame.src !== expected) preloadNextFrame.src = expected;\r\n } else if (preloadNextFrame) {\r\n preloadNextFrame.remove();\r\n preloadNextFrame = null;\r\n }\r\n const prevVideo = currentVideoList[currentVideoIndex - 1];\r\n if (prevVideo) {\r\n if (!preloadPrevFrame) {\r\n preloadPrevFrame = document.createElement('iframe');\r\n preloadPrevFrame.style.display = 'none';\r\n preloadPrevFrame.ariaHidden = 'true';\r\n document.body.appendChild(preloadPrevFrame);\r\n }\r\n const expected2 = `https://player.vimeo.com/video/${prevVideo.id}?autoplay=0&muted=1&controls=0`;\r\n if (preloadPrevFrame.src !== expected2) preloadPrevFrame.src = expected2;\r\n } else if (preloadPrevFrame) {\r\n preloadPrevFrame.remove();\r\n preloadPrevFrame = null;\r\n }\r\n }\r\n\r\n function setupIntersectionObserver() {\r\n if (intersectionObserver) intersectionObserver.disconnect();\r\n if (!grid) return;\r\n const opts = {\r\n root: null,\r\n rootMargin: '300px',\r\n threshold: 0\r\n };\r\n intersectionObserver = new IntersectionObserver((entries, obs) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const card = entry.target;\r\n const videoId = card.dataset.videoId;\r\n const toPreload = allVideosData.find(v => String(v.id) === videoId);\r\n if (toPreload) preloadVideo(toPreload);\r\n obs.unobserve(card);\r\n }\r\n });\r\n }, opts);\r\n grid.querySelectorAll('.vgal__card').forEach(card => intersectionObserver.observe(card));\r\n }\r\n\r\n async function init() {\r\n setStatus('

');\r\n const gistCategories = await fetchDataFromGist(GIST_URL);\r\n if (!gistCategories || gistCategories.length === 0) {\r\n setStatus('Could not load menu from Gist. Please check the URL and file format.');\r\n return;\r\n }\r\n try {\r\n const allPromises = gistCategories.flatMap(cat => cat.sources.map(src => {\r\n const url = (src.type === 'showcase') ? `https://vimeo.com/api/v2/album/${src.id}/videos.json` : `https://vimeo.com/api/v2/video/${src.id}.json`;\r\n return jsonp(url).then(videos => ({\r\n categoryId: cat.id,\r\n categoryTitle: cat.title,\r\n videos\r\n }));\r\n }));\r\n const allFetched = await Promise.all(allPromises);\r\n const byCat = {};\r\n allFetched.forEach(res => {\r\n if (!byCat[res.categoryId]) byCat[res.categoryId] = [];\r\n const tagged = Array.isArray(res.videos) ? res.videos.map(v => ({ ...v,\r\n showcaseId: res.categoryId,\r\n showcaseTitle: res.categoryTitle\r\n })) : [{ ...res.videos,\r\n showcaseId: res.categoryId,\r\n showcaseTitle: res.categoryTitle\r\n }];\r\n byCat[res.categoryId].push(...tagged);\r\n });\r\n let finalData = [];\r\n gistCategories.forEach(cat => {\r\n const list = byCat[cat.id];\r\n if (list) {\r\n shuffleArray(list);\r\n finalData.push(...list);\r\n }\r\n });\r\n allVideosData = finalData;\r\n\r\n // Generate the SEO schema and inject it into the \r\n generateAndInjectSchema(allVideosData);\r\n\r\n // Remove the static SEO content before rendering the grid\r\n const staticContent = document.getElementById('static-seo-content');\r\n if (staticContent) {\r\n staticContent.remove();\r\n }\r\n\r\n // Build filter buttons and render the initial grid\r\n if (filtersEl) {\r\n let desktopFilterHtml = '';\r\n let categoryFilterHtml = '';\r\n gistCategories.forEach(cat => {\r\n categoryFilterHtml += ``;\r\n });\r\n desktopFilterHtml += categoryFilterHtml;\r\n filtersEl.innerHTML = desktopFilterHtml;\r\n }\r\n if (filtersDropdownEl) {\r\n let categoryFilterHtml = '';\r\n gistCategories.forEach(cat => {\r\n categoryFilterHtml += ``;\r\n });\r\n let dropdownHtml = ``;\r\n filtersDropdownEl.innerHTML = dropdownHtml;\r\n const dropdownToggle = filtersDropdownEl.querySelector('.vgal__filters-dropdown-toggle');\r\n if (dropdownToggle) {\r\n dropdownToggle.addEventListener('click', () => {\r\n filtersDropdownEl.classList.toggle('is-open');\r\n });\r\n }\r\n }\r\n setStatus('');\r\n renderGrid(allVideosData);\r\n\r\n // Initialize iframe pool for preloading and set up observer\r\n for (let i = 0; i < POOL_SIZE; i++) {\r\n const f = document.createElement('iframe');\r\n f.style.display = 'none';\r\n f.ariaHidden = 'true';\r\n document.body.appendChild(f);\r\n preloadFramePool.push(f);\r\n }\r\n setupIntersectionObserver();\r\n\r\n // Check URL for a video ID to open on load\r\n const urlParams = new URLSearchParams(window.location.search);\r\n const videoIdToOpen = urlParams.get('video');\r\n if (videoIdToOpen) {\r\n const videoToOpen = allVideosData.find(v => String(v.id) === videoIdToOpen);\r\n if (videoToOpen) {\r\n openLightbox(videoToOpen);\r\n }\r\n }\r\n } catch (err) {\r\n console.error('Vimeo Gallery Error:', err);\r\n setStatus('Could not load videos. Please check the URLs and ensure they are public.');\r\n }\r\n }\r\n\r\n // --- EVENT LISTENERS ---\r\n if (closeBtn) closeBtn.addEventListener('click', closeLightbox);\r\n if (prevBtn) prevBtn.addEventListener('click', () => navigateLightbox(-1));\r\n if (nextBtn) nextBtn.addEventListener('click', () => navigateLightbox(1));\r\n if (shareBtn) shareBtn.addEventListener('click', handleShare);\r\n if (filtersContainer) filtersContainer.addEventListener('click', handleFilterClick);\r\n if (lightbox) lightbox.addEventListener('click', e => {\r\n if (e.target === lightbox) closeLightbox();\r\n });\r\n document.addEventListener('keydown', handleGlobalKeydown);\r\n if (aboutBtn) {\r\n const isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);\r\n if (isTouchDevice) {\r\n aboutBtn.addEventListener('click', () => {\r\n if (descriptionBox) descriptionBox.classList.toggle('is-visible');\r\n });\r\n } else {\r\n aboutBtn.addEventListener('mouseenter', () => {\r\n if (descriptionBox) descriptionBox.classList.add('is-visible');\r\n });\r\n aboutBtn.addEventListener('mouseleave', () => {\r\n if (descriptionBox) descriptionBox.classList.remove('is-visible');\r\n });\r\n }\r\n }\r\n\r\n // Handle browser back/forward navigation\r\n window.onpopstate = function(event) {\r\n if (!lightbox) return;\r\n const params = new URLSearchParams(window.location.search);\r\n const videoId = params.get('video');\r\n if (videoId && allVideosData.length > 0) {\r\n const videoToOpen = allVideosData.find(v => String(v.id) === videoId);\r\n const isLightboxOpen = lightbox.classList.contains('is-open');\r\n const currentVideo = isLightboxOpen ? currentVideoList[currentVideoIndex] : null;\r\n if (videoToOpen && (!isLightboxOpen || (currentVideo && String(currentVideo.id) !== videoId))) {\r\n if (isLightboxOpen) {\r\n const newIndex = currentVideoList.findIndex(v => String(v.id) === videoId);\r\n if (newIndex !== -1 && newIndex !== currentVideoIndex) {\r\n isNavigating = true;\r\n currentVideoIndex = newIndex;\r\n if (player) player.onload = () => {\r\n completeProgressSimulation();\r\n updateNavState();\r\n updatePreloadedNavVideos();\r\n isNavigating = false;\r\n player.onload = null;\r\n };\r\n startProgressSimulation();\r\n loadVideoInLightbox(currentVideoList[currentVideoIndex]);\r\n }\r\n } else {\r\n openLightbox(videoToOpen);\r\n }\r\n }\r\n } else {\r\n if (lightbox.classList.contains('is-open')) {\r\n closeLightbox();\r\n }\r\n }\r\n };\r\n\r\n // --- START THE APP ---\r\n init();\r\n})();"}}],"id":"cc3chm9g","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","10px"],["bottom","10px"]],"flexBasis":"100%","alignItems":"stretch","margin":[["top","0px"]]}}],"id":"3ecaduzv","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","10px"],["left","10px"],["right","10px"],["bottom","10px"]],"flexBasis":"100%","justifyContent":"center"}}],"id":"ye5bjtmx","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}},"style":{"margin":[["top","0px"]],"padding":[["top","0px"]]},"media":{"mobile":{"style":{"margin":[["top","-40px"]]}}}}},"j8e628sn":{"name":"Navigation Menu 4","id":"j8e628sn","data":{"name":"Navigation Menu 4","content":[{"name":"Navigation Menu 4","holder":"root","type":"container","content":[{"name":"Navigation Menu 4","media":{"mobile":{"style":{"flexBasis":"100%","margin":[["bottom","0px"],["top","0px"]],"padding":[["top","0px"],["bottom","0px"]]}}},"holder":"container","type":"container","content":[{"type":"code","name":"Navigation Menu 4","_elType":"ELEMENT","component_path":"code","id":"5bel1ocr","advanced":{"html":"

\r\n

\r\n Home\r\n Portfolio\r\n Partners\r\n Feedback\r\n FAQ\r\n Studio\r\n Social\r\n \r\n Profile\r\n \r\n \r\n Contact\r\n

\r\n\r\n

\r\n \r\n\r\n \r\n

\r\n

\r\n\r\n","js":"// FineLine • Responsive Nav (pure JS, Dorik-safe)\r\n(function () {\r\n function bind() {\r\n var btn = document.getElementById('flp-menu-btn');\r\n var dd = document.getElementById('flp-menu-dd');\r\n var ico = document.getElementById('flp-menu-ico');\r\n if (!btn || !dd || !ico) return false;\r\n\r\n var OPEN = '';\r\n var CLOSED = '';\r\n\r\n function toggle() {\r\n var isHidden = dd.hasAttribute('hidden');\r\n if (isHidden) {\r\n dd.removeAttribute('hidden');\r\n btn.setAttribute('aria-expanded', 'true');\r\n ico.innerHTML = OPEN;\r\n } else {\r\n dd.setAttribute('hidden', '');\r\n btn.setAttribute('aria-expanded', 'false');\r\n ico.innerHTML = CLOSED;\r\n }\r\n }\r\n\r\n btn.addEventListener('click', function (e) { e.stopPropagation(); toggle(); });\r\n\r\n // Close on outside click\r\n document.addEventListener('click', function (e) {\r\n if (dd.hasAttribute('hidden')) return;\r\n if (!dd.contains(e.target) && !btn.contains(e.target)) {\r\n dd.setAttribute('hidden', '');\r\n btn.setAttribute('aria-expanded', 'false');\r\n ico.innerHTML = CLOSED;\r\n }\r\n });\r\n\r\n // Close on Escape\r\n document.addEventListener('keydown', function (e) {\r\n if (e.key === 'Escape' && !dd.hasAttribute('hidden')) {\r\n dd.setAttribute('hidden', '');\r\n btn.setAttribute('aria-expanded', 'false');\r\n ico.innerHTML = CLOSED;\r\n }\r\n });\r\n\r\n // bfcache restore consistency\r\n window.addEventListener('pageshow', function () {\r\n if (dd.hasAttribute('hidden')) {\r\n ico.innerHTML = CLOSED; btn.setAttribute('aria-expanded', 'false');\r\n } else {\r\n ico.innerHTML = OPEN; btn.setAttribute('aria-expanded', 'true');\r\n }\r\n });\r\n\r\n return true;\r\n }\r\n\r\n // Dorik can mount HTML after JS: retry a few times.\r\n function initWithRetry(tries) {\r\n if (bind()) return;\r\n if (tries <= 0) return;\r\n setTimeout(function(){ initWithRetry(tries - 1); }, 200);\r\n }\r\n\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', function(){ initWithRetry(10); }, { once: true });\r\n } else {\r\n initWithRetry(10);\r\n }\r\n})();","customStyle":{"general":""}},"style":{"margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"padding":[["right","0px"],["left","0px"],["bottom","0px"],["top","0px"]]}}],"id":"vhoylrh4","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","0px"],["bottom","0px"]],"flexBasis":"100%","alignItems":"stretch","margin":[["bottom","0px"],["top","0px"]]}}],"id":"3f7c7gk1","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","0px"],["left","0px"],["right","0px"],["bottom","0px"]],"flexBasis":"100%","justifyContent":"center","width":"100%"},"media":{"mobile":{"style":{"margin":[["bottom","0px"],["top","0px"]],"padding":[["top","0px"],["left","0px"],["right","0px"],["bottom","0px"]]}}}}],"id":"ikxdmwhd","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}},"style":{"padding":[["bottom","0px"],["right","0px"],["left","0px"],["top","0px"]],"margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]]},"advanced":{"customStyle":{"general":"position: sticky;\r\ntop: 0;\r\nleft: 0;\r\nwidth: 100%;\r\nz-index: 9999;\r\n\r\nbackground-color: rgba(0, 0, 0, 0.5);\r\nbackdrop-filter: blur(8px);"}},"attr":{"customClass":["main-nav-section"]}}},"ipu08du7":{"name":"Footer 2026","id":"ipu08du7","data":{"name":"Section","content":[{"name":"Container","holder":"root","type":"container","content":[{"name":"Container","media":{"mobile":{"style":{"flexBasis":"100%"}}},"holder":"container","type":"container","content":[{"type":"code","name":"Footer","_elType":"ELEMENT","component_path":"code","id":"1nuqnvc9","advanced":{"html":"\r\n\r\n\r\n \r\n \r\n Full-Width Sticky Footer\r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n\r\n\r\n

\r\n

\r\n\r\n \r\n \r\n\r\n","js":""}}],"id":"r45wh41p","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","10px"],["bottom","0px"],["right","0px"],["left","0px"]],"flexBasis":"100%","alignItems":"stretch"}}],"id":"cd38xjeq","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","10px"],["left","0px"],["right","0px"],["bottom","0px"]],"flexBasis":"100%","justifyContent":"center","width":"100%"}}],"id":"0tc9uq4l","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}}}},"ij9wjymv":{"name":"Milestones Nodes","id":"ij9wjymv","data":{"name":"Milestones Nodes","content":[{"name":"Container","holder":"container","type":"container","content":[{"name":"Container","holder":"container","type":"container","content":[{"type":"code","name":"Milestones Nodes","_elType":"ELEMENT","component_path":"code","id":"jh6o3uxf","advanced":{"html":"\r\n

\r\n \r\n

\r\n

\r\n Loading…\r\n

\r\n\r\n \r\n \r\n\r\n \r\n

\r\n

\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","js":"// FLP Timeline — Robust draw (waits for stable layout before drawing)\r\n(function () {\r\n const root = document.querySelector('#flp-timeline-1');\r\n if (!root) return;\r\n\r\n const svgContainer = root.querySelector('#rope-svg');\r\n const grid = root.querySelector('.timeline-grid');\r\n const loader = root.querySelector('.flp-loader');\r\n\r\n const milestoneData = [\r\n { date: 'Sep 2017', milestone: 'First Office' },\r\n { date: 'Sep 2017', milestone: 'First Project' },\r\n { date: 'Oct 2018', milestone: 'First TVC' },\r\n { date: 'Dec 2019', milestone: 'First Office Expansion' },\r\n { date: 'Apr 2020', milestone: 'First Animation' },\r\n { date: 'Nov 2020', milestone: 'First Campaign' },\r\n { date: 'Jul 2021', milestone: 'First Documentary' },\r\n { date: 'Sep 2021', milestone: 'First LTA' },\r\n { date: 'Dec 2021', milestone: 'Team Expansion' },\r\n { date: 'Dec 2021', milestone: 'Second Office Expansion' },\r\n { date: 'Sep 2022', milestone: 'First Project Abroad' },\r\n { date: 'Sep 2025', milestone: '85 Clients & 7 LTAs' }\r\n ];\r\n\r\n /* ---------- helpers ---------- */\r\n const rAF = () => new Promise(res => requestAnimationFrame(res));\r\n const nextPaint = async (n = 2) => { while (n--) await rAF(); };\r\n\r\n function debounce(fn, ms) {\r\n let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };\r\n }\r\n\r\n function getColumnsCount() {\r\n const style = window.getComputedStyle(grid);\r\n return style.getPropertyValue('grid-template-columns').split(' ').length;\r\n }\r\n\r\n function getSnakeConnectionOrder() {\r\n const cols = getColumnsCount();\r\n const ids = Array.from(grid.children).map(b => b.id);\r\n const order = [];\r\n for (let i = 0; i < ids.length; i += cols) {\r\n const chunk = ids.slice(i, i + cols);\r\n if ((i / cols) % 2 !== 0) chunk.reverse();\r\n order.push(...chunk);\r\n }\r\n return order;\r\n }\r\n\r\n function populateBlocks() {\r\n const order = getSnakeConnectionOrder();\r\n order.forEach((blockId, i) => {\r\n const block = root.querySelector('#' + blockId);\r\n const data = milestoneData[i];\r\n if (!block || !data) return;\r\n block.innerHTML = `\r\n

${data.date}

\r\n

${data.milestone}

\r\n `;\r\n });\r\n return order;\r\n }\r\n\r\n function drawRope(order) {\r\n svgContainer.innerHTML = '';\r\n const containerRect = root.getBoundingClientRect();\r\n let pathData = '';\r\n\r\n for (let i = 0; i < order.length; i++) {\r\n const block = root.querySelector('#' + order[i]);\r\n if (!block) continue;\r\n const rect = block.getBoundingClientRect();\r\n if (rect.width === 0 || rect.height === 0) return; // not ready yet\r\n\r\n const x = rect.left - containerRect.left + rect.width / 2;\r\n const y = rect.top - containerRect.top + rect.height / 2;\r\n pathData += (i === 0) ? `M ${x} ${y}` : ` L ${x} ${y}`;\r\n }\r\n\r\n const basePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');\r\n basePath.setAttribute('class', 'rope-segment');\r\n basePath.setAttribute('d', pathData);\r\n svgContainer.appendChild(basePath);\r\n }\r\n\r\n async function waitForStableLayout({ maxWaitMs = 1200, stableWindowMs = 120 } = {}) {\r\n const start = performance.now();\r\n let lastSig = '';\r\n let stableSince = performance.now();\r\n\r\n while (performance.now() - start < maxWaitMs) {\r\n const rect = grid.getBoundingClientRect();\r\n const cols = getColumnsCount();\r\n const sig = `${Math.round(rect.width)}x${Math.round(rect.height)}@${cols}`;\r\n\r\n if (sig !== lastSig) {\r\n lastSig = sig;\r\n stableSince = performance.now();\r\n }\r\n if (performance.now() - stableSince >= stableWindowMs) return true;\r\n await rAF();\r\n }\r\n return false; // fallback after timeout\r\n }\r\n\r\n function render() {\r\n const order = populateBlocks();\r\n drawRope(order);\r\n }\r\n\r\n const scheduleRender = debounce(() => {\r\n // double paint to ensure fresh rects after any CSS change\r\n nextPaint(2).then(render);\r\n }, 60);\r\n\r\n async function init() {\r\n // 1) Wait for fonts (if supported)\r\n try { await (document.fonts && document.fonts.ready); } catch {}\r\n // 2) Give layout 2 paints to settle\r\n await nextPaint(2);\r\n // 3) Wait until grid is stable (height/cols stop changing briefly)\r\n await waitForStableLayout();\r\n // 4) Render rope\r\n render();\r\n // 5) Remove loader a moment after first render\r\n setTimeout(() => loader?.remove(), 120);\r\n\r\n // Extra safety redraws in case of late layout shifts\r\n setTimeout(scheduleRender, 250);\r\n setTimeout(scheduleRender, 600);\r\n\r\n // Events that can affect rects/rows\r\n window.addEventListener('resize', scheduleRender, { passive: true });\r\n window.addEventListener('scroll', scheduleRender, { passive: true });\r\n window.addEventListener('orientationchange', scheduleRender, { passive: true });\r\n\r\n if (window.ResizeObserver) {\r\n const ro = new ResizeObserver(scheduleRender);\r\n ro.observe(grid);\r\n ro.observe(root);\r\n }\r\n\r\n // When page is restored from bfcache\r\n window.addEventListener('pageshow', e => { if (e.persisted) scheduleRender(); });\r\n document.addEventListener('visibilitychange', () => { if (!document.hidden) scheduleRender(); });\r\n }\r\n\r\n if (document.readyState === 'complete') init();\r\n else window.addEventListener('load', init);\r\n})();\r\n"}}],"id":"m3gqj59f","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","10px"],["bottom","10px"]],"flexBasis":"100%","alignItems":"stretch"}}],"id":"g75t9i0k","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"flexBasis":"100%","alignItems":"unset","margin":[["right","0px"],["left","0px"],["bottom","0px"],["top","0px"]],"justifyContent":"unset","width":""}}],"id":"vjpmg5sx","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}},"style":{"zIndex":"50","margin":[["top","0px"],["bottom","0px"],["left","0px"],["right","0px"]],"padding":[["bottom","0px"],["top","0px"],["right","0px"],["left","0px"]]},"advanced":{"customStyle":{"general":""}}}}}}

Get in Touch

Contact Information

Follow Us

Our Portfolio will load momentarily.

Get in Touch

Contact Information

Follow Us

Thank You!

Our Portfolio will load momentarily.