{"version":3,"file":"Bnv2hzFk.js","sources":["../../../../../../../app/components/sections/SectionContactUs.global.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport gsap from 'gsap'\nimport { SplitText } from 'gsap/SplitText'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\n\nconst props = defineProps<{\n  data: SectionContactRecord\n  moduleIndex: number\n}>()\n\nconst { level, isSemantic, invertedStyles } = useSectionRules(\n  props.moduleIndex,\n  props.data.invertColorTheme\n)\n\nconst ctxRef = ref<HTMLElement | null>(null)\nconst ctxFrame = ref<HTMLElement | null>(null)\n\nlet ctx: gsap.Context | null = null\nlet tl: GSAPTimeline | null = null\n\nonMounted(() => {\n  if (ctxRef.value) {\n    gsap.registerPlugin(ScrollTrigger, SplitText)\n\n    ctx = gsap.context(() => {\n      // Text Reveal\n      const split = new SplitText('.fx-text-reveal', { type: 'lines' })\n\n      split.lines.forEach((target) => {\n        gsap.to(target, {\n          backgroundPositionX: 0,\n          ease: 'none',\n          scrollTrigger: {\n            trigger: target,\n            markers: false,\n            scrub: 1,\n            start: 'top 60%',\n            end: 'bottom 60%'\n          }\n        })\n      })\n\n      // Animated Frames\n      gsap.set('.fx-frame-l', { clipPath: 'polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)' })\n      gsap.set('.fx-frame-r', { clipPath: 'polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)' })\n      gsap.set('.fx-frame-y', { clipPath: 'polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)' })\n\n      tl = gsap.timeline({\n        scrollTrigger: {\n          trigger: ctxFrame.value,\n          start: 'center bottom'\n        }\n      })\n      tl.to('.fx-frame-l, .fx-frame-r, .fx-frame-y', {\n        duration: 1.5,\n        clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',\n        ease: 'power4.out'\n      })\n    }, ctxRef.value as HTMLElement)\n  }\n})\n\nonUnmounted(() => {\n  if (ctx) {\n    ctx.revert()\n  }\n})\n</script>\n\n<template>\n  <div ref=\"ctxRef\" class=\"py-12\" :class=\"invertedStyles\">\n    <div class=\"container grid-default relative gap-y-12 lg:gap-y-18\">\n      <div class=\"col-span-full xl:col-span-10 xl:col-start-2\">\n        <div ref=\"ctxFrame\" class=\"relative mx-auto max-w-xs py-[9rem] lg:max-w-none lg:py-0\">\n          <div\n            class=\"flex w-full flex-col items-center gap-1 lg:h-[12.688rem] lg:flex-row lg:justify-between lg:gap-5 lg:px-28\"\n          >\n            <svg\n              class=\"fx-frame-y absolute left-1/2 top-0 -translate-x-1/2 mix-blend-difference invert lg:hidden\"\n              width=\"345\"\n              height=\"170\"\n              viewBox=\"0 0 345 170\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M1.5 169.529V139.94C1.5 127.27 11.8013 116.999 24.5081 116.999H126.365\"\n                stroke=\"#1D1D1B\"\n                stroke-width=\"2\"\n                stroke-miterlimit=\"10\"\n              />\n              <path\n                d=\"M219.637 117.003H322.479C334.364 117.003 344 127.274 344 139.944V169.533\"\n                stroke=\"#1D1D1B\"\n                stroke-width=\"2\"\n                stroke-miterlimit=\"10\"\n              />\n              <path d=\"M172.499 0L172.499 116.93\" stroke=\"black\" stroke-width=\"2\" />\n            </svg>\n\n            <svg\n              class=\"fx-frame-y absolute bottom-0 left-1/2 -translate-x-1/2 mix-blend-difference invert lg:hidden\"\n              width=\"345\"\n              height=\"170\"\n              viewBox=\"0 0 345 170\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M344 0.00390625V29.5934C344 42.2631 333.684 52.5343 320.958 52.5343L218.953 52.5343\"\n                stroke=\"#1D1D1B\"\n                stroke-width=\"2\"\n                stroke-miterlimit=\"10\"\n              />\n              <path\n                d=\"M125.545 52.5304L22.5529 52.5304C10.6499 52.5304 1.00027 42.2592 1.00027 29.5895V0\"\n                stroke=\"#1D1D1B\"\n                stroke-width=\"2\"\n                stroke-miterlimit=\"10\"\n              />\n              <path d=\"M172.751 169.533L172.751 52.6032\" stroke=\"black\" stroke-width=\"2\" />\n            </svg>\n\n            <svg\n              class=\"fx-frame-l absolute left-1/2 top-0 hidden origin-center -translate-x-1/2 rotate-90 mix-blend-difference invert lg:left-0 lg:block lg:translate-x-0 lg:rotate-0\"\n              width=\"135\"\n              height=\"203\"\n              viewBox=\"0 0 135 203\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M82 53.5366V23.9409C82 11.2712 92.2712 1 104.941 1H134.537\"\n                stroke=\"#1D1D1B\"\n                stroke-width=\"2\"\n                stroke-miterlimit=\"10\"\n              />\n              <path\n                d=\"M134.537 202H104.941C92.2712 202 82 191.729 82 179.059V149.47\"\n                stroke=\"#1D1D1B\"\n                stroke-width=\"2\"\n                stroke-miterlimit=\"10\"\n              />\n              <path d=\"M-34 101.5L82.5 101.5\" stroke=\"black\" stroke-width=\"2\" />\n            </svg>\n            <Heading\n              v-if=\"data.title\"\n              class=\"text-center text-2xl font-bold lg:max-w-sm lg:text-left lg:text-3xl-b\"\n              :level=\"level\"\n              :size=\"undefined\"\n              :is-semantic=\"isSemantic\"\n            >\n              <TextReveal>\n                {{ data.title }}\n              </TextReveal>\n            </Heading>\n            <div\n              v-if=\"data.subtitle\"\n              class=\"fx-text-reveal text-center font-semibold lg:max-w-[14rem] lg:text-right lg:text-lg lg:leading-snug\"\n            >\n              {{ data.subtitle }}\n            </div>\n            <svg\n              class=\"fx-frame-r absolute bottom-0 left-1/2 hidden -translate-x-1/2 rotate-90 mix-blend-difference invert lg:left-auto lg:right-0 lg:block lg:translate-x-0 lg:-rotate-0\"\n              width=\"135\"\n              height=\"203\"\n              viewBox=\"0 0 135 203\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M52.5371 149.463L52.5371 179.059C52.5371 191.729 42.2659 202 29.5962 202L0.000499277 202\"\n                stroke=\"#1D1D1B\"\n                stroke-width=\"2\"\n                stroke-miterlimit=\"10\"\n              />\n              <path\n                d=\"M0.000503563 0.999866L29.5962 0.999868C42.2659 0.999869 52.5371 11.2711 52.5371 23.9408L52.5371 53.5303\"\n                stroke=\"#1D1D1B\"\n                stroke-width=\"2\"\n                stroke-miterlimit=\"10\"\n              />\n              <path d=\"M168.537 101.5L52.0371 101.5\" stroke=\"black\" stroke-width=\"2\" />\n            </svg>\n          </div>\n        </div>\n        <template v-if=\"Array.isArray(data.buttons) && data.buttons.length\">\n          <Button\n            v-for=\"button in data.buttons\"\n            :key=\"button.id\"\n            :to=\"button.reference?.slug ?? undefined\"\n            variant=\"primary\"\n            class=\"absolute bottom-12 left-1/2 hidden -translate-x-1/2 uppercase lg:bottom-6 lg:inline-block lg:text-2xl lg:font-bold\"\n            ><TextReveal>\n              {{ button.label }}\n            </TextReveal>\n          </Button>\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"css\">\n.fx-text-reveal > div {\n  background: linear-gradient(to right, #ff69e7 25%, #68e4ff 50%, rgb(37, 37, 37) 50%);\n  background-size: 200% 100%;\n  background-position-x: 100%;\n  color: transparent;\n  background-clip: text;\n  -webkit-background-clip: text;\n}\n</style>\n"],"names":["props","__props","level","isSemantic","invertedStyles","useSectionRules","ctxRef","ref","ctxFrame","ctx","tl","onMounted","gsap","ScrollTrigger","SplitText","target","onUnmounted"],"mappings":"4uBAKA,MAAMA,EAAQC,EAKR,CAAE,MAAAC,EAAO,WAAAC,EAAY,eAAAC,CAAmB,EAAAC,EAC5CL,EAAM,YACNA,EAAM,KAAK,gBACb,EAEMM,EAASC,EAAwB,IAAI,EACrCC,EAAWD,EAAwB,IAAI,EAE7C,IAAIE,EAA2B,KAC3BC,EAA0B,KAE9B,OAAAC,EAAU,IAAM,CACVL,EAAO,QACJM,EAAA,eAAeC,EAAeC,CAAS,EAEtCL,EAAAG,EAAK,QAAQ,IAAM,CAET,IAAIE,EAAU,kBAAmB,CAAE,KAAM,QAAS,EAE1D,MAAM,QAASC,GAAW,CAC9BH,EAAK,GAAGG,EAAQ,CACd,oBAAqB,EACrB,KAAM,OACN,cAAe,CACb,QAASA,EACT,QAAS,GACT,MAAO,EACP,MAAO,UACP,IAAK,YAAA,CACP,CACD,CAAA,CACF,EAGDH,EAAK,IAAI,cAAe,CAAE,SAAU,kDAAmD,EACvFA,EAAK,IAAI,cAAe,CAAE,SAAU,0CAA2C,EAC/EA,EAAK,IAAI,cAAe,CAAE,SAAU,0CAA2C,EAE/EF,EAAKE,EAAK,SAAS,CACjB,cAAe,CACb,QAASJ,EAAS,MAClB,MAAO,eAAA,CACT,CACD,EACDE,EAAG,GAAG,wCAAyC,CAC7C,SAAU,IACV,SAAU,8CACV,KAAM,YAAA,CACP,CAAA,EACAJ,EAAO,KAAoB,EAChC,CACD,EAEDU,EAAY,IAAM,CACZP,GACFA,EAAI,OAAO,CACb,CACD"}