{"version":3,"file":"PageHero.57f24286.js","sources":["../../../../components/global/sections/PageHero.vue"],"sourcesContent":["<template>\n  <div ref=\"root\" class=\"hero\" :class=\"{ 'is-wider': wider }\">\n    <div class=\"container has-m-v-spacing\">\n      <div ref=\"content\" class=\"hero__block\">\n        <template v-if=\"!!$slots.title\">\n          <div ref=\"display\" :class=\"displayCustom ? '' : 'hero__display'\">\n            <slot name=\"title\" />\n          </div>\n        </template>\n        <template v-else>\n          <h1\n            ref=\"display\"\n            :class=\"displayCustom ? '' : 'hero__display'\"\n            v-html=\"title.replace('|', '<br />')\"\n          />\n        </template>\n        <div class=\"hero__text content\" ref=\"text\">\n          <slot />\n        </div>\n        <svg class=\"hero__svg\" preserveAspectRatio=\"none\" viewBox=\"0 0 731 353\">\n          <mask id=\"mask\">\n            <rect x=\"0\" y=\"0\" width=\"731\" height=\"353\" fill=\"white\" />\n            <path\n              d=\"M33.301 353C14.9093 353 0 337.993 0 319.482V353H33.301Z\"\n              fill=\"black\"\n              ref=\"leftBottom\"\n            ></path>\n            <path\n              d=\"M0 33.5181C0 15.0066 14.9094 0 33.3011 0H0V33.5181Z\"\n              fill=\"black\"\n              ref=\"leftTop\"\n            ></path>\n            <path\n              d=\"M731 322.996C731 339.565 717.569 353 701 353H731V322.996Z\"\n              fill=\"black\"\n              ref=\"rightBottom\"\n            ></path>\n            <path\n              d=\"M697.699 124.641C716.091 124.641 731 139.648 731 158.16V0H588.579C606.97 0 621.88 15.0066 621.88 33.5181V91.1233C621.88 109.635 636.789 124.641 655.181 124.641H697.699Z\"\n              fill=\"black\"\n              ref=\"rightTop\"\n            ></path>\n          </mask>\n          <rect\n            ref=\"block\"\n            x=\"0\"\n            y=\"0\"\n            width=\"731\"\n            height=\"353\"\n            fill=\"#E0C7E6\"\n            mask=\"url(#mask)\"\n          />\n        </svg>\n      </div>\n    </div>\n    <template v-if=\"video\">\n      <div ref=\"videoEl\" class=\"hero__video\" />\n    </template>\n    <template v-else-if=\"image\">\n      <responsive-image\n        class=\"hero__img\"\n        :image-url=\"image\"\n        :alt=\"imageAlt\"\n        mode=\"all\"\n        :lazy-loading=\"false\"\n      />\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { onMounted, ref, useNuxtApp } from \"#imports\";\nimport type { Nullable } from \"~/types/generic\";\nimport ResponsiveImage from \"~/components/global/ui/ResponsiveImage.vue\";\nimport Player from \"@vimeo/player\";\n\nconst props = defineProps({\n  title: {\n    type: String,\n    default: \"\",\n  },\n  displayCustom: {\n    type: Boolean,\n    default: false,\n  },\n  wider: {\n    type: Boolean,\n    default: false,\n  },\n  image: {\n    type: String,\n    default: \"/images/bg/light\",\n  },\n  imageAlt: {\n    type: String,\n    default: \"\",\n  },\n  video: {\n    type: Number,\n  },\n});\n\nlet vimeoPlayer: any = null;\n\nconst root = ref(null);\nconst content = ref(null);\nconst rightTop = ref(null);\nconst rightBottom = ref(null);\nconst leftTop = ref(null);\nconst leftBottom = ref(null);\nconst display = ref(null);\nconst text = ref(null);\nconst block = ref(null);\n\nconst videoEl = ref<Nullable<HTMLElement>>(null);\n\nonMounted(() => {\n  const { $gsap } = useNuxtApp();\n\n  const tl = $gsap.timeline({ paused: true });\n\n  $gsap.set(block.value, { scale: 0, opacity: 1, transformOrigin: \"50% 50%\" });\n  $gsap.set(rightTop.value, { scale: 0.05, transformOrigin: \"100% 0%\" });\n  $gsap.set(rightBottom.value, { scaleX: 0.05, transformOrigin: \"100% 50%\" });\n  $gsap.set(leftTop.value, { scale: 0.05, transformOrigin: \"0% 0%\" });\n  $gsap.set(leftBottom.value, { scale: 0.05, transformOrigin: \"0% 100%\" });\n  $gsap.set(display.value, { y: 40, opacity: 0 });\n  $gsap.set(text.value, { y: 40, opacity: 0 });\n  $gsap.set(content.value, { opacity: 1 });\n\n  tl.to(block.value, { scale: 1, opacity: 1, duration: 1, ease: \"power4.out\" }, 0);\n  tl.to(rightTop.value, { scale: 1, duration: 2, ease: \"power3.out\" }, 0.1);\n  tl.to(rightBottom.value, { scaleX: 1, duration: 2.5, ease: \"power3.out\" }, 0.1);\n  tl.to(leftTop.value, { scale: 1, duration: 4, ease: \"power4.out\" }, 0.2);\n  tl.to(leftBottom.value, { scale: 1, duration: 4, ease: \"power4.out\" }, 0.2);\n  tl.to(display.value, { y: 0, opacity: 1, duration: 1, ease: \"power3.out\" }, 0.5);\n  tl.to(text.value, { y: 0, opacity: 1, duration: 1, ease: \"power3.out\" }, 0.8);\n\n  setTimeout(() => {\n    tl.play();\n  }, 350);\n\n  if (videoEl.value) {\n    vimeoPlayer = new Player(videoEl.value, {\n      id: props.video,\n      background: true,\n      loop: true,\n      autoplay: true,\n    });\n  }\n});\n\nonBeforeUnmount(() => vimeoPlayer?.unload());\n</script>\n\n<style lang=\"scss\" scoped>\n.hero {\n  position: relative;\n  overflow: hidden;\n\n  &__video {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: -1;\n    pointer-events: none;\n    overflow: hidden;\n    position: absolute;\n\n    :deep(iframe) {\n      width: 100vw;\n      height: 56.25vw;\n      /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */\n      min-height: 100vh;\n      min-width: 177.77vh;\n      /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n\n    //@include cover(0, -1);\n  }\n\n  &__img {\n    @include cover(0, -1);\n\n    ::v-deep(img) {\n      @include cover;\n    }\n  }\n\n  &__display {\n    padding: rem(40) rem(40) 0;\n    font-family: var(--heading-font-family);\n    @include fluid(font-size, 32, 60, 70);\n    line-height: 1.02;\n  }\n\n  &.is-wider {\n    .hero__block {\n      @include fluid(width, 320, 640, 690);\n    }\n  }\n\n  &__block {\n    opacity: 0;\n    @include fluid(width, 320, 550, 630);\n\n    position: relative;\n    z-index: 2;\n\n    @include mobile {\n      width: 100%;\n      background-color: var(--dark-pink);\n      border-radius: rem(20);\n    }\n\n    @include desktop {\n      margin-left: rem(-40);\n    }\n  }\n\n  &__text {\n    padding: rem(40);\n    font-weight: 500;\n    @include fluid(font-size, 15, 17, 18);\n  }\n\n  &__svg {\n    @include cover($z-index: -1);\n\n    @include mobile {\n      display: none;\n    }\n\n    * {\n      transform-box: view-box;\n    }\n  }\n}\n</style>\n"],"names":["vimeoPlayer","root","ref","content","rightTop","rightBottom","leftTop","leftBottom","display","text","block","videoEl","onMounted","$gsap","useNuxtApp","tl","Player","props","onBeforeUnmount"],"mappings":"kyBAsGA,IAAIA,EAAmB,KAEjB,MAAAC,EAAOC,EAAI,IAAI,EACfC,EAAUD,EAAI,IAAI,EAClBE,EAAWF,EAAI,IAAI,EACnBG,EAAcH,EAAI,IAAI,EACtBI,EAAUJ,EAAI,IAAI,EAClBK,EAAaL,EAAI,IAAI,EACrBM,EAAUN,EAAI,IAAI,EAClBO,EAAOP,EAAI,IAAI,EACfQ,EAAQR,EAAI,IAAI,EAEhBS,EAAUT,EAA2B,IAAI,EAE/C,OAAAU,EAAU,IAAM,CACR,KAAA,CAAE,MAAAC,GAAUC,IAEZC,EAAKF,EAAM,SAAS,CAAE,OAAQ,GAAM,EAEpCA,EAAA,IAAIH,EAAM,MAAO,CAAE,MAAO,EAAG,QAAS,EAAG,gBAAiB,SAAW,CAAA,EACrEG,EAAA,IAAIT,EAAS,MAAO,CAAE,MAAO,IAAM,gBAAiB,UAAW,EAC/DS,EAAA,IAAIR,EAAY,MAAO,CAAE,OAAQ,IAAM,gBAAiB,WAAY,EACpEQ,EAAA,IAAIP,EAAQ,MAAO,CAAE,MAAO,IAAM,gBAAiB,QAAS,EAC5DO,EAAA,IAAIN,EAAW,MAAO,CAAE,MAAO,IAAM,gBAAiB,UAAW,EACjEM,EAAA,IAAIL,EAAQ,MAAO,CAAE,EAAG,GAAI,QAAS,EAAG,EACxCK,EAAA,IAAIJ,EAAK,MAAO,CAAE,EAAG,GAAI,QAAS,EAAG,EAC3CI,EAAM,IAAIV,EAAQ,MAAO,CAAE,QAAS,EAAG,EAEvCY,EAAG,GAAGL,EAAM,MAAO,CAAE,MAAO,EAAG,QAAS,EAAG,SAAU,EAAG,KAAM,cAAgB,CAAC,EAC5EK,EAAA,GAAGX,EAAS,MAAO,CAAE,MAAO,EAAG,SAAU,EAAG,KAAM,YAAa,EAAG,EAAG,EACrEW,EAAA,GAAGV,EAAY,MAAO,CAAE,OAAQ,EAAG,SAAU,IAAK,KAAM,YAAa,EAAG,EAAG,EAC3EU,EAAA,GAAGT,EAAQ,MAAO,CAAE,MAAO,EAAG,SAAU,EAAG,KAAM,YAAa,EAAG,EAAG,EACpES,EAAA,GAAGR,EAAW,MAAO,CAAE,MAAO,EAAG,SAAU,EAAG,KAAM,YAAa,EAAG,EAAG,EAC1EQ,EAAG,GAAGP,EAAQ,MAAO,CAAE,EAAG,EAAG,QAAS,EAAG,SAAU,EAAG,KAAM,cAAgB,EAAG,EAC/EO,EAAG,GAAGN,EAAK,MAAO,CAAE,EAAG,EAAG,QAAS,EAAG,SAAU,EAAG,KAAM,cAAgB,EAAG,EAE5E,WAAW,IAAM,CACfM,EAAG,KAAK,GACP,GAAG,EAEFJ,EAAQ,QACIX,EAAA,IAAIgB,EAAOL,EAAQ,MAAO,CACtC,GAAIM,EAAM,MACV,WAAY,GACZ,KAAM,GACN,SAAU,EAAA,CACX,EACH,CACD,EAEeC,EAAA,IAAMlB,GAAA,YAAAA,EAAa,QAAQ"}