{"version":3,"file":"SectionClients.global.7c560773.js","sources":["../../../../assets/images/clients/moon.webp","../../../../assets/images/clients/moon-black.webp","../../../../assets/images/backgrounds/rocket-mobile.webp","../../../../components/section/clients/SectionClients.global.vue"],"sourcesContent":["export default \"__VITE_ASSET__a7cc00ee__\"","export default \"__VITE_ASSET__7ecd0ac0__\"","export default \"__VITE_ASSET__2a340b95__\"","<template>\n  <div\n    ref=\"sectionClientsRef\"\n    class=\"relative flex h-screen min-h-[820px] items-center justify-center overflow-hidden text-white transition-colors duration-500 ease-linear\"\n    :class=\"data.background === 'Black' ? 'bg-neutral-800' : 'bg-noiseGradientGreen'\"\n  >\n    <div v-if=\"data.background === 'Black'\" class=\"absolute right-0 max-w-2xl\">\n      <img\n        loading=\"lazy\"\n        :src=\"moonBlack\"\n        class=\"object-cover\"\n        :width=\"1600\"\n        :height=\"1600\"\n        alt=\"Moon\"\n      />\n    </div>\n    <div\n      v-else\n      class=\"w-[calc(100%+50vw) absolute -bottom-[50vh] -left-52 top-auto h-full scale-[1.4] lg:bottom-auto 2xl:-top-20\"\n    >\n      <img\n        loading=\"lazy\"\n        :src=\"moon\"\n        class=\"object-cover\"\n        :width=\"1600\"\n        :height=\"1600\"\n        alt=\"Moon\"\n      />\n    </div>\n\n    <div ref=\"stage\" class=\"absolute z-[3] h-full min-h-screen w-full\">\n      <div\n        v-for=\"client in data.clientList.clients\"\n        ref=\"words\"\n        :key=\"client.id\"\n        class=\"word absolute w-fit text-center italic\"\n      >\n        {{ client.client }}\n      </div>\n    </div>\n\n    <div\n      v-if=\"data.background !== 'Black' && isDesktop\"\n      class=\"absolute hidden h-full w-full lg:block\"\n    >\n      <img\n        loading=\"lazy\"\n        class=\"absolute -left-1/3 bottom-0 z-2 lg:-bottom-1/2 2xl:-bottom-3/4\"\n        :src=\"rocketBackground\"\n        alt=\"STI Rocket\"\n        width=\"2600\"\n        height=\"1300\"\n      />\n    </div>\n    <div v-if=\"data.background !== 'Black' && !isDesktop\" class=\"absolute h-full w-full lg:hidden\">\n      <img\n        loading=\"lazy\"\n        class=\"absolute -left-1/3 bottom-0 z-2 sm:-bottom-1/3\"\n        :src=\"rocketMobileBg\"\n        alt=\"STI Rocket\"\n        width=\"650\"\n        height=\"1300\"\n      />\n    </div>\n\n    <div\n      v-if=\"data.title\"\n      ref=\"headingRef\"\n      class=\"clients-heading container relative z-10 scale-0 text-center text-5xl-ub text-white\"\n      v-html=\"data.title\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n// import EarthManager from './renderEarth'\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\nimport type { SectionClientListRecord } from '~/types/generated'\nimport moon from '~/assets/images/clients/moon.webp'\nimport moonBlack from '~/assets/images/clients/moon-black.webp'\nimport rocketBackground from '~/assets/images/backgrounds/rocket.webp'\nimport rocketMobileBg from '~/assets/images/backgrounds/rocket-mobile.webp'\nimport { theme } from '#tailwind-config'\n\nconst breakpoints = useBreakpoints(theme.screens)\nconst isLG = breakpoints.greater('lg')\n\nconst { isDesktop } = useDevice()\n\nconst props = defineProps({\n  data: {\n    type: Object as PropType<SectionClientListRecord>,\n    default: () => {}\n  }\n})\n\nconst isMounted = ref(false)\n// let sceneManager: any | undefined = null\nconst stage: Ref<HTMLDivElement | null> = ref(null)\nconst words: Ref<HTMLElement[] | null> = ref(null)\n\nconst sectionClientsRef = ref<HTMLElement | null>(null)\nconst headingRef = ref<HTMLElement | null>(null)\nlet tween: null | any = null\n\nconst isInViewport = ref(false)\n\nconst { stop } = useIntersectionObserver(\n  sectionClientsRef,\n  ([{ isIntersecting }], _observerElement) => {\n    if (isIntersecting) {\n      isInViewport.value = true\n      animateWords()\n    } else {\n      isInViewport.value = false\n      words.value?.forEach(word => {\n        word.style.animation = ''\n      })\n    }\n  },\n  {\n    threshold: 0.1\n  }\n)\n\nconst wordTopOffset = ref(0)\n\nfunction animateWords() {\n  const animationDuration = isLG.value ? 21000 : 16000 // Adjust as needed\n  words.value?.forEach((word, index) => {\n    if (stage.value?.offsetHeight && stage.value?.offsetWidth) {\n      const delay = isLG.value\n        ? index * 0.1 * (animationDuration / 6) +\n          Math.floor(Math.random() * (4000 - 1000 + 1) + 1000)\n        : index * 0.6 * (animationDuration / 16) + Math.floor(Math.random() * (500 - 200 + 1) + 200)\n      const element = word as HTMLElement\n\n      // Set initial left position\n      element.style.left = '0px'\n      element.style.animation = `initialFadeInTranslate ${animationDuration}ms linear ${delay}ms forwards infinite`\n      element.style.fontSize = `${props.data.clientList.clients[index].importance}px`\n\n      element.style.top = `${wordTopOffset.value}px`\n\n      wordTopOffset.value += element.clientHeight\n\n      if (wordTopOffset.value > stage.value?.offsetHeight) {\n        wordTopOffset.value = 0\n      }\n\n      useTimeoutFn(() => {\n        if (isLG.value) {\n          element.style.animation = `fadeInTranslate ${animationDuration * 2}ms linear ${delay}ms forwards infinite`\n        } else {\n          element.style.animation = `fadeInTranslateMobile ${animationDuration * 4}ms linear ${delay / 4}ms forwards infinite`\n        }\n      }, delay + animationDuration)\n    }\n  })\n}\n\nonMounted(() => {\n  useTimeoutFn(() => {\n    isMounted.value = true\n  }, 500)\n\n  if (sectionClientsRef.value && headingRef.value) {\n    gsap.registerPlugin(ScrollTrigger)\n\n    tween = gsap.timeline({\n      scrollTrigger: {\n        trigger: sectionClientsRef.value,\n        start: 'top top',\n        markers: false\n      }\n    })\n\n    tween.to(headingRef.value, {\n      opacity: 1,\n      scale: 1,\n      duration: 3\n    })\n    tween.to(\n      headingRef.value,\n      {\n        opacity: 0,\n        duration: 1\n      },\n      '-=1'\n    )\n    ScrollTrigger.refresh()\n  }\n})\n\nonUnmounted(() => {\n  tween?.kill()\n  stop()\n})\n</script>\n\n<style lang=\"postcss\">\n.clients-heading mark {\n  color: white;\n}\n\n.word {\n  position: absolute;\n  transform: scale(0);\n  font-weight: bold;\n  -webkit-text-stroke: 1px white;\n  color: transparent;\n}\n\n@keyframes initialFadeInTranslate {\n  0% {\n    transform: translateX(-100%); /* Start off-screen on the left */\n  }\n  100% {\n    transform: translateX(100vw); /* Move off-screen on the right */\n  }\n}\n\n@keyframes fadeInTranslate {\n  0% {\n    left: -40vw;\n    transform: translateX(-100%); /* Start off-screen on the left */\n  }\n  100% {\n    left: 0;\n    transform: translateX(100vw); /* Move off-screen on the right */\n  }\n}\n\n@keyframes fadeInTranslateMobile {\n  0% {\n    left: -400vw;\n    transform: translateX(-100%); /* Start off-screen on the left */\n  }\n  100% {\n    left: 0;\n    transform: translateX(100vw); /* Move off-screen on the right */\n  }\n}\n</style>\n"],"names":["moon","moonBlack","rocketMobileBg","isLG","useBreakpoints","theme","isDesktop","useDevice","props","__props","isMounted","ref","stage","words","sectionClientsRef","headingRef","tween","isInViewport","stop","useIntersectionObserver","isIntersecting","_observerElement","animateWords","_a","word","wordTopOffset","animationDuration","index","_b","delay","element","_c","useTimeoutFn","onMounted","gsap","ScrollTrigger","onUnmounted"],"mappings":"mYAAA,MAAeA,EAAA,GAAA,IAAA,IAAA,qBAAA,YAAA,GAAA,EAAA,KCAAC,EAAA,GAAA,IAAA,IAAA,2BAAA,YAAA,GAAA,EAAA,KCAAC,EAAA,GAAA,IAAA,IAAA,8BAAA,YAAA,GAAA,EAAA,6aCsFT,MAAAC,EADcC,EAAeC,EAAM,OAAO,EACvB,QAAQ,IAAI,EAE/B,CAAE,UAAAC,GAAcC,IAEhBC,EAAQC,EAORC,EAAYC,EAAI,EAAK,EAErBC,EAAoCD,EAAI,IAAI,EAC5CE,EAAmCF,EAAI,IAAI,EAE3CG,EAAoBH,EAAwB,IAAI,EAChDI,EAAaJ,EAAwB,IAAI,EAC/C,IAAIK,EAAoB,KAElB,MAAAC,EAAeN,EAAI,EAAK,EAExB,CAAE,KAAAO,GAASC,EACfL,EACA,CAAC,CAAC,CAAE,eAAAM,EAAgB,EAAGC,IAAqB,OACtCD,GACFH,EAAa,MAAQ,GACRK,MAEbL,EAAa,MAAQ,IACfM,EAAAV,EAAA,QAAA,MAAAU,EAAO,QAAgBC,GAAA,CAC3BA,EAAK,MAAM,UAAY,EAAA,GAG7B,EACA,CACE,UAAW,EACb,CAAA,EAGIC,EAAgBd,EAAI,CAAC,EAE3B,SAASW,GAAe,OAChB,MAAAI,EAAoBvB,EAAK,MAAQ,KAAQ,MAC/CoB,EAAAV,EAAM,QAAN,MAAAU,EAAa,QAAQ,CAACC,EAAMG,IAAU,WACpC,IAAIJ,EAAAX,EAAM,QAAN,MAAAW,EAAa,gBAAgBK,EAAAhB,EAAM,QAAN,MAAAgB,EAAa,aAAa,CACzD,MAAMC,EAAQ1B,EAAK,MACfwB,EAAQ,IAAOD,EAAoB,GACnC,KAAK,MAAM,KAAK,OAAO,EAAK,KAAmB,GAAI,EACnDC,EAAQ,IAAOD,EAAoB,IAAM,KAAK,MAAM,KAAK,OAAO,EAAK,IAAiB,GAAG,EACvFI,EAAUN,EAGhBM,EAAQ,MAAM,KAAO,MACrBA,EAAQ,MAAM,UAAY,0BAA0BJ,CAAiB,aAAaG,CAAK,uBAC/EC,EAAA,MAAM,SAAW,GAAGtB,EAAM,KAAK,WAAW,QAAQmB,CAAK,EAAE,UAAU,KAE3EG,EAAQ,MAAM,IAAM,GAAGL,EAAc,KAAK,KAE1CA,EAAc,OAASK,EAAQ,aAE3BL,EAAc,QAAQM,EAAAnB,EAAM,QAAN,YAAAmB,EAAa,gBACrCN,EAAc,MAAQ,GAGxBO,EAAa,IAAM,CACb7B,EAAK,MACP2B,EAAQ,MAAM,UAAY,mBAAmBJ,EAAoB,CAAC,aAAaG,CAAK,uBAEpFC,EAAQ,MAAM,UAAY,yBAAyBJ,EAAoB,CAAC,aAAaG,EAAQ,CAAC,sBAChG,EACCA,EAAQH,CAAiB,CAC9B,CAAA,EAEJ,CAEA,OAAAO,EAAU,IAAM,CACdD,EAAa,IAAM,CACjBtB,EAAU,MAAQ,IACjB,GAAG,EAEFI,EAAkB,OAASC,EAAW,QACxCmB,EAAK,eAAeC,CAAa,EAEjCnB,EAAQkB,EAAK,SAAS,CACpB,cAAe,CACb,QAASpB,EAAkB,MAC3B,MAAO,UACP,QAAS,EACX,CAAA,CACD,EAEKE,EAAA,GAAGD,EAAW,MAAO,CACzB,QAAS,EACT,MAAO,EACP,SAAU,CAAA,CACX,EACKC,EAAA,GACJD,EAAW,MACX,CACE,QAAS,EACT,SAAU,CACZ,EACA,KAAA,EAEFoB,EAAc,QAAQ,EACxB,CACD,EAEDC,EAAY,IAAM,CAChBpB,GAAA,MAAAA,EAAO,OACFE,GAAA,CACN"}