{"version":3,"file":"SbModuleSpotlight-55e764ce.js","sources":["../../src/components/sb-elements/SbElementSpotlightCarouselCard.vue","../../src/components/elements/ElementSpotlightCarousel.vue"],"sourcesContent":["<template>\n  <ALink\n    v-editable=\"blok\"\n    :to=\"blok.link\"\n    class=\"block relative w-full h-full effect-hover-tilt group\"\n    ref=\"cardRef\"\n    :style=\"{\n      '--rotate-x': `${tilt.x}deg`,\n      '--rotate-y': `${tilt.y}deg`,\n    }\"\n  >\n    <div\n      class=\"w-full h-full pb-[--aspect] mask\"\n      :style=\"{\n        '--aspect': `${maskAspect * 100}%`,\n      }\"\n    >\n      <div\n        class=\"absolute top-50% left-50% translate-[-50%] w-full h-full effect-hover-tilt-media\"\n      >\n        <ElementMedia\n          class=\"w-full h-full object-cover\"\n          :bloks=\"blok.media\"\n          :ratio=\"{\n            w: maskWidth,\n            h: maskHeight,\n          }\"\n          :sizes=\"sizes\"\n        />\n      </div>\n      <ElementSpotlightCardText\n        :blok=\"blok\"\n        :layout=\"layout\"\n        class=\"absolute top-50% left-50% translate-[-50%] w-full h-full\"\n      />\n    </div>\n  </ALink>\n</template>\n\n<script setup lang=\"ts\">\nimport {\n  ElementSpotlightCardStoryblok,\n  ModuleSpotlightStoryblok,\n} from '@/types';\nimport { ImgSizes } from '@/components/atoms/AImage.vue';\nimport useHoverTilt from '@/composables/useHoverTilt';\n\ninterface Props {\n  blok: ElementSpotlightCardStoryblok;\n  index: number;\n  total: number;\n  sizes: ImgSizes;\n  layout: ModuleSpotlightStoryblok['layout'];\n}\ndefineProps<Props>();\n\nconst maskWidth = 387;\nconst maskHeight = 445;\nconst maskAspect = maskHeight / maskWidth;\n\nconst cardRef = ref<HTMLElement | null>(null);\nconst { tilt } = useHoverTilt(cardRef);\n</script>\n\n<style lang=\"scss\" scoped>\n.mask {\n  -webkit-mask-image: url('@/assets/masks/spotlight-card-mask.svg');\n  mask-image: url('@/assets/masks/spotlight-card-mask.svg');\n  -webkit-mask-size: contain;\n  mask-size: contain;\n}\n</style>\n","<template>\n  <div\n    class=\"relative min-h-fill-available h-[--scroll-height] mt-neg-header-candle pointer-events-none\"\n    :style=\"{\n      '--scroll-height': `${(cardsCount / config.cardsVisibleCount) * 100}vh`,\n    }\"\n    :data-many-scroller=\"timeline\"\n  >\n    <div\n      ref=\"scrollElRef\"\n      class=\"relative sticky clamp-top-0-8 h-fill-available pt-header-candle pointer-events-none\"\n      :style=\"{\n        '--d': `${radius * 2}px`,\n        '--r': `${radius}px`,\n        '--card-width': `${cardWidth}px`,\n        '--card-height': `${cardHeight}px`,\n        '--bg-offset': '60px',\n      }\"\n    >\n      <div\n        class=\"relative h-full pointer-events-auto overflow-hidden py-1500px my--1500px\"\n        :style=\"{\n          '--card-wrap-height': `${cardWrapHeight}px`,\n        }\"\n      >\n        <div class=\"relative z-1\">\n          <slot name=\"header\" />\n        </div>\n        <div\n          class=\"relative w-full h-[--card-wrap-height] shrink-0 clamp-mt-18-28\"\n        >\n          <div\n            :class=\"[\n              'circle-bg pointer-events-none',\n              `before-w-[--d] before-h-[--d] before-content-[''] before-absolute before-clamp-top-6-6 before-ml:top-0 before-left-50% before-translate-x--50% before-mt-[--mt]`,\n            ]\"\n            :style=\"{ '--mt': `calc(var(--bg-offset) * -1)` }\"\n          />\n          <div\n            class=\"w-[--d] h-[--d] absolute left-50% top-0 translate-x-[-50%] origin-center-center rotate-[--rotate] transition-transform-150 ease-out pointer-events-none\"\n            :style=\"{ '--rotate': angleCircleOffsetRad }\"\n          >\n            <template v-for=\"(card, index) in cards\" :key=\"card._uid\">\n              <div\n                class=\"absolute left-50% translate-x-[-50%] block w-[--card-width] h-[--r] clamp-px-2-20 tp:clamp-px-4-12 ds:clamp-px-2-8 origin-bottom-center rotate-[--rotate]\"\n                :style=\"{\n                  '--rotate': `${round(\n                    angleCardOffsetFactor * (index - config.indexOffset),\n                    2,\n                  )}rad`,\n                }\"\n              >\n                <div\n                  class=\"relative w-full h-auto effect-hover-tilt-parent pointer-events-auto\"\n                >\n                  <SbElementSpotlightCarouselCard\n                    :blok=\"card\"\n                    :index=\"index\"\n                    :total=\"cards.length\"\n                    :layout=\"layout\"\n                    :sizes=\"[\n                      { bpMin: 'ds', vw: 20 },\n                      { bpMin: 'tp', vw: 33 },\n                      { bpMin: '0', vw: 50 },\n                    ]\"\n                  />\n                </div>\n              </div>\n            </template>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {\n  ElementSpotlightCardStoryblok,\n  ModuleSpotlightStoryblok,\n} from '@/types';\nimport { useWindowSize } from '@vueuse/core';\nimport { getBreakpoint } from '@/../uno-preset/preset-theme';\nimport { useManyScrollerOptions } from '@/composables/useManyScrollerOptions';\n\nconst { timeline } = useManyScrollerOptions();\nconst { width } = useWindowSize();\n\nconst scrollElRef = ref<HTMLElement | null>(null);\n\ninterface Props {\n  cards: ElementSpotlightCardStoryblok[];\n  layout: ModuleSpotlightStoryblok['layout'];\n}\nconst props = defineProps<Props>();\n\nconst round = (n: number, decimals: number) => {\n  const factor = 10 ** decimals;\n  return Math.round(n * factor) / factor;\n};\nconst min = (a: number, b: number) => (a < b ? a : b);\n\nconst configs = [\n  {\n    minVw: getBreakpoint('ds'),\n    cardsVisibleCount: 5,\n    radiusScale: 1,\n    indexOffset: 2,\n  },\n  {\n    minVw: getBreakpoint('tp'),\n    cardsVisibleCount: 3,\n    radiusScale: 1.5,\n    indexOffset: 1,\n  },\n  {\n    minVw: 0,\n    cardsVisibleCount: 1,\n    radiusScale: 3,\n    indexOffset: 0,\n  },\n];\n\nconst cardsCount = computed(() => props.cards?.length || 0);\n\nconst maskWidth = 387;\nconst maskHeight = 445;\nconst maskAspect = maskHeight / maskWidth;\n\nconst config = computed(() => {\n  const config = configs.find((config) => width.value >= config.minVw);\n  if (!config) throw new Error('No config found');\n  return config;\n});\n\nconst radius = computed(() => width.value * config.value.radiusScale);\nconst halfScreen = computed(() => (width.value * config.value.radiusScale) / 2);\n\n// calculate the radius of the visible part of the circle on the screen\nconst angleCardOffsetFactor = computed(() => {\n  const c1 = radius.value;\n  const a1 = halfScreen.value;\n  const A1 = Math.asin(a1 / c1);\n  const A2 = A1 * 2; // angle of the visible part of the circle\n  return (A2 / config.value.cardsVisibleCount) * (1 / config.value.radiusScale);\n});\n\n// calculate the angle offset of the hidden cards\nconst angleCircleOffsetRad = computed(() => {\n  const cardsHiddenCount = props.cards.length - config.value.cardsVisibleCount;\n\n  if (props.cards.length < config.value.cardsVisibleCount) {\n    // if there are less cards than visible cards, center the cards\n    const cardsMissingCount =\n      config.value.cardsVisibleCount - props.cards.length;\n    return `calc((${angleCardOffsetFactor.value} * ${\n      cardsMissingCount / 2\n    }) * 1rad)`;\n  }\n\n  const offsetMin = 0;\n  const offsetMax = angleCardOffsetFactor.value * cardsHiddenCount;\n\n  // lerp between offsetMin and offsetMax - scroll-progress var comes from data-many-scroller\n  return `calc(((1 - var(--scroll-position-full)) * ${offsetMin} + var(--scroll-position-full) * ${offsetMax}) * -1rad)`;\n});\n\n// calculate the width of each card\nconst cardWidth = computed(() => {\n  const c3 = radius.value;\n  const A3 = angleCardOffsetFactor.value;\n  const a3 = Math.sin(A3) * c3;\n  return min(a3, width.value - 64); // make sure it's not wider than the screen minus some padding\n});\n\nconst cardHeight = computed(() => cardWidth.value * maskAspect);\n\nconst cardWrapHeight = computed(() => {\n  const c4 = radius.value * config.value.radiusScale;\n  const a4 = halfScreen.value;\n  const b4 = Math.sqrt(c4 * c4 - a4 * a4);\n\n  const spaceBelowCenterCard = c4 - b4;\n  return spaceBelowCenterCard + cardHeight.value;\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.circle-bg {\n  &:before {\n    background: linear-gradient(var(--section-bg-color) 50%, transparent 50%);\n    mask: radial-gradient(\n      transparent calc(var(--r) - var(--card-height) - var(--bg-offset) + 16px),\n      #000 calc(var(--r) - var(--card-height) - var(--bg-offset) + 16px),\n      #000 var(--r),\n      transparent var(--r)\n    );\n    filter: brightness(0.95) grayscale(0.05);\n  }\n}\n</style>\n"],"names":["maskWidth","maskHeight","maskAspect","cardRef","ref","tilt","useHoverTilt","timeline","useManyScrollerOptions","width","useWindowSize","scrollElRef","props","__props","round","n","decimals","factor","min","a","b","configs","getBreakpoint","cardsCount","computed","_a","config","config2","config3","radius","halfScreen","angleCardOffsetFactor","c1","a1","angleCircleOffsetRad","cardsHiddenCount","cardsMissingCount","offsetMin","offsetMax","cardWidth","c3","A3","a3","cardHeight","cardWrapHeight","c4","a4","b4"],"mappings":"urBAwDAA,EAAA,IACAC,EAAA,gHACA,MAAAC,EAAAD,EAAAD,EAEAG,EAAAC,EAAA,IAAA,EACA,CAAA,KAAAC,CAAA,EAAAC,EAAAH,CAAA,44BCgEAH,GAAA,IACAC,GAAA,gFAzCA,KAAA,CAAA,SAAAM,GAAAC,IACA,CAAA,MAAAC,GAAAC,IAEAC,EAAAP,EAAA,IAAA,EAMAQ,EAAAC,EAEAC,EAAA,CAAAC,EAAAC,IAAA,CACE,MAAAC,EAAA,IAAAD,EACA,OAAA,KAAA,MAAAD,EAAAE,CAAA,EAAAA,CAAgC,EAElCC,EAAA,CAAAC,EAAAC,IAAAD,EAAAC,EAAAD,EAAAC,EAEAC,EAAA,CAAgB,CACd,MAAAC,EAAA,IAAA,EAC2B,kBAAA,EACN,YAAA,EACN,YAAA,CACA,EACf,CACA,MAAAA,EAAA,IAAA,EAC2B,kBAAA,EACN,YAAA,IACN,YAAA,CACA,EACf,CACA,MAAA,EACS,kBAAA,EACY,YAAA,EACN,YAAA,CACA,CACf,EAGFC,EAAAC,EAAA,IAAA,OAAA,QAAAC,EAAAb,EAAA,QAAA,YAAAa,EAAA,SAAA,EAAA,EAIAvB,EAAAD,GAAAD,GAEA0B,EAAAF,EAAA,IAAA,CACE,MAAAG,EAAAN,EAAA,KAAAO,GAAAnB,EAAA,OAAAmB,EAAA,KAAA,EACA,GAAA,CAAAD,EAAa,MAAA,IAAA,MAAA,iBAAA,EACb,OAAAA,CAAO,CAAA,EAGTE,EAAAL,EAAA,IAAAf,EAAA,MAAAiB,EAAA,MAAA,WAAA,EACAI,EAAAN,EAAA,IAAAf,EAAA,MAAAiB,EAAA,MAAA,YAAA,CAAA,EAGAK,EAAAP,EAAA,IAAA,CACE,MAAAQ,EAAAH,EAAA,MACAI,EAAAH,EAAA,MAGA,OAFA,KAAA,KAAAG,EAAAD,CAAA,EACA,EACAN,EAAA,MAAA,mBAAA,EAAAA,EAAA,MAAA,YAAiE,CAAA,EAInEQ,EAAAV,EAAA,IAAA,CACE,MAAAW,EAAAvB,EAAA,MAAA,OAAAc,EAAA,MAAA,kBAEA,GAAAd,EAAA,MAAA,OAAAc,EAAA,MAAA,kBAAA,CAEE,MAAAU,EAAAV,EAAA,MAAA,kBAAAd,EAAA,MAAA,OAEA,MAAA,SAAAmB,EAAA,KAAA,MAAAK,EAAA,CAAA,WAEA,CAGF,MAAAC,EAAA,EACAC,EAAAP,EAAA,MAAAI,EAGA,MAAA,6CAAAE,CAAA,oCAAAC,CAAA,YAA0G,CAAA,EAI5GC,EAAAf,EAAA,IAAA,CACE,MAAAgB,EAAAX,EAAA,MACAY,EAAAV,EAAA,MACAW,EAAA,KAAA,IAAAD,CAAA,EAAAD,EACA,OAAAtB,EAAAwB,EAAAjC,EAAA,MAAA,EAAA,CAA+B,CAAA,EAGjCkC,EAAAnB,EAAA,IAAAe,EAAA,MAAArC,CAAA,EAEA0C,EAAApB,EAAA,IAAA,CACE,MAAAqB,EAAAhB,EAAA,MAAAH,EAAA,MAAA,YACAoB,EAAAhB,EAAA,MACAiB,EAAA,KAAA,KAAAF,EAAAA,EAAAC,EAAAA,CAAA,EAGA,OADAD,EAAAE,EACAJ,EAAA,KAAyC,CAAA"}