{"version":3,"file":"SectionHeroB1.global.6851faeb.js","sources":["../../../../components/media/HeroB1Layers.vue","../../../../components/section/hero/HeroParallax.vue"],"sourcesContent":["<template>\n  <div class=\"transform-gpu overflow-hidden\" :class=\"$style.illustration\">\n    <div class=\"aspect-1/2 h-full w-full lg:aspect-2/1\">\n      <video\n        v-if=\"video && isScreenLg\"\n        class=\"z-2 hidden h-screen w-full object-cover lg:block\"\n        muted\n        playsinline\n        autoplay\n        loop\n        :src=\"video\"\n      />\n      <template v-else-if=\"data.length && !isScreenLg\">\n        <div\n          v-for=\"(item, index) in data\"\n          :key=\"index\"\n          ref=\"imagesRefs\"\n          class=\"absolute h-full w-full lg:hidden\"\n          :class=\"`layer${index + 1}`\"\n        >\n          <picture\n            v-if=\"item.desktopMedia?.responsiveImage || item.media?.responsiveImage\"\n            :class=\"[\n              item.desktopMedia?.responsiveImage &&\n                !item.media?.responsiveImage &&\n                'hidden lg:block',\n              !item.desktopMedia?.responsiveImage && item.media?.responsiveImage && 'lg:hidden'\n            ]\"\n          >\n            <source\n              :srcset=\"item.media?.responsiveImage?.src\"\n              :sizes=\"item.media?.responsiveImage?.sizes\"\n            />\n            <img\n              :src=\"item.media?.responsiveImage?.src\"\n              :alt=\"item.media?.responsiveImage?.alt!\"\n              :width=\"item.media?.responsiveImage?.width\"\n              :height=\"item.media?.responsiveImage?.height\"\n            />\n          </picture>\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HeroLayerRecord } from '~/types/generated'\nimport { theme } from '#tailwind-config'\n\nconst breakpoints = useBreakpoints(theme.screens)\nconst isScreenLg = breakpoints.greater('lg')\n\ndefineProps({\n  data: {\n    type: Array as PropType<HeroLayerRecord[]>,\n    default: () => []\n  },\n  video: {\n    type: String,\n    required: false\n  },\n  videoWebm: {\n    type: String,\n    required: false\n  }\n})\n\nconst imagesRefs = ref<HTMLElement[] | null>(null)\n\ndefineExpose({\n  imagesRefs\n})\n</script>\n\n<style lang=\"postcss\" module>\n.illustration {\n  @apply relative;\n  transform: translate3d(0, 0, 0);\n  -webkit-transform: translate3d(0, 0, 0);\n\n  img {\n    @apply absolute bottom-0 left-0 h-full w-full rounded-[inherit] object-cover will-change-transform;\n  }\n}\n</style>\n","<template>\n  <div ref=\"heroContainer\" class=\"!w-screen will-change-transform\">\n    <div class=\"relative lg:h-screen w-full\">\n      <div\n        ref=\"textElement\"\n        class=\"grid-default container relative mb-14 w-full text-center lg:mb-10\"\n      >\n        <div\n          v-if=\"data.tag\"\n          class=\"col-span-12 mx-auto mb-4 w-fit rounded-xl border border-neutral-800 p-3 text-base uppercase\"\n        >\n          {{ data.tag }}\n        </div>\n        <Heading\n          v-if=\"data.title\"\n          :generic=\"false\"\n          :content=\"data.title\"\n          :level=\"1\"\n          class=\"col-span-12 mb-4 lg:mb-10\"\n        />\n        <div\n          v-if=\"data.body\"\n          class=\"col-span-12 mx-auto mb-14 text-lg transition-opacity duration-1000 lg:mb-10 lg:max-w-2xl lg:text-xl\"\n          :class=\"isMounted ? 'lg:opacity-100' : 'lg:opacity-0'\"\n        >\n          {{ data.body }}\n        </div>\n        <HeroSocials class=\"col-span-12\" :class=\"isMounted ? 'lg:opacity-100' : 'lg:opacity-0'\" />\n      </div>\n      <div\n        ref=\"heroImage\"\n        class=\"container lg:absolute left-0 right-0 mx-auto px-0 transition duration-300 lg:h-auto lg:max-h-[500px] lg:max-w-3xl lg:rounded-[100px] xl:max-w-4xl 2xl:max-w-5xl\"\n        :class=\"isMounted ? 'lg:opacity-100' : 'lg:opacity-0'\"\n      >\n        <HeroB1Layers\n          ref=\"layersRefs\"\n          :data=\"data.layers\"\n          :video=\"data.heroVideo?.url\"\n          :videoWebm=\"data.heroVideoWebm?.url\"\n          class=\"h-full w-full rounded-[inherit]\"\n        />\n      </div>\n      <div class=\"container\">\n        <div\n          ref=\"scrollElement\"\n          class=\"absolute bottom-0 z-2 hidden h-full max-h-[620px] w-7 pt-32 lg:block\"\n        >\n          <div class=\"rotate-90 text-xl\">{{ $t('scroll') }}</div>\n          <div class=\"mx-auto mt-14 h-[85%] w-px bg-neutral-800\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\nimport type { SectionHeroB1Record } from '~/types/generated'\nimport { theme } from '#tailwind-config'\n\nconst isMounted = ref(false)\nconst breakpoints = useBreakpoints(theme.screens)\nconst isLG = breakpoints.greater('lg')\n\ndefineProps({\n  data: {\n    type: Object as PropType<SectionHeroB1Record>,\n    default: () => {}\n  }\n})\nconst heroImage = ref<HTMLElement | null>(null)\nconst heroContainer = ref<HTMLElement | null>(null)\nconst textElement = ref<HTMLElement | null>(null)\nconst scrollElement = ref<HTMLElement | null>(null)\nconst layersRefs = ref<Ref<{ imagesRefs: Element }> | null>(null)\nconst pageLoaded = ref(false)\n\nlet tween: null | any = null\n\nonMounted(async () => {\n  await nextTick()\n\n  useTimeoutFn(() => {\n    isMounted.value = true\n  }, 800)\n})\n\nonBeforeUpdate(() => {\n  pageLoaded.value = true\n})\n\nwatch(pageLoaded, () => {\n  if (\n    heroImage.value &&\n    heroContainer.value &&\n    textElement.value &&\n    scrollElement.value &&\n    layersRefs.value &&\n    pageLoaded.value &&\n    isLG.value\n  ) {\n    gsap.registerPlugin(ScrollTrigger)\n\n    const mm = gsap.matchMedia()\n\n    mm.add('(min-width: 1024px)', () => {\n      tween = gsap\n        .timeline({\n          ease: 'power1.in',\n          scrollTrigger: {\n            scrub: 0.1,\n            start: () => (isLG.value ? 'top-=128px top' : 'top-=64px top'),\n            markers: false,\n            end: isLG.value ? 'top+=1000px top' : 'top+=200px top',\n            pin: heroContainer.value\n          }\n        })\n        .to(textElement.value, { yPercent: -100, opacity: 0 }, -0.2)\n        .to(scrollElement.value, { yPercent: -100, opacity: 0 }, -0.2)\n        .to(heroContainer.value, { padding: '0' }, -0.2)\n        .to(\n          heroImage.value,\n          {\n            margin: '0',\n            maxWidth: () => (isLG.value ? '100vw' : 'none'),\n            padding: '0',\n            top: () => (isLG.value ? '-128px' : '-60px'),\n            borderRadius: '0',\n            height: '100vh',\n            maxHeight: 'none'\n          },\n          -0.2\n        )\n\n      gsap.utils.toArray(layersRefs.value?.imagesRefs).forEach((layer, index) => {\n        if (index !== 0) {\n          tween.fromTo(\n            layer,\n            {\n              y: () => (isLG.value ? (index + 2) * 70 : index * 40)\n            },\n\n            {\n              y: '0',\n              ease: 'none',\n              stagger: {\n                each: 0.06\n              }\n            },\n            0.5\n          )\n        }\n      })\n    })\n  }\n\n  ScrollTrigger.refresh()\n})\n\nonBeforeUnmount(() => {\n  gsap.set(heroImage.value, { clearProps: 'all' })\n  tween?.kill()\n})\n</script>\n"],"names":["isScreenLg","useBreakpoints","theme","imagesRefs","ref","__expose","isMounted","isLG","heroImage","heroContainer","textElement","scrollElement","layersRefs","pageLoaded","tween","onMounted","nextTick","useTimeoutFn","onBeforeUpdate","watch","gsap","ScrollTrigger","_a","layer","index","onBeforeUnmount"],"mappings":"2mDAmDM,MAAAA,EADcC,EAAeC,EAAM,OAAO,EACjB,QAAQ,IAAI,EAiBrCC,EAAaC,EAA0B,IAAI,EAEpC,OAAAC,EAAA,CACX,WAAAF,CAAA,CACD,0wDCXK,MAAAG,EAAYF,EAAI,EAAK,EAErBG,EADcN,EAAeC,EAAM,OAAO,EACvB,QAAQ,IAAI,EAQ/BM,EAAYJ,EAAwB,IAAI,EACxCK,EAAgBL,EAAwB,IAAI,EAC5CM,EAAcN,EAAwB,IAAI,EAC1CO,EAAgBP,EAAwB,IAAI,EAC5CQ,EAAaR,EAAyC,IAAI,EAC1DS,EAAaT,EAAI,EAAK,EAE5B,IAAIU,EAAoB,KAExB,OAAAC,EAAU,SAAY,CACpB,MAAMC,EAAS,EAEfC,EAAa,IAAM,CACjBX,EAAU,MAAQ,IACjB,GAAG,CAAA,CACP,EAEDY,EAAe,IAAM,CACnBL,EAAW,MAAQ,EAAA,CACpB,EAEDM,EAAMN,EAAY,IAAM,CAEpBL,EAAU,OACVC,EAAc,OACdC,EAAY,OACZC,EAAc,OACdC,EAAW,OACXC,EAAW,OACXN,EAAK,QAELa,EAAK,eAAeC,CAAa,EAEtBD,EAAK,aAEb,IAAI,sBAAuB,IAAM,OAClCN,EAAQM,EACL,SAAS,CACR,KAAM,YACN,cAAe,CACb,MAAO,GACP,MAAO,IAAOb,EAAK,MAAQ,iBAAmB,gBAC9C,QAAS,GACT,IAAKA,EAAK,MAAQ,kBAAoB,iBACtC,IAAKE,EAAc,KACrB,CAAA,CACD,EACA,GAAGC,EAAY,MAAO,CAAE,SAAU,KAAM,QAAS,CAAE,EAAG,GAAI,EAC1D,GAAGC,EAAc,MAAO,CAAE,SAAU,KAAM,QAAS,CAAE,EAAG,GAAI,EAC5D,GAAGF,EAAc,MAAO,CAAE,QAAS,GAAI,EAAG,GAAI,EAC9C,GACCD,EAAU,MACV,CACE,OAAQ,IACR,SAAU,IAAOD,EAAK,MAAQ,QAAU,OACxC,QAAS,IACT,IAAK,IAAOA,EAAK,MAAQ,SAAW,QACpC,aAAc,IACd,OAAQ,QACR,UAAW,MACb,EACA,GAAA,EAGCa,EAAA,MAAM,SAAQE,EAAAV,EAAW,QAAX,YAAAU,EAAkB,UAAU,EAAE,QAAQ,CAACC,EAAOC,IAAU,CACrEA,IAAU,GACNV,EAAA,OACJS,EACA,CACE,EAAG,IAAOhB,EAAK,OAASiB,EAAQ,GAAK,GAAKA,EAAQ,EACpD,EAEA,CACE,EAAG,IACH,KAAM,OACN,QAAS,CACP,KAAM,GACR,CACF,EACA,EAAA,CAEJ,CACD,CAAA,CACF,GAGHH,EAAc,QAAQ,CAAA,CACvB,EAEDI,EAAgB,IAAM,CACpBL,EAAK,IAAIZ,EAAU,MAAO,CAAE,WAAY,MAAO,EAC/CM,GAAA,MAAAA,EAAO,MAAK,CACb"}