{"version":3,"mappings":"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","names":["emit","__emit","id","useId","isDesktop","useDevice","isAnimating","ref","expand","setHeight","el","unsetHeight","isImageLazy","isPanelVisible","activeIdx","ctxRef","ctx","setActive","idx","onMounted","gsap","ScrollTrigger","self","panels","item","onUnmounted","bubbles","props","__props","level","isSemantic","invertedStyles","useSectionRules","servicesRef","height","useElementSize","elPin"],"ignoreList":[],"sources":["../../../../../../../app/components/services/ServicesPanel.vue","../../../../../../../app/components/services/ServicesFloatLarge.vue","../../../../../../../app/assets/images/bubbles/firefly-bubbles-2@2x.webp","../../../../../../../app/components/services/ServicesFloatMedium.vue","../../../../../../../app/components/services/SectionServices.global.vue"],"sourcesContent":["<script setup lang=\"ts\">\nexport interface AccordionPanelProps {\n  idx: number\n  active: boolean\n  layout: SectionServicesListRecord['layout']\n}\n\ndefineProps<AccordionPanelProps>()\nconst emit = defineEmits(['expand'])\n\nconst id = useId()\nconst { isDesktop } = useDevice()\nconst isAnimating = ref(false)\n\nconst expand = () => {\n  if (isAnimating.value) {\n    return\n  }\n  emit('expand')\n}\n\nfunction setHeight(el: HTMLElement) {\n  isAnimating.value = true\n  el.style.height = el.scrollHeight + 'px'\n}\n\nfunction unsetHeight(el: HTMLElement) {\n  isAnimating.value = false\n  el.style.height = ''\n}\n</script>\n\n<template>\n  <div>\n    <button\n      type=\"button\"\n      class=\"flex w-full cursor-pointer items-center text-left mix-blend-difference transition-colors\"\n      :class=\"[\n        {\n          'text-4xl hover:text-white lg:text-6xl-m': layout === 'Medium',\n          'text-4xl-m lg:text-8xl-m': layout === 'Large'\n        },\n        active ? 'text-white' : 'text-neutral-700'\n      ]\"\n      :aria-controls=\"`acc-${id}_panel-${idx}`\"\n      :aria-expanded=\"active\"\n      @click=\"expand($event)\"\n    >\n      <slot name=\"title\" />\n    </button>\n    <Transition\n      :name=\"isDesktop && layout === 'Large' ? 'service-lg' : isDesktop ? 'service' : 'accordion'\"\n      @enter=\"setHeight\"\n      @after-enter=\"unsetHeight\"\n      @before-leave=\"setHeight\"\n      @after-leave=\"unsetHeight\"\n    >\n      <div\n        v-show=\"active\"\n        :id=\"`acc-${id}_panel-${idx}`\"\n        class=\"overflow-hidden\"\n        :aria-hidden=\"!active\"\n      >\n        <slot name=\"content\" />\n      </div>\n    </Transition>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\n\ndefineProps<{\n  services: SectionServicesListRecord['services']\n  layout: SectionServicesListRecord['layout']\n}>()\n\nconst { isDesktop } = useDevice()\nconst isImageLazy = ref(true)\nconst isPanelVisible = ref(false)\nconst activeIdx = ref<number | null>(null)\nconst ctxRef = ref<HTMLElement | null>(null)\n\nlet ctx: gsap.Context | null = null\nconst id = useId()\n\nconst setActive = (idx: number | null) => {\n  activeIdx.value = idx\n}\n\nonMounted(() => {\n  if (ctxRef.value) {\n    gsap.registerPlugin(ScrollTrigger)\n\n    const mm = gsap.matchMedia()\n    mm.add('(min-width: 1024px)', () => {\n      ctx = gsap.context((self: gsap.Context) => {\n        ScrollTrigger.create({\n          trigger: ctxRef.value,\n          start: 'top bottom',\n          once: true,\n          onEnter: () => {\n            if (!isImageLazy.value) {\n              isImageLazy.value = true\n            }\n          }\n        })\n\n        const panels = self.selector ? self.selector('.fx-service-panel') : []\n\n        if (panels.length) {\n          panels.forEach((item: HTMLElement, idx: number) => {\n            ScrollTrigger.create({\n              trigger: item,\n              start: 'top 56%',\n              end: 'bottom 56%',\n              onEnter: () => {\n                setActive(idx)\n                if (activeIdx.value === 0) {\n                  isPanelVisible.value = true\n                }\n              },\n              onLeave: () => {\n                setActive(idx)\n                if (activeIdx.value === panels.length - 1) {\n                  isPanelVisible.value = false\n                }\n              },\n              onLeaveBack: () => {\n                setActive(idx)\n                if (activeIdx.value === 0) {\n                  isPanelVisible.value = false\n                }\n              },\n              onEnterBack: () => {\n                setActive(idx)\n                if (activeIdx.value === panels.length - 1) {\n                  isPanelVisible.value = true\n                }\n              }\n            })\n          })\n        }\n        ScrollTrigger.refresh()\n      }, ctxRef.value as HTMLElement)\n    })\n  }\n})\n\nonUnmounted(() => {\n  if (ctx) {\n    ctx.revert()\n  }\n})\n</script>\n\n<template>\n  <div\n    ref=\"ctxRef\"\n    class=\"col-span-full flex h-fit flex-col gap-2 lg:col-span-12 lg:col-start-1 lg:gap-6 lg:py-40 xl:col-span-8 xl:col-start-5\"\n  >\n    <template v-if=\"isDesktop\">\n      <Transition name=\"servicesMask\">\n        <div\n          v-if=\"isPanelVisible\"\n          class=\"fixed right-0 top-1/2 hidden aspect-video h-auto w-full max-w-[55rem] translate-x-1/4 translate-y-[-41%] md:block 2xl:translate-x-0 hd:max-w-[64rem]\"\n        >\n          <div v-for=\"(service, idx) in services\" :id=\"id + '_idx-' + idx\" :key=\"idx\" :idx=\"idx\">\n            <Transition name=\"crossSwitch\" mode=\"in-out\">\n              <Image\n                v-show=\"activeIdx === idx\"\n                :loading=\"isImageLazy ? 'lazy' : 'eager'\"\n                class=\"fixed left-0 top-0 aspect-video w-full max-w-none object-cover\"\n                :src=\"\n                  service.image?.responsiveImage\n                    ? service.image?.responsiveImage?.src\n                    : service.image?.url\n                \"\n                :srcset=\"\n                  service.image?.responsiveImage\n                    ? service.image?.responsiveImage?.webpSrcSet\n                    : undefined\n                \"\n                :width=\"\n                  service.image?.responsiveImage\n                    ? service.image?.responsiveImage?.width\n                    : (service.image?.width ?? 880)\n                \"\n                :height=\"\n                  service.image?.responsiveImage\n                    ? service.image?.responsiveImage?.height\n                    : (service.image?.height ?? 495)\n                \"\n                :alt=\"service.image?.alt ?? ''\"\n                sizes=\"auto\"\n              />\n            </Transition>\n          </div>\n        </div>\n      </Transition>\n    </template>\n    <ServicesPanel\n      v-for=\"(service, idx) in services\"\n      :id=\"id + '_idx-' + idx\"\n      :key=\"idx\"\n      :idx=\"idx\"\n      :active=\"activeIdx === idx\"\n      :layout=\"layout\"\n      class=\"fx-service-panel relative lg:pointer-events-none\"\n      @expand=\"activeIdx = activeIdx !== idx ? idx : null\"\n    >\n      <template #title\n        ><span v-if=\"service.title\" class=\"block\">\n          {{ service.title }}\n        </span></template\n      >\n      <template #content>\n        <div\n          class=\"absolute right-0 top-0 w-full max-w-[16.25rem] translate-x-4 lg:hidden lg:max-w-4xl\"\n        >\n          <Transition name=\"maskedScale\">\n            <Image\n              v-if=\"service.image && activeIdx === idx\"\n              loading=\"lazy\"\n              class=\"aspect-16/10 w-full max-w-none object-cover\"\n              :src=\"\n                service.image.responsiveImage\n                  ? service.image.responsiveImage?.src\n                  : service.image.url\n              \"\n              :srcset=\"\n                service.image.responsiveImage\n                  ? service.image.responsiveImage?.webpSrcSet\n                  : undefined\n              \"\n              :width=\"\n                service.image.responsiveImage\n                  ? service.image.responsiveImage?.width\n                  : (service.image.width ?? 880)\n              \"\n              :height=\"\n                service.image.responsiveImage\n                  ? service.image.responsiveImage?.height\n                  : (service.image.height ?? 550)\n              \"\n              :alt=\"service.image?.alt ?? ''\"\n              sizes=\"auto\"\n            />\n          </Transition>\n        </div>\n      </template>\n    </ServicesPanel>\n  </div>\n</template>\n","export default \"__VITE_ASSET__BIs9nFcl__\"","<script setup lang=\"ts\">\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\nimport bubbles from '~/assets/images/bubbles/firefly-bubbles-2@2x.webp'\n\ndefineProps<{\n  services: SectionServicesListRecord['services']\n  layout: SectionServicesListRecord['layout']\n}>()\n\nconst { isDesktop } = useDevice()\nconst activeIdx = ref<number | null>(null)\nconst ctxRef = ref<HTMLElement | null>(null)\nlet ctx: gsap.Context | null = null\n\nonMounted(() => {\n  if (ctxRef.value) {\n    gsap.registerPlugin(ScrollTrigger)\n\n    ctx = gsap.context(() => {\n      ScrollTrigger.create({\n        trigger: ctxRef.value,\n        start: 'top-=200px center',\n        end: `endcenter`,\n        markers: false,\n        onEnter: () => {\n          activeIdx.value = 0\n        }\n      })\n      ScrollTrigger.refresh()\n      ScrollTrigger.sort()\n    }, ctxRef.value as HTMLElement)\n  }\n})\n\nonUnmounted(() => {\n  if (ctx) {\n    ctx.revert()\n  }\n})\n</script>\n\n<template>\n  <div\n    ref=\"ctxRef\"\n    class=\"col-span-full flex flex-col gap-2 lg:col-span-9 lg:col-start-3 lg:gap-4 xl:col-start-4\"\n  >\n    <LazyImage\n      v-if=\"isDesktop\"\n      class=\"absolute -bottom-28 -left-96 hidden aspect-square object-contain lg:block xl:-left-80\"\n      :src=\"bubbles\"\n      :width=\"728\"\n      :height=\"728\"\n      alt=\"\"\n    />\n    <DeliciousSausage\n      v-if=\"isDesktop\"\n      name=\"services-medium\"\n      class=\"absolute -left-96 bottom-80 hidden lg:block xl:-left-80\"\n    />\n    <ServicesPanel\n      v-for=\"(service, idx) in services\"\n      :key=\"idx\"\n      :idx=\"idx\"\n      :active=\"activeIdx === idx\"\n      :layout=\"layout\"\n      class=\"relative\"\n      @expand=\"activeIdx = activeIdx !== idx ? idx : null\"\n    >\n      <template #title\n        ><span v-if=\"service.title\" class=\"block\">\n          {{ service.title }}\n        </span></template\n      >\n      <template #content>\n        <div\n          class=\"w-full py-4 lg:absolute lg:left-1/2 lg:top-0 lg:max-w-md lg:-translate-y-1/2 lg:py-0\"\n        >\n          <Transition name=\"servicesMedium\">\n            <Image\n              v-if=\"service.image && activeIdx === idx\"\n              effect=\"mask\"\n              class=\"mb-4 aspect-16/10 w-full object-cover lg:mb-10\"\n              :src=\"\n                service.image.responsiveImage\n                  ? service.image.responsiveImage?.src\n                  : service.image.url\n              \"\n              :srcset=\"\n                service.image.responsiveImage\n                  ? service.image.responsiveImage?.webpSrcSet\n                  : undefined\n              \"\n              :width=\"\n                service.image.responsiveImage\n                  ? service.image.responsiveImage?.width\n                  : (service.image.width ?? 448)\n              \"\n              :height=\"\n                service.image.responsiveImage\n                  ? service.image.responsiveImage?.height\n                  : (service.image.height ?? 280)\n              \"\n              :alt=\"service.image?.alt ?? ''\"\n              sizes=\"auto\"\n            />\n          </Transition>\n          <Transition name=\"servicesMediumText\">\n            <div\n              v-if=\"service.description && activeIdx === idx\"\n              class=\"text-sm lg:text-lg\"\n              v-html=\"service.description\"\n            />\n          </Transition>\n        </div>\n      </template>\n    </ServicesPanel>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\n\nconst props = defineProps<{\n  data: SectionServicesListRecord\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 servicesRef = ref<HTMLElement | null>(null)\nconst { height } = useElementSize(servicesRef)\n\nlet ctx: gsap.Context | null = null\n\nonMounted(() => {\n  if (ctxRef.value) {\n    gsap.registerPlugin(ScrollTrigger)\n    const mm = gsap.matchMedia()\n\n    mm.add('(min-width: 1024px)', () => {\n      ctx = gsap.context((self: gsap.Context) => {\n        const elPin = self.selector ? self.selector('.fx-services-title') : null\n        ScrollTrigger.create({\n          trigger: elPin,\n          pin: elPin,\n          start: 'top center',\n          end: `+=${height.value}`,\n          markers: false\n        })\n        ScrollTrigger.refresh()\n      }, ctxRef.value as HTMLElement)\n    })\n  }\n})\n\nonUnmounted(() => {\n  if (ctx) {\n    ctx.revert()\n  }\n})\n</script>\n\n<template>\n  <div\n    ref=\"ctxRef\"\n    class=\"container grid-default overflow-hidden pb-16 pt-28 lg:gap-y-40\"\n    :class=\"[\n      {\n        'lg:py-[50vh]': data.layout === 'Large',\n        'lg:py-50': data.layout === 'Medium'\n      },\n      invertedStyles\n    ]\"\n  >\n    <template v-if=\"data.layout === 'Large'\">\n      <div class=\"col-span-full xl:col-span-4\">\n        <div class=\"fx-services-title transform-gpu\">\n          <Heading\n            v-if=\"data.heading\"\n            :level=\"level\"\n            :size=\"1\"\n            :is-semantic=\"isSemantic\"\n            class=\"col-span-full mb-7 flex text-right uppercase xl:justify-end\"\n          >\n            <TextReveal>{{ data.heading }}</TextReveal>\n          </Heading>\n          <div v-if=\"data.callToAction.length\" class=\"mt-4 hidden xl:block\">\n            <CallToAction :data=\"data.callToAction\" />\n          </div>\n        </div>\n      </div>\n      <ServicesFloatLarge ref=\"servicesRef\" :services=\"data.services\" :layout=\"data.layout\" />\n      <div v-if=\"data.callToAction.length\" class=\"mt-4 xl:hidden\">\n        <CallToAction :data=\"data.callToAction\" />\n      </div>\n    </template>\n    <template v-else-if=\"data.layout === 'Medium'\">\n      <Heading\n        v-if=\"data.heading\"\n        :level=\"level\"\n        :size=\"1\"\n        :is-semantic=\"isSemantic\"\n        class=\"col-span-full mb-7\"\n      >\n        <TextReveal>{{ data.heading }}</TextReveal>\n      </Heading>\n      <ServicesFloatMedium :services=\"data.services\" :layout=\"data.layout\" />\n      <div v-if=\"data.callToAction.length\" class=\"mt-4\">\n        <CallToAction :data=\"data.callToAction\" />\n      </div>\n    </template>\n  </div>\n</template>\n"],"file":"_nuxt/CZi6y9I2.js"}