{"version":3,"file":"Y5Y47nzb.js","sources":["../../../../../../../app/assets/images/clients/rect-glass.webp","../../../../../../../app/components/sections/SectionClients.global.vue"],"sourcesContent":["export default \"__VITE_ASSET__C3D$jGyE__\"","<script setup lang=\"ts\">\nimport frameSrc from '~/assets/images/clients/rect-glass.webp'\nimport { useIntersectionObserver, useIntervalFn } from '@vueuse/core'\nimport { gsap } from 'gsap'\n\nconst props = defineProps<{\n  data: SectionClientListRecord\n  moduleIndex: number\n}>()\n\nconst { invertedStyles } = useSectionRules(props.moduleIndex, props.data.invertColorTheme)\n\nconst frontLogos = ref(\n  props.data?.records.slice(0, Math.ceil((props.data?.records.length ?? 0) / 2)) ?? []\n)\nconst backLogos = ref(\n  props.data?.records.slice(Math.ceil((props.data?.records.length ?? 0) / 2)) ?? []\n)\n\nlet ctx: gsap.Context | null = null\nconst duration = 30\nconst interval = 6\n\n// Calculate positions dynamically\nconst calculatePosition = (index: number, total: number, radius: number) => {\n  const angle = (2 * Math.PI * index) / total\n  return {\n    x: 500 + Math.cos(angle) * radius - 60,\n    y: 500 + Math.sin(angle) * radius - 60\n  }\n}\n\nconst animationReverse = ref(false)\nconst rotationAnimation = ref<GSAPTween | null>(null)\n\nconst switchPositions = () => {\n  const totalFront = frontLogos.value.length\n  const totalBack = backLogos.value.length\n\n  frontLogos.value.forEach((_, index) => {\n    const { x, y } = calculatePosition(index, totalBack, animationReverse.value ? 260 : 400)\n    const wrapper = document.querySelector(`.fx-position-front-${index}`) as SVGGElement\n    if (wrapper) {\n      gsap.to(wrapper, {\n        duration: 1.5,\n        ease: 'power2.inOut',\n        attr: { transform: `translate(${x}, ${y})` },\n        opacity: animationReverse.value ? 0.2 : 1\n        //filter: animationReverse.value ? 'blur(12px)' : 'blur(0px)'\n      })\n    }\n  })\n\n  backLogos.value.forEach((_, index) => {\n    const { x, y } = calculatePosition(index, totalFront, animationReverse.value ? 400 : 260)\n    const wrapper = document.querySelector(`.fx-position-back-${index}`) as SVGGElement\n    if (wrapper) {\n      gsap.to(wrapper, {\n        duration: 1.5,\n        ease: 'power2.inOut',\n        attr: { transform: `translate(${x}, ${y})` },\n        opacity: animationReverse.value ? 1 : 0.2\n        //filter: animationReverse.value ? 'blur(0px)' : 'blur(12px)'\n      })\n    }\n  })\n\n  animationReverse.value = !animationReverse.value\n}\n\nconst sectionRef = ref<HTMLElement | null>(null)\nconst isVisible = ref(false)\n\nconst { stop } = useIntersectionObserver(\n  sectionRef,\n  ([{ isIntersecting }], _observerElement) => {\n    if (isIntersecting) {\n      isVisible.value = true\n      rotationAnimation.value?.play()\n    }\n  },\n  {\n    threshold: 0.5\n  }\n)\n\nconst rectRef = ref<HTMLElement | null>(null)\n\nfunction onMouseMove(e: MouseEvent) {\n  const canvasContainer = sectionRef.value\n\n  if (!canvasContainer) return\n\n  const rect = canvasContainer.getBoundingClientRect()\n  const isMouseInside =\n    e.clientX >= rect.left &&\n    e.clientX <= rect.right &&\n    e.clientY >= rect.top &&\n    e.clientY <= rect.bottom\n\n  const coords = getMousePos(e)\n\n  const maxMovementX = 50\n\n  if (!isMouseInside) {\n    return\n  }\n\n  // Calculate the new camera position based on the mouse position\n  let movementX = 0\n\n  if (coords.x > window.innerWidth / 2) {\n    movementX = (coords.x - window.innerWidth / 2) / 25\n  } else if (coords.x < window.innerWidth / 2) {\n    movementX = -(window.innerWidth / 2 - coords.x) / 25\n  }\n\n  // Clamp the movement within the max bounds\n  const clampedX = Math.max(-maxMovementX, Math.min(maxMovementX, movementX))\n\n  // Smoothly move the camera to the new position\n  gsap.to(rectRef.value, {\n    x: clampedX,\n    ease: 'power3.out',\n    duration: 0.3 // Smooth transition duration\n  })\n}\n\nonMounted(() => {\n  nextTick(() => {\n    document.addEventListener('mousemove', onMouseMove)\n\n    ctx = gsap.context(() => {\n      // Set initial positions and blur states\n      frontLogos.value.forEach((_, index) => {\n        const { x, y } = calculatePosition(index, frontLogos.value.length, 400)\n        gsap.set(`.fx-position-front-${index}`, {\n          attr: { transform: `translate(${x}, ${y})` },\n          opacity: 1\n          //filter: 'blur(0px)'\n        })\n      })\n\n      backLogos.value.forEach((_, index) => {\n        const { x, y } = calculatePosition(index, backLogos.value.length, 260)\n        gsap.set(`.fx-position-back-${index}`, {\n          attr: { transform: `translate(${x}, ${y})` },\n          opacity: 0.2\n          //filter: 'blur(12px)'\n        })\n      })\n\n      // Main rotation animation\n      rotationAnimation.value = gsap.to('.fx-logo', {\n        duration,\n        rotation: 360,\n        svgOrigin: '500 500',\n        transformOrigin: 'center center',\n        onUpdate: function () {\n          const currentRotation = this.progress() * 360\n          document.querySelectorAll('.fx-image').forEach((image) => {\n            gsap.set(image, {\n              rotation: -currentRotation,\n              transformOrigin: 'center center',\n              ease: 'none'\n            })\n          })\n        },\n        ease: 'none',\n        repeat: -1\n      })\n    })\n\n    useIntervalFn(() => {\n      switchPositions()\n    }, interval * 1000)\n  })\n})\n\nonUnmounted(() => {\n  stop()\n\n  if (ctx) {\n    ctx.revert()\n  }\n\n  document.removeEventListener('mousemove', onMouseMove)\n})\n</script>\n\n<template>\n  <div\n    ref=\"sectionRef\"\n    class=\"z-[0] overflow-hidden py-12 shadow-[0_-20px_30px_20px_rgba(255,255,255,0.99)] lg:py-20\"\n    :class=\"invertedStyles\"\n  >\n    <DeliciousSausage class=\"absolute left-0 top-0 -translate-x-1/4\" name=\"clients-top\" />\n    <DeliciousSausage\n      class=\"absolute bottom-5 right-0 hidden translate-x-1/4 lg:block\"\n      name=\"clients-bot\"\n    />\n    <div v-if=\"data\" class=\"relative mx-auto aspect-square w-full max-w-[660px]\">\n      <div\n        ref=\"rectRef\"\n        class=\"absolute left-1/2 top-1/2 isolate z-[3] -translate-x-1/2 -translate-y-1/2 transition-all\"\n      >\n        <div\n          class=\"absolute left-3 top-3 z-[2] h-[calc(100%-24px)] w-[calc(100%-24px)] rounded-full bg-white/80\"\n        ></div>\n        <NuxtLink to=\"/clients\">\n          <Image\n            loading=\"lazy\"\n            class=\"relative z-[4] mb-5 h-30 w-30 lg:mb-8 lg:h-[178px] lg:w-[178px]\"\n            :src=\"frameSrc\"\n            :width=\"178\"\n            :height=\"178\"\n            alt=\"Glass Frame\"\n          />\n        </NuxtLink>\n      </div>\n      <div\n        class=\"absolute inset-0 transition-transform duration-1000\"\n        :class=\"isVisible ? 'scale-1' : 'scale-0'\"\n      >\n        <svg id=\"demo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1000 1000\">\n          <title v-if=\"data.title\">{{ data.title }}</title>\n\n          <!-- Front Logos -->\n          <g\n            v-for=\"(record, index) in frontLogos\"\n            :key=\"'front-' + index\"\n            class=\"fx-logo fx-logo-front will-change-transform\"\n            :data-index=\"index\"\n          >\n            <g :class=\"`fx-position fx-position-front-${index}`\">\n              <image\n                v-if=\"record.logo\"\n                class=\"fx-image\"\n                :width=\"120\"\n                :height=\"120\"\n                :href=\"\n                  record.logo.responsiveImage ? record.logo.responsiveImage.src : record.logo.url\n                \"\n                :alt=\"record.logo.alt ?? 'Client logo'\"\n              />\n            </g>\n          </g>\n\n          <!-- Back Logos -->\n          <g\n            v-for=\"(record, index) in backLogos\"\n            :key=\"'back-' + index\"\n            class=\"fx-logo fx-logo-back will-change-transform\"\n            :data-index=\"index\"\n          >\n            <g :class=\"`fx-position fx-position-back-${index}`\">\n              <image\n                v-if=\"record.logo\"\n                class=\"fx-image\"\n                :width=\"120\"\n                :height=\"120\"\n                :href=\"\n                  record.logo.responsiveImage ? record.logo.responsiveImage.src : record.logo.url\n                \"\n                :alt=\"record.logo.alt ?? 'Client logo'\"\n              />\n            </g>\n          </g>\n\n          <text\n            v-if=\"data.title\"\n            class=\"font-sans\"\n            text-anchor=\"middle\"\n            transform=\"translate(500 500)\"\n            fill=\"#00000\"\n            font-size=\"64\"\n            font-weight=\"900\"\n          >\n            {{ data.title }}\n          </text>\n        </svg>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.fx-image {\n  @apply opacity-50;\n}\n</style>\n"],"names":["frameSrc","duration","interval","props","__props","invertedStyles","useSectionRules","frontLogos","ref","_b","_a","backLogos","_d","_c","ctx","calculatePosition","index","total","radius","angle","animationReverse","rotationAnimation","switchPositions","totalFront","totalBack","_","x","y","wrapper","gsap","sectionRef","isVisible","stop","useIntersectionObserver","isIntersecting","_observerElement","rectRef","onMouseMove","e","canvasContainer","rect","isMouseInside","coords","getMousePos","maxMovementX","movementX","clampedX","onMounted","nextTick","currentRotation","image","useIntervalFn","onUnmounted"],"mappings":"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"}