{"version":3,"file":"SectionHero.global.099c34f6.js","sources":["../../../../components/media/HeroLayers.vue","../../../../components/section/hero/SectionHero.global.vue"],"sourcesContent":["<template>\n  <div class=\"bg-noiseGradientDarkGreen flex transform-gpu flex-col justify-end overflow-hidden\">\n    <div class=\"hero-illustration aspect-1/2 w-full lg:aspect-2/1\">\n      <video\n        v-if=\"video && isDesktop\"\n        ref=\"videoRef\"\n        class=\"layer0 absolute hidden h-full w-full scale-150 lg:block\"\n        muted\n        playsinline\n      >\n        <source :src=\"video\" type='video/mp4; codecs=\"hvc1\"' />\n        <source :src=\"videoWebm\" type=\"video/webm\" />\n      </video>\n\n      <div\n        v-for=\"(item, index) in data\"\n        :key=\"index\"\n        ref=\"imagesRefs\"\n        class=\"absolute h-full w-full\"\n        :class=\"`layer${index + 1}`\"\n      >\n        <picture\n          v-if=\"item.desktopMedia?.responsiveImage || item.media?.responsiveImage\"\n          :class=\"[\n            item.desktopMedia?.responsiveImage && !item.media?.responsiveImage && 'hidden lg:block',\n            !item.desktopMedia?.responsiveImage && item.media?.responsiveImage && 'lg:hidden'\n          ]\"\n        >\n          <source\n            media=\"(min-width: 1024px)\"\n            :srcset=\"item.desktopMedia?.responsiveImage?.src\"\n            sizes=\"(min-width: 2220px) 1248px, (min-width: 720px) 648px, calc(95vw - 17px)\"\n          />\n          <source\n            :srcset=\"item.media?.responsiveImage?.src\"\n            sizes=\"(min-width: 2220px) 1248px, (min-width: 720px) 648px, calc(95vw - 17px)\"\n          />\n          <img\n            :src=\"item.desktopMedia?.responsiveImage?.src\"\n            :alt=\"item.desktopMedia?.responsiveImage?.alt! || item.media?.responsiveImage?.alt!\"\n            :width=\"item.desktopMedia?.responsiveImage ? '1280' : '640'\"\n            :height=\"item.desktopMedia?.responsiveImage ? '960' : '1300'\"\n          />\n        </picture>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HeroLayerRecord } from '~/types/generated'\n\nconst videoRef = ref<HTMLVideoElement | null>(null)\nconst { isDesktop } = useDevice()\n\nconst props = defineProps({\n  isScrolled: {\n    type: Boolean,\n    default: false\n  },\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\nwatch(\n  () => props.isScrolled,\n  () => {\n    if (props.isScrolled) {\n      videoRef.value?.play()\n    }\n  }\n)\n</script>\n\n<style lang=\"postcss\">\n.hero-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  .layer0 {\n    @apply -right-[150px] -top-[50px] left-auto;\n\n    @screen xl {\n      @apply -right-[120px] top-[50px];\n    }\n\n    @screen 2xl {\n      @apply top-[150px];\n    }\n\n    @screen hd {\n      @apply -right-[200px] top-[220px];\n    }\n  }\n\n  .layer1 {\n    @apply -right-[120px] -top-[150px] left-auto;\n\n    @screen sm {\n      @apply top-[100px];\n    }\n\n    @screen lg {\n      @apply -right-[150px] -top-[200px];\n    }\n\n    @screen xl {\n      @apply -top-[220px];\n    }\n\n    @screen 2xl {\n      @apply -top-[120px];\n    }\n\n    @screen hd {\n      @apply -top-[100px];\n    }\n  }\n\n  .layer2 {\n    @apply -top-[150px] left-auto right-[60px] z-[4];\n\n    @screen sm {\n      @apply top-[100px];\n    }\n  }\n\n  .layer3 {\n    @apply -z-[1];\n  }\n\n  .layer5 {\n    @apply z-[5];\n  }\n}\n</style>\n","<template>\n  <div\n    ref=\"heroContainer\"\n    class=\"w-full bg-white pt-4 text-neutral-800 lg:h-[calc(100vh-180px)] lg:min-h-[762px] lg:pt-8\"\n  >\n    <div class=\"grid-default container relative w-full pb-14 lg:pb-28 hd:pb-36\">\n      <div\n        ref=\"scrollElement\"\n        class=\"absolute bottom-0 left-4 z-2 h-[300px] w-7 pb-40 pt-0 lg:bottom-9 lg:left-10 lg:h-[290px] hd:bottom-16 hd:left-20 hd:h-[390px]\"\n      >\n        <div\n          :class=\"isMounted ? 'lg:opacity-100' : 'lg:opacity-0'\"\n          class=\"rotate-90 text-xl transition-opacity duration-1000\"\n        >\n          {{ $t('scroll') }}\n        </div>\n        <div\n          class=\"mx-auto mt-14 h-full w-px bg-neutral-800 transition-all duration-1000\"\n          :class=\"isMounted ? 'max-h-full' : 'max-h-0'\"\n        />\n      </div>\n      <div\n        ref=\"borderContainer\"\n        class=\"grid-default relative col-start-2 col-end-13 rounded-3xl border border-neutral-300 pb-14 transition-all duration-500 lg:h-[calc(100vh-180px)] lg:min-h-[762px] lg:pb-0 hd:rounded-[40px]\"\n        :class=\"isMounted ? 'lg:opacity-100' : 'lg:opacity-0'\"\n      >\n        <div\n          ref=\"textElement\"\n          class=\"relative z-2 col-span-10 pb-0 pt-7 lg:col-span-7 lg:mr-8 xl:py-20\"\n        >\n          <Heading\n            v-if=\"data.title\"\n            :generic=\"false\"\n            :content=\"data.title\"\n            :level=\"1\"\n            class=\"text-neutral-40 -ml-10 mb-5 lg:-ml-24 lg:mb-10\"\n          />\n          <div\n            v-if=\"data.html\"\n            class=\"prose mb-7 ml-auto pl-4 text-lg transition-opacity duration-1000 lg:mb-10 lg:max-w-lg lg:text-xl\"\n            :class=\"isMounted ? 'lg:opacity-100' : 'lg:opacity-0'\"\n            v-html=\"data.html\"\n          ></div>\n          <CallToAction\n            v-if=\"Array.isArray(data.buttons) && data.buttons.length\"\n            :data=\"data.buttons\"\n            class=\"ml-auto transition-opacity duration-1000 lg:min-w-[278px]\"\n            :class=\"isMounted ? 'lg:opacity-100' : 'lg:opacity-0'\"\n            filled\n            theme=\"dark\"\n            :size=\"isLG ? 'default' : 'medium'\"\n          />\n        </div>\n      </div>\n    </div>\n    <div\n      ref=\"heroImage\"\n      class=\"heroImage left-0 right-0 top-4 mx-auto h-full w-full max-w-[1280px] px-0 lg:absolute lg:top-8 lg:rounded-3xl xl:px-0 hd:max-w-[1920px] hd:rounded-[40px] hd:px-8\"\n    >\n      <HeroLayers\n        ref=\"layersRefs\"\n        class=\"h-full w-full rounded-[inherit]\"\n        :is-scrolled=\"isScrolled\"\n        :data=\"data.layers\"\n        :video=\"data.heroVideo?.url\"\n        :videoWebm=\"data.heroVideoWebm?.url\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\nimport type { SectionHeroRecord } from '~/types/generated'\nimport { theme } from '#tailwind-config'\n\nconst breakpoints = useBreakpoints(theme.screens)\nconst isLG = breakpoints.greater('lg')\nconst isMounted = ref(false)\nconst { bodyLock, bodyUnlock } = useBodyLock()\n\ndefineProps({\n  data: {\n    type: Object as PropType<SectionHeroRecord>,\n    default: () => {}\n  }\n})\n\nconst pageLoaded = ref(false)\nconst heroImage = ref<HTMLElement | null>(null)\nconst heroContainer = ref<HTMLElement | null>(null)\nconst borderContainer = ref<HTMLElement | null>(null)\nconst textElement = ref<HTMLElement | null>(null)\nconst scrollElement = ref<HTMLElement | null>(null)\nconst layersRefs = ref<Ref<{ imagesRefs: Element }> | null>(null)\n\nlet tween: null | any = null\n\nconst isScrolled = ref(false)\n\nfunction triggerVideo() {\n  isScrolled.value = true\n}\n\nonMounted(async () => {\n  if (isLG.value) {\n    bodyLock()\n  }\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      gsap.fromTo(\n        heroImage.value,\n        { clipPath: isLG.value ? 'circle(0% at right)' : 'circle(0% at 100% 30%)', opacity: 0 },\n        {\n          duration: 1,\n          delay: 0.5,\n          opacity: 1,\n          clipPath: isLG.value ? 'circle(38% at right)' : 'circle(30% at 100% 30%)',\n          borderRadius: 'none',\n          onStart: () => {\n            bodyLock()\n          },\n          onComplete: () => {\n            bodyUnlock()\n          }\n        }\n      )\n\n      tween = gsap.timeline({\n        ease: 'power1.in',\n        scrollTrigger: {\n          scrub: isLG.value ? 0.1 : 0.5,\n          start: isLG.value ? 'top-=128px top' : 'top-=64px top',\n          end: isLG.value ? 'top+=1000px top' : 'top+=200px top',\n          markers: false,\n          pin: heroContainer.value\n        }\n      })\n      tween.to(\n        borderContainer.value,\n        { borderColor: 'transparent', delay: 0, onComplete: triggerVideo },\n        -0.4\n      )\n      tween.to(textElement.value, { yPercent: -100, opacity: 0 }, 0.1)\n      tween.to(scrollElement.value, { yPercent: -100, opacity: 0 }, -0.2)\n      tween.fromTo(\n        heroImage.value,\n        { clipPath: isLG.value ? 'circle(38% at right)' : 'circle(30% at 100% 30%)' },\n        {\n          clipPath: isLG.value ? 'circle(150% at right)' : 'circle(150% at 100% 30%)',\n          margin: '0',\n          maxWidth: isLG.value ? '100vw' : 'none',\n          padding: '0',\n          y: isLG.value ? '-160px' : '-60px',\n          borderRadius: '0',\n          height: isLG.value ? 'calc(100% + 160px)' : 'calc(100% + 64px)'\n        },\n        0.01\n      )\n      gsap.utils.toArray(layersRefs.value?.imagesRefs).forEach((layer, index) => {\n        tween.fromTo(\n          layer,\n          {\n            y: isLG.value ? (index + 2) * 30 : index * 20\n          },\n\n          {\n            y: '0',\n            ease: 'none'\n          },\n          0.3\n        )\n      })\n    })\n  }\n})\n\nonBeforeUnmount(() => {\n  gsap.set(heroImage.value, { clearProps: 'all' })\n  tween?.kill()\n})\n</script>\n\n<style lang=\"postcss\">\n.heroImage {\n  @screen lg {\n    clip-path: circle(0% at right);\n  }\n}\n</style>\n"],"names":["videoRef","ref","isDesktop","useDevice","props","__props","imagesRefs","__expose","watch","_a","isLG","useBreakpoints","theme","isMounted","bodyLock","bodyUnlock","useBodyLock","pageLoaded","heroImage","heroContainer","borderContainer","textElement","scrollElement","layersRefs","tween","isScrolled","triggerVideo","onMounted","nextTick","useTimeoutFn","onBeforeUpdate","gsap","ScrollTrigger","layer","index","onBeforeUnmount"],"mappings":"q+BAoDM,MAAAA,EAAWC,EAA6B,IAAI,EAC5C,CAAE,UAAAC,GAAcC,IAEhBC,EAAQC,EAmBRC,EAAaL,EAA0B,IAAI,EAEpC,OAAAM,EAAA,CACX,WAAAD,CAAA,CACD,EAEDE,EACE,IAAMJ,EAAM,WACZ,IAAM,OACAA,EAAM,cACRK,EAAAT,EAAS,QAAT,MAAAS,EAAgB,OAEpB,CAAA,6yDCRI,MAAAC,EADcC,EAAeC,GAAM,OAAO,EACvB,QAAQ,IAAI,EAC/BC,EAAYZ,EAAI,EAAK,EACrB,CAAE,SAAAa,EAAU,WAAAC,CAAW,EAAIC,EAAY,EASvCC,EAAahB,EAAI,EAAK,EACtBiB,EAAYjB,EAAwB,IAAI,EACxCkB,EAAgBlB,EAAwB,IAAI,EAC5CmB,EAAkBnB,EAAwB,IAAI,EAC9CoB,EAAcpB,EAAwB,IAAI,EAC1CqB,EAAgBrB,EAAwB,IAAI,EAC5CsB,EAAatB,EAAyC,IAAI,EAEhE,IAAIuB,EAAoB,KAElB,MAAAC,EAAaxB,EAAI,EAAK,EAE5B,SAASyB,GAAe,CACtBD,EAAW,MAAQ,EACrB,CAEA,OAAAE,EAAU,SAAY,CAChBjB,EAAK,OACEI,IAEX,MAAMc,EAAS,EAEfC,EAAa,IAAM,CACjBhB,EAAU,MAAQ,IACjB,GAAG,CAAA,CACP,EAEDiB,EAAe,IAAM,CACnBb,EAAW,MAAQ,EAAA,CACpB,EAEDT,EAAMS,EAAY,IAAM,CAEpBC,EAAU,OACVC,EAAc,OACdE,EAAY,OACZC,EAAc,OACdC,EAAW,OACXN,EAAW,OACXP,EAAK,QAELqB,EAAK,eAAeC,CAAa,EAEtBD,EAAK,aAEb,IAAI,sBAAuB,IAAM,OAC7BA,EAAA,OACHb,EAAU,MACV,CAAE,SAAUR,EAAK,MAAQ,sBAAwB,yBAA0B,QAAS,CAAE,EACtF,CACE,SAAU,EACV,MAAO,GACP,QAAS,EACT,SAAUA,EAAK,MAAQ,uBAAyB,0BAChD,aAAc,OACd,QAAS,IAAM,CACJI,GACX,EACA,WAAY,IAAM,CACLC,GACb,CACF,CAAA,EAGFS,EAAQO,EAAK,SAAS,CACpB,KAAM,YACN,cAAe,CACb,MAAOrB,EAAK,MAAQ,GAAM,GAC1B,MAAOA,EAAK,MAAQ,iBAAmB,gBACvC,IAAKA,EAAK,MAAQ,kBAAoB,iBACtC,QAAS,GACT,IAAKS,EAAc,KACrB,CAAA,CACD,EACKK,EAAA,GACJJ,EAAgB,MAChB,CAAE,YAAa,cAAe,MAAO,EAAG,WAAYM,CAAa,EACjE,GAAA,EAEIF,EAAA,GAAGH,EAAY,MAAO,CAAE,SAAU,KAAM,QAAS,CAAE,EAAG,EAAG,EACzDG,EAAA,GAAGF,EAAc,MAAO,CAAE,SAAU,KAAM,QAAS,GAAK,GAAI,EAC5DE,EAAA,OACJN,EAAU,MACV,CAAE,SAAUR,EAAK,MAAQ,uBAAyB,yBAA0B,EAC5E,CACE,SAAUA,EAAK,MAAQ,wBAA0B,2BACjD,OAAQ,IACR,SAAUA,EAAK,MAAQ,QAAU,OACjC,QAAS,IACT,EAAGA,EAAK,MAAQ,SAAW,QAC3B,aAAc,IACd,OAAQA,EAAK,MAAQ,qBAAuB,mBAC9C,EACA,GAAA,EAEGqB,EAAA,MAAM,SAAQtB,EAAAc,EAAW,QAAX,YAAAd,EAAkB,UAAU,EAAE,QAAQ,CAACwB,EAAOC,IAAU,CACnEV,EAAA,OACJS,EACA,CACE,EAAGvB,EAAK,OAASwB,EAAQ,GAAK,GAAKA,EAAQ,EAC7C,EAEA,CACE,EAAG,IACH,KAAM,MACR,EACA,EAAA,CACF,CACD,CAAA,CACF,EACH,CACD,EAEDC,EAAgB,IAAM,CACpBJ,EAAK,IAAIb,EAAU,MAAO,CAAE,WAAY,MAAO,EAC/CM,GAAA,MAAAA,EAAO,MAAK,CACb"}