{"version":3,"file":"CeqKn7IK.js","sources":["../../../../components/widget/clip-path-text/title/index.vue","../../../../components/widget/clip-path-text/titles/index.vue","../../../../components/widget/clip-path-text/descriptions/index.vue","../../../../components/widget/clip-path-text/index.vue","../../../../components/pages/home/clip-path-text/index.vue","../../../../assets/img/ico/ico-press-white-orange.svg","../../../../assets/img/ico/ico-press-black-orange.svg","../../../../components/widget/click-hold-section/index.vue","../../../../components/pages/home/click-hold-path-text/index.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    class=\"clip-path-text__title custom-left-p custom-right-p\"\n  >\n    <div\n      class=\"clip-path-text__wrapper\"\n      @mouseover=\"handleMouseOver\"\n      @mouseleave=\"handleMouseLeave\"\n    >\n      <p ref=\"animatedTitle\" class=\"background-title\">{{ title }}</p>\n      <p class=\"foreground-title\">{{ title }}</p>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'WidgetClipPathTextTitle',\n}\n</script>\n\n<script setup>\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\n\ngsap.registerPlugin(ScrollTrigger)\n\nconst props = defineProps({\n  data: Object,\n})\nconst emit = defineEmits(['setSelectedProject'])\n\nconst { title, i } = props.data\nconst container = ref(null)\nconst animatedTitle = ref(null)\n\nconst handleMouseOver = () => {\n  emit('setSelectedProject', i)\n}\n\nconst handleMouseLeave = () => {\n  emit('setSelectedProject', null)\n}\n\nonMounted(() => {\n  gsap.to(animatedTitle.value, {\n    scrollTrigger: {\n      trigger: container.value,\n      start: 'top bottom',\n      end: 'bottom center',\n      scrub: true,\n      onUpdate: (self) => {\n        const progress = self.progress.toFixed(3)\n        if (animatedTitle.value)\n          animatedTitle.value.style.clipPath = `inset(0 0 0 ${progress * 100}%)`\n      },\n    },\n  })\n})\n</script>\n\n<style scoped>\n@import './style.scss';\n</style>\n","<template>\n  <div class=\"clip-path-text__titles\">\n    <WidgetClipPathTextTitle\n      v-for=\"(project, i) in data\"\n      :key=\"i\"\n      :data=\"{ ...project, i }\"\n      @setSelectedProject=\"setSelectedProject\"\n    />\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'WidgetClipPathTextTitles',\n}\n</script>\n\n<script setup>\nconst props = defineProps({\n  data: Array,\n})\nconst emit = defineEmits(['setSelectedProject'])\n\nconst setSelectedProject = (index) => {\n  emit('setSelectedProject', index)\n}\n</script>\n\n<style lang=\"scss\">\n@import './style.scss';\n</style>\n","<template>\n  <div class=\"clip-path-text__descriptions\">\n    <div\n      v-for=\"(project, i) in data\"\n      :key=\"i\"\n      class=\"clip-path-text__description\"\n      :style=\"{\n        clipPath:\n          selectedProject === i ? 'inset(0 0 0 0)' : 'inset(50% 0 50% 0)',\n      }\"\n    >\n      <p class=\"fallback-title\">{{ crop(project.title, 9) }}</p>\n      <div\n        class=\"custom-left-p custom-right-p\"\n        v-html=\"project.descriptionHtml\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'WidgetClipPathTextDescriptions',\n}\n</script>\n\n<script setup>\nconst props = defineProps({\n  data: Array,\n  selectedProject: Number,\n})\n\nconst crop = (string, maxLength) => {\n  return string.substring(0, maxLength)\n}\n</script>\n\n<style lang=\"scss\">\n@import './style.scss';\n</style>\n","<template>\n  <div class=\"clip-path-text__wrap\">\n    <WidgetClipPathTextTitles\n      :data=\"props.data\"\n      @setSelectedProject=\"setSelectedProject\"\n    />\n    <WidgetClipPathTextDescriptions\n      :data=\"props.data\"\n      :selectedProject=\"selectedProject\"\n    />\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'WidgetClipPathText',\n}\n</script>\n\n<script setup>\nconst props = defineProps({\n  title: String,\n  data: {\n    type: Array,\n    required: true,\n  },\n})\n\nconst selectedProject = ref(null)\n\nconst setSelectedProject = (index) => {\n  selectedProject.value = index\n}\n</script>\n","<template>\n  <div class=\"pages-home-clip-path-text p-top-160-100 p-bot-160-100\">\n    <h2\n      v-if=\"props.title\"\n      class=\"m-bottom-24px text-caption custom-left-p custom-right-p\"\n    >\n      {{ props.title }}\n    </h2>\n\n    <WidgetClipPathText :data=\"data\" />\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'PagesHomeClipPathText',\n}\n</script>\n\n<script setup>\nconst props = defineProps({\n  title: String,\n  data: {\n    type: Array,\n    required: true,\n  },\n})\n</script>\n\n<style scoped>\n@import './style.scss';\n</style>\n","export default \"__VITE_ASSET__C6HLE__1__\"","export default \"__VITE_ASSET__VY4sIHkX__\"","<template>\n  <div class=\"click-hold-section\" :class=\"{ '--hide-btn': hideButton }\">\n    <div class=\"click-hold-section__mask\">\n      <div ref=\"maskRef\" class=\"click-hold-section__mask__item\"></div>\n    </div>\n    <div ref=\"maskContentRef\" class=\"click-hold-section__mask__content\">\n      <slot name=\"mask\" />\n    </div>\n    <div class=\"click-hold-section__body\">\n      <slot name=\"body\" />\n    </div>\n\n    <button\n      ref=\"buttonRef\"\n      class=\"click-hold-section__button\"\n      @mousedown=\"startHold\"\n      @mouseup=\"endHold\"\n      @mouseleave=\"endHold\"\n      @touchstart=\"startHold\"\n      @touchend=\"endHold\"\n      @touchcancel=\"endHold\"\n    >\n      <img\n        v-if=\"props.isDark\"\n        src=\"@/assets/img/ico/ico-press-white-orange.svg\"\n        class=\"click-hold-section__button__image\"\n      />\n      <img\n        v-else\n        src=\"@/assets/img/ico/ico-press-black-orange.svg\"\n        class=\"click-hold-section__button__image\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'WidgetClickHoldSection',\n}\n</script>\n\n<script setup>\nimport { gsap } from 'gsap'\n\nconst props = defineProps({\n  isDark: {\n    type: Boolean,\n    defaul: false,\n  },\n  hideButton: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst holdDuration = 500\nconst timer = ref(null)\nconst isHolding = ref(false)\nconst buttonRef = ref(null)\nconst maskRef = ref(null)\nconst maskContentRef = ref(null)\n\nconst scaleDuration = 0.6 // Duration for the scaling animation\n\nconst startHold = (event) => {\n  event.preventDefault() // Prevent default action to avoid unwanted behavior on touch devices\n  if (isHolding.value) return\n  isHolding.value = true\n  gsap.to(buttonRef.value, { scale: 0.9, duration: 0.4 })\n  timer.value = setTimeout(() => {\n    isHolding.value = false\n    document.body.style.overflow = 'hidden'\n    gsap.to(buttonRef.value, { scale: 1, duration: 0.4 })\n    gsap.to(maskRef.value, {\n      scale: 2,\n      duration: scaleDuration,\n      ease: 'power2.out',\n    })\n    gsap.to(maskContentRef.value, { opacity: 1, delay: -0.1, duration: 0.2 }) // Show content with fade\n  }, holdDuration)\n}\n\nconst endHold = () => {\n  if (timer.value) {\n    clearTimeout(timer.value)\n    timer.value = null\n    isHolding.value = false\n    gsap.to(maskContentRef.value, {\n      opacity: 0,\n      duration: 0,\n      onComplete: () => {\n        gsap.to(maskRef.value, {\n          scale: 0,\n          duration: scaleDuration,\n          ease: 'power2.out',\n          onComplete: () => (document.body.style.overflow = 'auto'),\n        })\n      },\n    }) // Hide content with fade before scaling down the mask\n    gsap.to(buttonRef.value, { scale: 1, duration: 0.4 })\n  }\n}\n</script>\n\n<style lang=\"scss\">\n@import './style.scss';\n</style>\n","<template>\n  <div class=\"pages-home-click-hold-path-text\">\n    <WidgetClickHoldSection class=\"p-bot-160-100\">\n      <template v-slot:mask>\n        <div class=\"pages-home-click-hold-path-text__mask\">\n          <div\n            v-for=\"(project, i) in data\"\n            :key=\"i\"\n            class=\"pages-home-click-hold-path-text__description\"\n          >\n            <div v-html=\"project.descriptionHtml\" />\n          </div>\n        </div>\n      </template>\n      <template v-slot:body>\n        <h2\n          v-if=\"props.title\"\n          class=\"row-40-16 m-bottom-24px p-top-24px text-caption\"\n        >\n          {{ props.title }}\n        </h2>\n\n        <WidgetClipPathTextTitles :data=\"props.data\" />\n      </template>\n    </WidgetClickHoldSection>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'PagesHomeClickHoldPathText',\n}\n</script>\n\n<script setup>\nconst props = defineProps({\n  title: String,\n  data: {\n    type: Array,\n    required: true,\n  },\n})\n</script>\n\n<style lang=\"scss\">\n@import './style.scss';\n</style>\n"],"names":["__default__","gsap","ScrollTrigger","props","__props","emit","__emit","title","container","ref","animatedTitle","handleMouseOver","handleMouseLeave","onMounted","self","progress","setSelectedProject","index","crop","string","maxLength","selectedProject","_imports_0","_imports_1","holdDuration","timer","isHolding","buttonRef","maskRef","maskContentRef","scaleDuration","startHold","event","endHold"],"mappings":"mMAiBAA,EAAe,CACb,KAAM,yBACR,wFAOAC,EAAK,eAAeC,CAAa,EAEjC,MAAMC,EAAQC,EAGRC,EAAOC,EAEP,CAAE,MAAAC,EAAO,GAAMJ,EAAM,KACrBK,EAAYC,EAAI,IAAI,EACpBC,EAAgBD,EAAI,IAAI,EAExBE,EAAkB,IAAM,CAC5BN,EAAK,qBAAsB,CAAC,CAC9B,EAEMO,EAAmB,IAAM,CAC7BP,EAAK,qBAAsB,IAAI,CACjC,EAEA,OAAAQ,EAAU,IAAM,CACdZ,EAAK,GAAGS,EAAc,MAAO,CAC3B,cAAe,CACb,QAASF,EAAU,MACnB,MAAO,aACP,IAAK,gBACL,MAAO,GACP,SAAWM,GAAS,CAClB,MAAMC,EAAWD,EAAK,SAAS,QAAQ,CAAC,EACpCJ,EAAc,QAChBA,EAAc,MAAM,MAAM,SAAW,eAAeK,EAAW,GAAG,KACrE,CACF,CACL,CAAG,CACH,CAAC,gXC/CDf,EAAe,CACb,KAAM,0BACR,uFAOA,MAAMK,EAAOC,EAEPU,EAAsBC,GAAU,CACpCZ,EAAK,qBAAsBY,CAAK,CAClC,2PCJAjB,EAAe,CACb,KAAM,gCACR,wEASA,MAAMkB,EAAO,CAACC,EAAQC,IACbD,EAAO,UAAU,EAAGC,CAAS,4WCnBtCpB,EAAe,CACb,KAAM,oBACR,iFAIA,MAAMG,EAAQC,EAQRiB,EAAkBZ,EAAI,IAAI,EAE1BO,EAAsBC,GAAU,CACpCI,EAAgB,MAAQJ,CAC1B,0UClBAjB,EAAe,CACb,KAAM,uBACR,iFAIA,MAAMG,EAAQC,iLCpBCkB,EAAA,GAAA,IAAA,IAAA,sCAAA,YAAA,GAAA,EAAA,KCAAC,EAAA,GAAA,IAAA,IAAA,sCAAA,YAAA,GAAA,EAAA,qMCqCfvB,GAAe,CACb,KAAM,wBACR,6GAMA,MAAMG,EAAQC,EAWRoB,EAAe,IACfC,EAAQhB,EAAI,IAAI,EAChBiB,EAAYjB,EAAI,EAAK,EACrBkB,EAAYlB,EAAI,IAAI,EACpBmB,EAAUnB,EAAI,IAAI,EAClBoB,EAAiBpB,EAAI,IAAI,EAEzBqB,EAAgB,GAEhBC,EAAaC,GAAU,CAC3BA,EAAM,eAAgB,EAClB,CAAAN,EAAU,QACdA,EAAU,MAAQ,GAClBzB,EAAK,GAAG0B,EAAU,MAAO,CAAE,MAAO,GAAK,SAAU,GAAK,EACtDF,EAAM,MAAQ,WAAW,IAAM,CAC7BC,EAAU,MAAQ,GAClB,SAAS,KAAK,MAAM,SAAW,SAC/BzB,EAAK,GAAG0B,EAAU,MAAO,CAAE,MAAO,EAAG,SAAU,GAAK,EACpD1B,EAAK,GAAG2B,EAAQ,MAAO,CACrB,MAAO,EACP,SAAUE,EACV,KAAM,YACZ,CAAK,EACD7B,EAAK,GAAG4B,EAAe,MAAO,CAAE,QAAS,EAAG,MAAO,IAAM,SAAU,EAAG,CAAE,CACzE,EAAEL,CAAY,EACjB,EAEMS,EAAU,IAAM,CAChBR,EAAM,QACR,aAAaA,EAAM,KAAK,EACxBA,EAAM,MAAQ,KACdC,EAAU,MAAQ,GAClBzB,EAAK,GAAG4B,EAAe,MAAO,CAC5B,QAAS,EACT,SAAU,EACV,WAAY,IAAM,CAChB5B,EAAK,GAAG2B,EAAQ,MAAO,CACrB,MAAO,EACP,SAAUE,EACV,KAAM,aACN,WAAY,IAAO,SAAS,KAAK,MAAM,SAAW,MAC5D,CAAS,CACF,CACP,CAAK,EACD7B,EAAK,GAAG0B,EAAU,MAAO,CAAE,MAAO,EAAG,SAAU,GAAK,EAExD,wtBCzEA3B,GAAe,CACb,KAAM,4BACR,mFAIA,MAAMG,EAAQC"}