{"version":3,"file":"Footer.7953343f.js","sources":["../../../../node_modules/gsap/ScrollToPlugin.js","../../../../components/Sidebar.vue","../../../../components/Header/PlayVideoButton.vue","../../../../../../../../../assets/paradigma-rebranding-2024.mp4","../../../../../../../../../assets/img/header-video-poster.webp","../../../../components/Header.vue","../../../../components/AnimatedImage.vue","../../../../components/Motto.vue","../../../../components/SliderControls.vue","../../../../components/WeAre.vue","../../../../components/WeDo.vue","../../../../components/Principles.vue","../../../../components/WeWant.vue","../../../../utils/navbarHeight.utils.ts","../../../../components/SkillsTechnologies.vue","../../../../components/WorkWithUs.vue","../../../../components/Footer.vue"],"sourcesContent":["/*!\n * ScrollToPlugin 3.12.2\n * https://greensock.com\n *\n * @license Copyright 2008-2023, GreenSock. All rights reserved.\n * Subject to the terms at https://greensock.com/standard-license or for\n * Club GreenSock members, the agreement issued with that membership.\n * @author: Jack Doyle, jack@greensock.com\n*/\n\n/* eslint-disable */\nvar gsap,\n    _coreInitted,\n    _window,\n    _docEl,\n    _body,\n    _toArray,\n    _config,\n    ScrollTrigger,\n    _windowExists = function _windowExists() {\n  return typeof window !== \"undefined\";\n},\n    _getGSAP = function _getGSAP() {\n  return gsap || _windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap;\n},\n    _isString = function _isString(value) {\n  return typeof value === \"string\";\n},\n    _isFunction = function _isFunction(value) {\n  return typeof value === \"function\";\n},\n    _max = function _max(element, axis) {\n  var dim = axis === \"x\" ? \"Width\" : \"Height\",\n      scroll = \"scroll\" + dim,\n      client = \"client\" + dim;\n  return element === _window || element === _docEl || element === _body ? Math.max(_docEl[scroll], _body[scroll]) - (_window[\"inner\" + dim] || _docEl[client] || _body[client]) : element[scroll] - element[\"offset\" + dim];\n},\n    _buildGetter = function _buildGetter(e, axis) {\n  //pass in an element and an axis (\"x\" or \"y\") and it'll return a getter function for the scroll position of that element (like scrollTop or scrollLeft, although if the element is the window, it'll use the pageXOffset/pageYOffset or the documentElement's scrollTop/scrollLeft or document.body's. Basically this streamlines things and makes a very fast getter across browsers.\n  var p = \"scroll\" + (axis === \"x\" ? \"Left\" : \"Top\");\n\n  if (e === _window) {\n    if (e.pageXOffset != null) {\n      p = \"page\" + axis.toUpperCase() + \"Offset\";\n    } else {\n      e = _docEl[p] != null ? _docEl : _body;\n    }\n  }\n\n  return function () {\n    return e[p];\n  };\n},\n    _clean = function _clean(value, index, target, targets) {\n  _isFunction(value) && (value = value(index, target, targets));\n\n  if (typeof value !== \"object\") {\n    return _isString(value) && value !== \"max\" && value.charAt(1) !== \"=\" ? {\n      x: value,\n      y: value\n    } : {\n      y: value\n    }; //if we don't receive an object as the parameter, assume the user intends \"y\".\n  } else if (value.nodeType) {\n    return {\n      y: value,\n      x: value\n    };\n  } else {\n    var result = {},\n        p;\n\n    for (p in value) {\n      result[p] = p !== \"onAutoKill\" && _isFunction(value[p]) ? value[p](index, target, targets) : value[p];\n    }\n\n    return result;\n  }\n},\n    _getOffset = function _getOffset(element, container) {\n  element = _toArray(element)[0];\n\n  if (!element || !element.getBoundingClientRect) {\n    return console.warn(\"scrollTo target doesn't exist. Using 0\") || {\n      x: 0,\n      y: 0\n    };\n  }\n\n  var rect = element.getBoundingClientRect(),\n      isRoot = !container || container === _window || container === _body,\n      cRect = isRoot ? {\n    top: _docEl.clientTop - (_window.pageYOffset || _docEl.scrollTop || _body.scrollTop || 0),\n    left: _docEl.clientLeft - (_window.pageXOffset || _docEl.scrollLeft || _body.scrollLeft || 0)\n  } : container.getBoundingClientRect(),\n      offsets = {\n    x: rect.left - cRect.left,\n    y: rect.top - cRect.top\n  };\n\n  if (!isRoot && container) {\n    //only add the current scroll position if it's not the window/body.\n    offsets.x += _buildGetter(container, \"x\")();\n    offsets.y += _buildGetter(container, \"y\")();\n  }\n\n  return offsets;\n},\n    _parseVal = function _parseVal(value, target, axis, currentVal, offset) {\n  return !isNaN(value) && typeof value !== \"object\" ? parseFloat(value) - offset : _isString(value) && value.charAt(1) === \"=\" ? parseFloat(value.substr(2)) * (value.charAt(0) === \"-\" ? -1 : 1) + currentVal - offset : value === \"max\" ? _max(target, axis) - offset : Math.min(_max(target, axis), _getOffset(value, target)[axis] - offset);\n},\n    _initCore = function _initCore() {\n  gsap = _getGSAP();\n\n  if (_windowExists() && gsap && typeof document !== \"undefined\" && document.body) {\n    _window = window;\n    _body = document.body;\n    _docEl = document.documentElement;\n    _toArray = gsap.utils.toArray;\n    gsap.config({\n      autoKillThreshold: 7\n    });\n    _config = gsap.config();\n    _coreInitted = 1;\n  }\n};\n\nexport var ScrollToPlugin = {\n  version: \"3.12.2\",\n  name: \"scrollTo\",\n  rawVars: 1,\n  register: function register(core) {\n    gsap = core;\n\n    _initCore();\n  },\n  init: function init(target, value, tween, index, targets) {\n    _coreInitted || _initCore();\n    var data = this,\n        snapType = gsap.getProperty(target, \"scrollSnapType\");\n    data.isWin = target === _window;\n    data.target = target;\n    data.tween = tween;\n    value = _clean(value, index, target, targets);\n    data.vars = value;\n    data.autoKill = !!value.autoKill;\n    data.getX = _buildGetter(target, \"x\");\n    data.getY = _buildGetter(target, \"y\");\n    data.x = data.xPrev = data.getX();\n    data.y = data.yPrev = data.getY();\n    ScrollTrigger || (ScrollTrigger = gsap.core.globals().ScrollTrigger);\n    gsap.getProperty(target, \"scrollBehavior\") === \"smooth\" && gsap.set(target, {\n      scrollBehavior: \"auto\"\n    });\n\n    if (snapType && snapType !== \"none\") {\n      // disable scroll snapping to avoid strange behavior\n      data.snap = 1;\n      data.snapInline = target.style.scrollSnapType;\n      target.style.scrollSnapType = \"none\";\n    }\n\n    if (value.x != null) {\n      data.add(data, \"x\", data.x, _parseVal(value.x, target, \"x\", data.x, value.offsetX || 0), index, targets);\n\n      data._props.push(\"scrollTo_x\");\n    } else {\n      data.skipX = 1;\n    }\n\n    if (value.y != null) {\n      data.add(data, \"y\", data.y, _parseVal(value.y, target, \"y\", data.y, value.offsetY || 0), index, targets);\n\n      data._props.push(\"scrollTo_y\");\n    } else {\n      data.skipY = 1;\n    }\n  },\n  render: function render(ratio, data) {\n    var pt = data._pt,\n        target = data.target,\n        tween = data.tween,\n        autoKill = data.autoKill,\n        xPrev = data.xPrev,\n        yPrev = data.yPrev,\n        isWin = data.isWin,\n        snap = data.snap,\n        snapInline = data.snapInline,\n        x,\n        y,\n        yDif,\n        xDif,\n        threshold;\n\n    while (pt) {\n      pt.r(ratio, pt.d);\n      pt = pt._next;\n    }\n\n    x = isWin || !data.skipX ? data.getX() : xPrev;\n    y = isWin || !data.skipY ? data.getY() : yPrev;\n    yDif = y - yPrev;\n    xDif = x - xPrev;\n    threshold = _config.autoKillThreshold;\n\n    if (data.x < 0) {\n      //can't scroll to a position less than 0! Might happen if someone uses a Back.easeOut or Elastic.easeOut when scrolling back to the top of the page (for example)\n      data.x = 0;\n    }\n\n    if (data.y < 0) {\n      data.y = 0;\n    }\n\n    if (autoKill) {\n      //note: iOS has a bug that throws off the scroll by several pixels, so we need to check if it's within 7 pixels of the previous one that we set instead of just looking for an exact match.\n      if (!data.skipX && (xDif > threshold || xDif < -threshold) && x < _max(target, \"x\")) {\n        data.skipX = 1; //if the user scrolls separately, we should stop tweening!\n      }\n\n      if (!data.skipY && (yDif > threshold || yDif < -threshold) && y < _max(target, \"y\")) {\n        data.skipY = 1; //if the user scrolls separately, we should stop tweening!\n      }\n\n      if (data.skipX && data.skipY) {\n        tween.kill();\n        data.vars.onAutoKill && data.vars.onAutoKill.apply(tween, data.vars.onAutoKillParams || []);\n      }\n    }\n\n    if (isWin) {\n      _window.scrollTo(!data.skipX ? data.x : x, !data.skipY ? data.y : y);\n    } else {\n      data.skipY || (target.scrollTop = data.y);\n      data.skipX || (target.scrollLeft = data.x);\n    }\n\n    if (snap && (ratio === 1 || ratio === 0)) {\n      y = target.scrollTop;\n      x = target.scrollLeft;\n      snapInline ? target.style.scrollSnapType = snapInline : target.style.removeProperty(\"scroll-snap-type\");\n      target.scrollTop = y + 1; // bug in Safari causes the element to totally reset its scroll position when scroll-snap-type changes, so we need to set it to a slightly different value and then back again to work around this bug.\n\n      target.scrollLeft = x + 1;\n      target.scrollTop = y;\n      target.scrollLeft = x;\n    }\n\n    data.xPrev = data.x;\n    data.yPrev = data.y;\n    ScrollTrigger && ScrollTrigger.update();\n  },\n  kill: function kill(property) {\n    var both = property === \"scrollTo\";\n\n    if (both || property === \"scrollTo_x\") {\n      this.skipX = 1;\n    }\n\n    if (both || property === \"scrollTo_y\") {\n      this.skipY = 1;\n    }\n  }\n};\nScrollToPlugin.max = _max;\nScrollToPlugin.getOffset = _getOffset;\nScrollToPlugin.buildGetter = _buildGetter;\n_getGSAP() && gsap.registerPlugin(ScrollToPlugin);\nexport { ScrollToPlugin as default };","<script setup lang=\"ts\">\n    import { gsap } from \"gsap\";\n    import { ScrollToPlugin } from \"gsap/all\";\n\n    const sidebar = ref<HTMLDivElement | null>(null);\n    const currentSection = ref(0);\n    const initialSection = ref<boolean>();\n    const currentColor = ref(\"light\");\n    const colorSections = ref<NodeListOf<HTMLElement> | []>([]);\n    const sections = ref<NodeListOf<HTMLElement> | []>([]);\n    const nextSection = ref<boolean>();\n    let scrollBlock = false;\n    const globalState = useGlobalState();\n\n    const hidden = ref<boolean>(false);\n    const hiddenClasses: string[] = ['footer'];\n\n    const { locale } = useI18n();\n\n    const { data: translations } = await useAsyncData('translations', async () => {\n        const res = await $fetch<any>(`/api/translations?lang=${locale.value}&mode=${globalState.value.mode}`)\n        return res\n    }, { watch: [locale, globalState] })\n\n    onMounted(() => {\n        if(process.client) {\n            nextTick(() => {\n                sidebar.value = document.getElementById('container-sidebar') as HTMLDivElement;\n\n                gsap.registerPlugin(ScrollToPlugin);\n                if (document.querySelectorAll('.sidebar-section')) {\n                    sections.value = document.querySelectorAll('.sidebar-section') as NodeListOf<HTMLElement>;\n                    colorSections.value = document.querySelectorAll('[data-sidebar-color]') as NodeListOf<HTMLElement>;\n                    if (sections.value.length) {\n                        onScroll();\n                        window.addEventListener(\"scroll\", onScroll);\n                    }\n\n                }\n            })\n        }\n    });\n\n    onUnmounted(() =>{\n        window.removeEventListener(\"scroll\", onScroll);\n    })\n\n    const onScroll = () =>{\n        const windowY = window.scrollY;\n\n        const isOnHeader = windowY < window.innerHeight / 2;\n\n        hidden.value = isOnHeader;\n\n        sections.value?.forEach(({ offsetTop, offsetHeight, className }, index) => {\n            const topValue = offsetTop - window.innerHeight / 2;\n\n            if (windowY > topValue && windowY < topValue + offsetHeight) {\n                currentSection.value = index;\n                initialSection.value = currentSection.value === 0;\n                nextSection.value =\n                    currentSection.value >= sections.value.length - 1;\n                colorSections.value.forEach(\n                    ( section, i ) => {\n                        \n                        const positionSection =  section.getBoundingClientRect();\n                        const startChangeColor =  window.innerHeight / 2 ;\n                        const sidebarHeight = (sidebar.value?.getBoundingClientRect().height || 0) / 2 ;\n                        const checkColor = (positionSection.top - sidebarHeight) <= startChangeColor && (positionSection.bottom - sidebarHeight ) >= startChangeColor;\n\n                        if ( checkColor ) {\n                            currentColor.value = section.dataset.sidebarColor || \"light\";\n\n                            //HIDE SECTION\n                            hidden.value = \n                                isOnHeader || hiddenClasses.some((hiddenClass => \n                                    section.className.includes(hiddenClass)\n                                ));\n                        }\n                    }\n                );\n            }\n        });\n    }\n\n    const scrollToSection = (index: number) => {\n        currentSection.value = index;\n\n        gsap.to(window, {\n            scrollTo: sections.value[index].offsetTop,\n            duration: 1,\n            onUpdate: () => onScroll(),\n        });\n    };\n</script>\n\n<template>\n    <Transition>\n        <aside class=\"pdg-sidebar\" v-if=\"!hidden\">\n            <ul class=\"pdg-list\" :class=\"`pdg-sidebar-${currentColor}`\" id=\"container-sidebar\">\n                <li\n                    class=\"pdg-list-item\"\n                    :class=\"{ disable: initialSection }\"\n                    :aria-hidden=\"initialSection\"\n                >\n                    <button\n                        class=\"pdg-button-icon-arrow\"\n                        type=\"button\"\n                        :disable=\"initialSection\"\n                        @click=\"currentSection > 0 && scrollToSection(currentSection - 1)\"\n                        :aria-label=\"translations?.sidebar?.['aria-up-arrow']\"\n                    >\n                        <i class=\"icon-arrow-up\" />\n                    </button>\n                </li>\n                <li class=\"pdg-list-item\" v-for=\"({ id }, index) in sections\" :key=\"id\">\n                    <button\n                        class=\"pdg-button-sidebar pdg-list-button\"\n                        :aria-label=\"translations?.sidebar?.[id]\"\n                        type=\"button\"\n                        :class=\"{ active: currentSection === index }\"\n                        :data-text=\"translations?.sidebar?.[id]\"\n                        @click=\"scrollToSection(index)\"\n                    />\n                </li>\n                <li\n                    class=\"pdg-list-item\"\n                    :class=\"{ disable: nextSection }\"\n                    :aria-hidden=\"nextSection\"\n                >\n                    <button\n                        class=\"pdg-button-icon-arrow\"\n                        type=\"button\"\n                        :disable=\"nextSection\"\n                        @click=\"currentSection < sections.length - 1 && scrollToSection(currentSection + 1)\"\n                        :aria-label=\"translations?.sidebar?.['aria-down-arrow']\"\n                    >\n                        <i class=\"icon-arrow-down\" />\n                    </button>\n                </li>\n            </ul>\n        </aside>\n    </Transition>\n</template>\n\n<style scoped lang=\"scss\">\n    @import \"../scss/includes.scss\";\n\n    .pdg-sidebar {\n        position: fixed;\n        right: rem(80);\n        top: 50%;\n        transform: translateY(-50%);\n        z-index: 2;\n\n        @media screen and (max-width: calc(map-get($horizontal-breakpoints, md) - rem(0.1))) {\n            display: none;\n        }\n\n        .pdg-list {\n            list-style-type: none;\n            padding-left: 0;\n            text-align: right;\n\n            .pdg-list-item {\n                @include flex($justify-content: flex-end);\n                margin-bottom: rem(32);\n                transition: $transition;\n\n                &:first-child,\n                &:nth-last-child(-n+2) {\n                    margin-bottom: rem(24); //TODO: valutare con Nora se metterlo a 32 o lasciarlo a 24 come da layout\n                }\n\n                &:last-child {\n                    margin-bottom: 0;\n                }\n\n                .pdg-button-icon-arrow {\n                    display: inline-flex; // lo usiamo per averlo quadrato\n                    padding: rem(6);\n                    margin: rem(-6);\n                    position: relative;\n                    @include typography(20, 400, 20);\n\n                    &::before {\n                        border-radius: 100%;\n                        content: \"\";\n                        display: block;\n                        position: absolute;\n                        transform: scale(0);\n                        inset: 0;\n                        transition: transform 0.3s ease-in-out;\n                        z-index: -1;\n                    }\n\n                    &:focus,\n                    &:hover {\n                        &::before {\n                            transform: scale(1);\n                        }\n                    }\n                }\n\n                .pdg-list-button {\n                    padding: rem(16) 0;\n                    margin: rem(-16) 0;\n                    position: relative;\n                    text-transform: uppercase;\n                    transition: 0.2s;\n\n                    &::before {\n                        background-color: currentColor;\n                        bottom: rem(14);\n                        border-bottom: rem(1) solid currentColor;\n                        content: \"\";\n                        display: block;\n                        height: rem(1);\n                        position: absolute;\n                        right: 0;\n                        transition: 0.4s;\n                        width: rem(20);\n                    }\n\n                    &:after {\n                        content: attr(data-text);\n                        transition: $transition;\n                        opacity: 0;\n                        white-space: nowrap;\n                    }\n\n                    &:hover,\n                    &:focus,\n                    &.active {\n                        &::before {\n                            width: 100%;\n                            height: rem(2);\n                        }\n\n                        &:after {\n                            opacity: 1;\n                        }\n                    }\n                }\n\n                .pdg-button-icon-arrow,\n                .pdg-list-button {\n                    background: transparent;\n                    border: none;\n                    outline: none;\n                }\n            }\n\n            &.pdg-sidebar-light {\n                .pdg-button-icon-arrow,\n                .pdg-list-button {\n                    color: var(--light);\n                }\n\n                // lo inseriamo in entrambe le classi che passiamo dinamicamente perchè altrimenti non cambia\n                .pdg-button-icon-arrow::before {\n                    background: color-mix(in srgb, currentColor 20%, transparent);\n                }\n            }\n\n            &.pdg-sidebar-dark {\n                .pdg-button-icon-arrow,\n                .pdg-list-button {\n                    color: var(--dark);\n                }\n\n                .pdg-button-icon-arrow::before {\n                    background: color-mix(in srgb, currentColor 20%, transparent);\n                }\n            }\n\n            .disable {\n                visibility: hidden;\n                opacity: 0;\n            }\n        }\n    }\n</style>\n","<template>\n    <svg\n        width=\"151\"\n        height=\"153\"\n        viewBox=\"0 0 151 153\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"pdg-play-video-btn\"\n    >\n        <ellipse\n            opacity=\"0.3\"\n            cx=\"75.4004\"\n            cy=\"76.3383\"\n            rx=\"60.1294\"\n            ry=\"60.6522\"\n            fill=\"#FFC0D5\"\n            class=\"pdg-play-video-btn-bg\"\n        />\n        <path\n            d=\"M63.2473 56.663L97.6145 76.5043L63.2473 96.3456V56.663Z\"\n            stroke=\"#FFC0D5\"\n            stroke-width=\"1.07959\"\n        />\n\n        <g clip-path=\"url(#clip0_2485_113344)\" class=\"pdg-play-video-btn-text\">\n            <path\n                d=\"M77.034 6.11419C77.4082 2.30441 80.0088 -0.325016 83.6555 0.0348508C86.7264 0.337138 88.329 2.12687 88.5401 4.59796L87.1918 4.46361C86.9998 2.55871 85.6084 1.38795 83.5403 1.18642C80.3255 0.869741 78.6605 3.57594 78.4014 6.24854C78.1375 8.94514 78.9772 11.8577 82.2976 12.1839C84.7975 12.4286 86.8223 10.7973 87.091 8.10065L82.8302 7.68321L82.9454 6.51724L88.5161 7.06424L87.8683 13.657L86.9711 13.5706L86.7983 11.2483H86.7599C85.8051 12.6734 84.3752 13.5514 82.1824 13.3355C78.411 12.966 76.6549 9.94317 77.034 6.11899V6.11419Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M89.9562 11.4307L91.6692 5.20264L92.8016 5.51452L91.1558 11.5027C90.8439 12.6351 91.0982 13.7531 92.6288 14.1705C94.3178 14.6359 95.7573 13.7579 96.1123 12.4527L97.6526 6.84843L98.7849 7.16031L96.3474 16.037L95.2151 15.7251L95.5605 14.4728L95.5269 14.4632C94.8216 15.0534 93.6652 15.5236 92.0818 15.087C90.4984 14.6503 89.4188 13.4028 89.961 11.4355L89.9562 11.4307Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M98.4634 14.2858C99.2551 12.4624 100.795 12.4432 103.151 13.0142C104.648 13.3693 105.589 13.6572 106.025 12.6496C106.4 11.7907 106.088 10.9654 104.73 10.3752C103.089 9.66507 102.259 9.99135 101.635 11.1957L100.493 10.7015C101.222 9.24763 102.719 8.38395 105.171 9.44436C106.726 10.1209 107.815 11.378 106.937 13.3981L105.104 17.6205C104.811 18.3019 104.773 18.6569 105.152 18.8249C105.219 18.8537 105.286 18.8825 105.392 18.9064L105.051 19.6838C104.855 19.6358 104.658 19.5926 104.461 19.5062C103.751 19.1991 103.458 18.7337 103.852 17.6445L103.818 17.6301C102.82 18.3403 101.582 18.4314 100.205 17.8316C98.5162 17.0975 97.8492 15.6868 98.4586 14.281L98.4634 14.2858ZM100.752 16.9536C102.475 17.7021 104.01 17.2846 104.672 15.7636L105.354 14.1898C104.955 14.4297 103.972 14.2378 102.892 13.9691C101.122 13.5564 100.1 13.6044 99.6294 14.6792C99.2071 15.658 99.5238 16.4258 100.747 16.9536H100.752Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M107.11 20.9405L106.092 20.3551L110.694 12.3853L111.711 12.9706L110.771 14.5972L110.804 14.6164C111.817 13.8055 112.992 13.4601 114.115 14.1126C114.398 14.2758 114.604 14.4149 114.777 14.554L114.201 15.5521C114.062 15.4321 113.899 15.317 113.745 15.2258C112.306 14.3957 110.579 14.9379 109.686 16.4877L107.114 20.9405H107.11Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M112.819 18.8439C114.609 16.416 117.133 16.0322 118.932 17.3613C120.228 18.3161 120.525 19.5205 120.381 20.6241L120.41 20.6432L123.524 16.416L124.469 17.1118L116.816 27.5047L115.871 26.809L116.759 25.6046L116.73 25.5854C115.775 26.0029 114.494 26.094 113.203 25.1392C111.399 23.8101 111.02 21.2862 112.814 18.8487L112.819 18.8439ZM113.932 24.3955C115.358 25.4463 117.224 24.9808 118.606 23.1047C119.978 21.243 119.863 19.3237 118.443 18.2777C116.903 17.1453 115.031 17.9179 113.812 19.5732C112.579 21.243 112.397 23.2583 113.937 24.3955H113.932Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M119.422 26.6701C120.818 25.2594 122.262 25.7968 124.249 27.1739C125.515 28.0472 126.288 28.6518 127.06 27.8696C127.722 27.2027 127.727 26.3198 126.676 25.2834C125.405 24.0263 124.512 24.0359 123.495 24.9331L122.608 24.0599C123.812 22.9659 125.52 22.702 127.42 24.5781C128.629 25.768 129.186 27.337 127.641 28.9013L124.407 32.1784C123.889 32.7062 123.726 33.0229 124.018 33.3156C124.071 33.3684 124.119 33.4164 124.21 33.4788L123.615 34.0833C123.447 33.9682 123.284 33.8578 123.126 33.7043C122.574 33.1573 122.468 32.6247 123.226 31.7514L123.202 31.7274C122.017 32.0297 120.827 31.665 119.762 30.6142C118.452 29.3187 118.342 27.7641 119.417 26.6749L119.422 26.6701ZM120.592 29.9809C121.926 31.3004 123.51 31.4683 124.68 30.2879L125.885 29.0692C125.424 29.1508 124.58 28.6182 123.668 27.9704C122.171 26.9484 121.197 26.6221 120.372 27.457C119.623 28.2151 119.642 29.0452 120.592 29.9809Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M134.124 32.5955L134.824 33.5359L127.435 39.0251L126.734 38.0846L134.124 32.5955ZM136.71 30.4507L137.612 31.6694L136.393 32.5715L135.491 31.3527L136.71 30.4507Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M139.325 33.5073L139.977 34.4814L129.244 41.6499L128.591 40.6759L139.325 33.5073Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M139.929 41.3525L140.491 42.5232L134.459 48.4778L134.469 48.4922L142.88 47.499L143.427 48.6409L133.668 49.5766L133.092 48.3722L139.934 41.3477L139.929 41.3525Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M143.998 50.3727L144.411 51.4715L135.789 54.7007L135.376 53.6019L143.998 50.3727ZM147.079 49.0244L147.611 50.4447L146.191 50.9773L145.659 49.557L147.079 49.0244Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M140.841 54.7778C143.754 54.0101 145.961 55.296 146.532 57.46C146.94 59.0146 146.417 60.1422 145.611 60.9147L145.62 60.9483L150.701 59.6096L150.999 60.742L138.519 64.0288L138.221 62.8964L139.67 62.5125L139.661 62.479C138.653 62.2007 137.602 61.4713 137.194 59.9167C136.623 57.7527 137.909 55.5455 140.841 54.773V54.7778ZM138.226 59.7968C138.677 61.5049 140.419 62.3158 142.674 61.7256C144.91 61.1355 146.028 59.5712 145.577 57.8631C145.088 56.011 143.149 55.44 141.158 55.9678C139.152 56.4956 137.741 57.9494 138.231 59.8015L138.226 59.7968Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M143.345 64.7629C146.272 64.4414 148.345 65.9576 148.633 68.5967C148.921 71.2357 147.237 72.9247 144.689 73.2029C144.439 73.2317 144.185 73.2557 144.041 73.2557L143.249 66.0056C141.402 66.2263 139.771 67.4019 140.006 69.5563C140.212 71.442 141.584 72.037 142.357 72.1329L142.486 73.3181C140.769 73.0542 139.248 71.9458 138.998 69.6523C138.691 66.8549 140.567 65.07 143.35 64.7629H143.345ZM144.929 71.9266C146.56 71.7491 147.827 70.5399 147.621 68.6542C147.424 66.8789 145.984 65.7993 144.267 65.8953L144.924 71.9266H144.929Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M144.315 74.6138C147.184 74.7194 149.109 76.4516 149.008 79.2105C148.907 81.9695 146.863 83.5577 143.994 83.4522C141.144 83.3466 139.219 81.6144 139.32 78.8555C139.421 76.0965 141.465 74.5083 144.315 74.6138ZM140.347 78.8938C140.27 81.0386 141.926 82.147 144.037 82.2238C146.167 82.3006 147.899 81.3169 147.976 79.1721C148.053 77.0273 146.398 75.919 144.267 75.8374C142.156 75.7606 140.424 76.7442 140.342 78.8938H140.347Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M144.185 89.4301L138.557 106.584L137.444 106.219L143.072 89.0654L144.185 89.4301Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M136.364 112.582C139.473 114.813 140.452 118.373 138.317 121.353C136.518 123.863 134.166 124.352 131.926 123.301L132.713 122.202C134.459 122.989 136.167 122.37 137.376 120.681C139.257 118.057 137.751 115.264 135.563 113.7C133.36 112.121 130.424 111.392 128.476 114.108C127.012 116.147 127.415 118.719 129.613 120.297L132.103 116.819L133.058 117.5L129.8 122.049L124.417 118.191L124.944 117.457L127.041 118.469L127.06 118.441C126.302 116.896 126.259 115.221 127.54 113.431C129.747 110.351 133.24 110.341 136.364 112.582Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M125.309 121.104L129.858 125.695L129.023 126.521L124.652 122.106C123.827 121.272 122.728 120.936 121.6 122.054C120.358 123.287 120.401 124.971 121.351 125.931L125.439 130.062L124.604 130.887L118.126 124.347L118.961 123.522L119.878 124.443L119.902 124.419C119.739 123.512 119.911 122.274 121.077 121.118C122.243 119.962 123.865 119.65 125.305 121.099L125.309 121.104Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M118.577 127.068C119.763 128.661 119.014 130.009 117.349 131.765C116.293 132.888 115.578 133.56 116.236 134.443C116.797 135.196 117.666 135.335 118.856 134.452C120.29 133.382 120.415 132.499 119.681 131.362L120.679 130.619C121.576 131.976 121.586 133.704 119.441 135.302C118.078 136.314 116.447 136.631 115.132 134.865L112.378 131.175C111.937 130.58 111.644 130.374 111.313 130.619C111.255 130.662 111.198 130.705 111.121 130.782L110.612 130.1C110.751 129.952 110.886 129.803 111.063 129.678C111.687 129.213 112.229 129.189 112.978 130.072L113.007 130.052C112.887 128.834 113.424 127.716 114.628 126.818C116.106 125.72 117.661 125.84 118.577 127.073V127.068ZM115.127 127.725C113.621 128.848 113.218 130.388 114.211 131.722L115.238 133.099C115.228 132.634 115.881 131.876 116.653 131.074C117.891 129.745 118.361 128.834 117.661 127.893C117.023 127.039 116.202 126.934 115.132 127.73L115.127 127.725Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M108.511 131.257L109.523 130.667L114.158 138.622L113.146 139.212L112.2 137.59L112.172 137.61C112.373 138.891 112.085 140.081 110.963 140.738C110.684 140.901 110.454 141.011 110.248 141.093L109.667 140.095C109.84 140.037 110.022 139.951 110.176 139.86C111.61 139.025 111.999 137.254 111.097 135.709L108.506 131.266L108.511 131.257Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M107.493 137.259C108.712 140.018 107.786 142.398 105.737 143.3C104.269 143.948 103.07 143.607 102.182 142.935L102.148 142.95L104.269 147.758L103.194 148.233L97.9834 136.424L99.0582 135.949L99.6628 137.321L99.6964 137.307C99.8115 136.271 100.368 135.119 101.836 134.467C103.885 133.564 106.265 134.486 107.489 137.264L107.493 137.259ZM102.124 135.465C100.507 136.18 99.9795 138.027 100.92 140.157C101.851 142.273 103.573 143.132 105.19 142.417C106.942 141.645 107.201 139.639 106.371 137.753C105.531 135.853 103.876 134.692 102.124 135.465Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M97.4221 139.092C97.9499 141.006 96.7648 141.99 94.5768 143.026C93.1853 143.693 92.2784 144.053 92.5711 145.118C92.8206 146.02 93.5787 146.467 95.0086 146.073C96.7312 145.598 97.1726 144.821 96.8991 143.492L98.0987 143.161C98.4441 144.749 97.8252 146.366 95.2485 147.076C93.6123 147.527 91.9761 147.229 91.3908 145.109L90.1624 140.67C89.9657 139.955 89.769 139.653 89.3707 139.768C89.3035 139.787 89.2316 139.807 89.1308 139.855L88.9053 139.039C89.0876 138.952 89.2699 138.861 89.4763 138.804C90.2248 138.597 90.743 138.77 91.1173 139.864L91.1508 139.855C91.4819 138.679 92.3888 137.83 93.833 137.427C95.6084 136.937 97.0143 137.614 97.4221 139.092ZM93.9674 138.453C92.1585 138.952 91.2228 140.243 91.6642 141.841L92.1201 143.492C92.2784 143.055 93.1613 142.585 94.1737 142.119C95.8099 141.328 96.5776 140.651 96.2657 139.519C95.9826 138.492 95.2533 138.094 93.9674 138.449V138.453Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M84.9418 148.87L83.7758 149.005L82.7202 139.859L83.8862 139.725L84.9418 148.87ZM85.508 152.186L84.0013 152.359L83.8286 150.852L85.3352 150.679L85.508 152.186Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M81.5592 152.92L80.3884 152.997L79.5439 140.119L80.7147 140.042L81.5592 152.92Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M74.4769 149.523L73.1813 149.427L71.0173 141.232H70.9981L67.6682 149.019L66.4062 148.928L70.4512 139.994L71.7851 140.094L74.4721 149.528L74.4769 149.523Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M64.2617 151.903L62.7646 151.658L63.0094 150.161L64.5064 150.406L64.2617 151.903ZM64.6264 148.559L63.47 148.372L64.9574 139.289L66.1138 139.476L64.6264 148.559Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M62.3802 143.631C61.5981 146.544 59.3861 147.815 57.2221 147.235C55.6723 146.817 54.9525 145.8 54.6838 144.72L54.6503 144.711L53.2828 149.783L52.1504 149.476L55.5043 137.01L56.6367 137.317L56.2481 138.766L56.2817 138.776C57.0206 138.041 58.1769 137.49 59.7316 137.907C61.8908 138.488 63.1671 140.7 62.3802 143.631ZM59.3237 138.867C57.6156 138.406 56.0465 139.519 55.442 141.765C54.8422 143.996 55.6435 145.743 57.3517 146.203C59.199 146.702 60.6624 145.301 61.195 143.31C61.7324 141.304 61.1758 139.361 59.3285 138.862L59.3237 138.867Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M52.4721 140.839C51.2918 143.535 48.9455 144.576 46.5176 143.516C44.0849 142.456 43.4563 140.152 44.4831 137.801C44.5839 137.571 44.6846 137.341 44.7614 137.211L51.4453 140.128C52.1747 138.415 51.9635 136.415 49.9819 135.551C48.2449 134.793 47.0454 135.685 46.5799 136.309L45.4859 135.834C46.5703 134.476 48.2833 133.708 50.4041 134.634C52.9856 135.762 53.5997 138.276 52.4817 140.839H52.4721ZM45.4715 138.646C44.8142 140.152 45.2316 141.851 46.9686 142.609C48.6048 143.324 50.2602 142.609 51.0279 141.074L45.4715 138.646Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M43.442 136.775C41.9162 139.208 39.4595 140.009 37.1179 138.541C34.7764 137.072 34.4261 134.51 35.9472 132.077C37.4634 129.659 39.9249 128.858 42.2616 130.326C44.6032 131.794 44.9534 134.357 43.442 136.775ZM41.7194 131.199C39.9009 130.057 38.1112 130.94 36.9884 132.73C35.856 134.534 35.8416 136.53 37.6649 137.667C39.4835 138.809 41.2732 137.926 42.4056 136.122C43.5284 134.333 43.5428 132.341 41.7194 131.199Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M30.6691 129.246L18.6016 115.82L19.4748 115.038L31.5424 128.468L30.6691 129.25V129.246Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M14.4944 110.955C11.0157 112.548 7.4362 111.622 5.91516 108.292C4.63404 105.485 5.37296 103.201 7.40261 101.776L7.964 103.009C6.41418 104.137 6.10229 105.927 6.96597 107.812C8.30947 110.749 11.4811 110.831 13.9282 109.713C16.3897 108.585 18.4865 106.397 17.0998 103.36C16.0586 101.081 13.6259 100.145 11.1644 101.272L12.9445 105.164L11.8793 105.653L9.55221 100.567L15.574 97.813L15.9482 98.6335L14.0289 99.9482L14.0433 99.9818C15.7611 100.092 17.2342 100.884 18.1506 102.885C19.7244 106.33 17.9971 109.367 14.4992 110.965L14.4944 110.955Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M12.5896 97.1125L6.34233 98.7631L6.04484 97.6307L12.0474 96.0473C13.1846 95.7498 14.0195 94.9677 13.6164 93.4323C13.1702 91.7385 11.6875 90.9372 10.3776 91.2827L4.75892 92.7653L4.46143 91.6329L13.3621 89.2866L13.6596 90.419L12.4025 90.7501L12.4121 90.7837C13.2805 91.0955 14.2642 91.8633 14.6864 93.4515C15.1039 95.0397 14.5665 96.5991 12.5944 97.1221L12.5896 97.1125Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M10.7855 88.3218C8.81341 88.5522 8.0217 87.2278 7.33076 84.9103C6.88453 83.4373 6.66381 82.4824 5.56982 82.6072C4.63896 82.7175 4.08237 83.3989 4.2551 84.8719C4.46143 86.6473 5.16677 87.1991 6.51986 87.1319L6.66381 88.3698C5.04201 88.4706 3.54017 87.6117 3.22829 84.9583C3.03156 83.2741 3.57376 81.7003 5.76174 81.4412L10.3344 80.9038C11.0686 80.8174 11.3996 80.6687 11.3469 80.256C11.3373 80.1841 11.3277 80.1121 11.2989 80.0065L12.1434 79.9058C12.201 80.0977 12.2633 80.2896 12.2873 80.5055C12.3785 81.2781 12.1242 81.7627 10.987 81.969V82.0074C12.105 82.5112 12.8055 83.538 12.9831 85.0255C13.199 86.8536 12.3113 88.1395 10.7903 88.3218H10.7855ZM11.9418 85.0063C11.7211 83.1398 10.5888 82.0218 8.94296 82.2137L7.2396 82.4152C7.64744 82.6407 7.97852 83.5812 8.28561 84.656C8.81821 86.3929 9.3748 87.2566 10.5408 87.1175C11.5964 86.9927 12.1002 86.3354 11.9466 85.0063H11.9418Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M12.1964 77.5308L12.2156 78.7016L3.01259 78.8503L2.9934 77.6748L4.8695 77.646V77.6076C3.65076 77.1566 2.75349 76.3265 2.7343 75.0261C2.7295 74.6999 2.74389 74.4504 2.77748 74.2296L3.93385 74.2104C3.90026 74.3928 3.88587 74.5895 3.89067 74.7718C3.91946 76.432 5.27256 77.6364 7.05749 77.6076L12.2012 77.526L12.1964 77.5308Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M7.49864 73.6252C4.49975 73.3085 2.89715 71.322 3.13226 69.0957C3.3002 67.4979 4.19267 66.6294 5.21948 66.1928V66.1592L-0.000976562 65.6074L0.123777 64.4414L12.959 65.8041L12.8343 66.9701L11.342 66.8117V66.8501C12.1817 67.4643 12.9014 68.5247 12.7335 70.1225C12.4984 72.3489 10.5119 73.9515 7.49384 73.6348L7.49864 73.6252ZM11.7307 69.8634C11.9178 68.1024 10.5743 66.7254 8.25675 66.4806C5.95841 66.2359 4.3558 67.3011 4.16867 69.0621C3.96715 70.967 5.57935 72.1905 7.62819 72.4064C9.69142 72.6272 11.5243 71.7683 11.7259 69.8634H11.7307Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M10.9198 63.9663C8.9957 63.4721 8.73659 61.9511 8.92372 59.5424C9.03888 58.0069 9.17323 57.0377 8.10803 56.7642C7.20116 56.5291 6.43345 56.9705 6.06878 58.4004C5.62735 60.1326 6.07838 60.9003 7.3691 61.3225L7.06202 62.5269C5.51219 62.0374 4.4182 60.6939 5.08515 58.1077C5.50739 56.4667 6.5774 55.1904 8.7126 55.7374L13.1701 56.8794C13.8851 57.0617 14.2449 57.0425 14.3505 56.6395C14.3697 56.5675 14.3841 56.5003 14.3937 56.3899L15.2142 56.6011C15.1998 56.8026 15.1854 57.0041 15.1326 57.2152C14.9407 57.9686 14.5328 58.3284 13.3957 58.1125L13.3861 58.1461C14.2449 59.0194 14.528 60.2285 14.1586 61.6776C13.7027 63.4625 12.412 64.3406 10.9294 63.9615L10.9198 63.9663ZM13.1893 61.2889C13.6548 59.4704 13.0022 58.0165 11.3948 57.6039L9.73462 57.1769C10.0321 57.5319 10.0033 58.53 9.90256 59.6431C9.77301 61.4569 9.98413 62.4597 11.1213 62.7476C12.1529 63.0115 12.8583 62.5796 13.1893 61.2841V61.2889Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M5.4834 47.1293L6.08318 45.7378L7.47466 46.3376L6.87488 47.7291L5.4834 47.1293ZM8.64063 48.2904L9.10125 47.2108L17.5605 50.8431L17.0999 51.9227L8.64063 48.2904Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M6.8125 43.3388L7.33071 42.2832L18.9184 47.9643L18.4002 49.0199L6.8125 43.3388Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M13.3045 38.8665L14.0338 37.7917L22.21 40.0181L22.2196 40.0037L17.1383 33.2286L17.8484 32.1826L23.5583 40.1525L22.805 41.256L13.2949 38.8665H13.3045Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M16.3423 28.8382L17.3019 27.6626L18.4775 28.6222L17.5178 29.7978L16.3423 28.8382ZM19.0581 30.8246L19.8018 29.9178L26.932 35.7476L26.1882 36.6545L19.0581 30.8246Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M24.4508 31.3387C22.3204 29.2083 22.3156 26.6556 23.899 25.0722C25.0362 23.9351 26.2742 23.8199 27.3442 24.127L27.3682 24.103L23.6543 20.3892L24.4844 19.5591L33.6154 28.6853L32.7853 29.5154L31.7249 28.455L31.7009 28.479C31.9696 29.4866 31.8689 30.7629 30.7317 31.9001C29.1483 33.4835 26.5956 33.4835 24.4508 31.3387ZM30.1079 31.07C31.3603 29.8177 31.1779 27.9032 29.5322 26.2574C27.896 24.626 25.9815 24.4437 24.7339 25.696C23.3808 27.0491 23.8655 29.0164 25.3241 30.4702C26.7924 31.9385 28.7596 32.4231 30.1127 31.07H30.1079Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M31.8162 24.141C30.0648 21.7803 30.3239 19.2229 32.4543 17.6443C34.5847 16.0656 36.8975 16.6654 38.4233 18.7239C38.572 18.9254 38.7256 19.1317 38.7976 19.2565L32.9389 23.6036C34.0617 25.0863 35.8994 25.902 37.6412 24.6113C39.1622 23.4837 38.9847 21.9962 38.6776 21.2813L39.6324 20.5712C40.2706 22.1882 40.0835 24.0595 38.2266 25.4318C35.9666 27.1111 33.4763 26.3914 31.8114 24.1458L31.8162 24.141ZM37.1998 19.1605C36.2209 17.841 34.5367 17.3612 33.0157 18.4887C31.581 19.5539 31.3795 21.3437 32.3296 22.7735L37.1998 19.1605Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M39.829 18.3302C38.4759 15.8016 39.0037 13.2633 41.4364 11.963C43.8739 10.6579 46.273 11.6271 47.6261 14.1606C48.9696 16.6749 48.4418 19.2083 46.0091 20.5134C43.5764 21.8185 41.1725 20.8493 39.829 18.335V18.3302ZM45.5245 19.6018C47.4198 18.5893 47.5398 16.5981 46.5465 14.7364C45.5437 12.8603 43.8164 11.8574 41.9259 12.8699C40.0306 13.8823 39.9106 15.8736 40.9134 17.7497C41.9115 19.6114 43.634 20.6142 45.5293 19.6018H45.5245Z\"\n                fill=\"#FFC0D5\"\n            />\n            <path\n                d=\"M52.7026 10.9842L70.3601 7.23682L70.6048 8.38359L52.9473 12.131L52.7026 10.9842Z\"\n                fill=\"#FFC0D5\"\n            />\n        </g>\n        <defs>\n            <clipPath id=\"clip0_2485_113344\">\n                <rect width=\"151\" height=\"152.999\" fill=\"white\" />\n            </clipPath>\n        </defs>\n    </svg>\n</template>\n\n<style scoped lang=\"scss\">\n    @import \"../../scss/includes.scss\";\n\n    .pdg-play-video-btn {\n        width: rem(100);\n        height: rem(100);\n        position: absolute;\n        top: rem(-50);\n        right: rem(24);\n\n        opacity: 0;\n        visibility: hidden;\n\n        @media screen and (min-width: map-get($breakpoints, md)) {\n            width: rem(152);\n            height: rem(152);\n\n            right: rem(80);\n            bottom: rem(80);\n\n            &:hover {\n                cursor: none;\n            }\n        }\n\n        @media screen and (min-width: map-get($horizontal-breakpoints, xxs)) and (max-height: map-get($horizontal-breakpoints, xs)) and ((orientation: landscape)) {\n            top: auto;\n            right: rem(map-get($gutter-container, xs));\n\n            @media screen and (max-width: map-get($horizontal-breakpoints, xs)) {\n                width: rem(80);\n                height: rem(80);\n            }\n        }\n\n        .pdg-play-video-btn-bg {\n            transform-origin: center;\n\n            animation: play-video-btn-bg-scale infinite alternate 4s;\n\n            @keyframes play-video-btn-bg-scale {\n                from {\n                    transform: scale(1);\n                }\n\n                to {\n                    transform: scale(0.8);\n                }\n            }\n        }\n\n        .pdg-play-video-btn-text {\n            transform-origin: center;\n\n            animation: play-video-btn-text-rotation infinite 8s;\n\n            @keyframes play-video-btn-text-rotation {\n                0% {\n                    transform: rotate(0);\n                }\n\n                50% {\n                    transform: rotate(90deg);\n                }\n\n                100% {\n                    transform: rotate(0);\n                }\n            }\n        }\n    }\n</style>\n","export default \"__VITE_PUBLIC_ASSET__4e4b6e49__\"","export default \"__VITE_PUBLIC_ASSET__c8a08ef5__\"","<script setup lang=\"ts\">\n    import gsap from \"gsap\";\n    import { ScrollTrigger } from \"gsap/all\";\n    import { textAnimation } from \"../utils/animations.utils\";\n\n    const globalState = useGlobalState();\n    const props = defineProps([\"loaderIsActive\"]);\n    const { locale } = useI18n();\n\n    //VIDEO CONTAINER\n    let videoContainer: HTMLDivElement;\n\n    const { data: translations } = await useAsyncData('translations', async () => {\n        const res = await $fetch<any>(`/api/translations?lang=${locale.value}&mode=${globalState.value.mode}`)\n        return res\n    }, { watch: [locale, globalState] })\n\n    watchEffect(() => {\n        if (process.client) {\n            const htmlPage = document.querySelector(\"html\") as HTMLHtmlElement;\n            if ( htmlPage && !props.loaderIsActive) {\n                htmlPage.classList.add(\"page-scroll\");\n            }\n        }\n    })\n\n    onMounted(() => {\n        if (process.client) {\n\n            //HEADER CONTAINERS\n            const headerContainer = document.querySelector(\n                \".pdg-header-container\"\n            ) as HTMLElement;\n\n            //MODAL CONTAINER\n            const modalContainer = document.querySelector(\n                \".pdg-modal-container\"\n            ) as HTMLElement;\n\n            //VIDEO CONTAINER\n            videoContainer = document.querySelector(\n                \".pdg-video-container\"\n            ) as HTMLDivElement;\n\n            //PLAY VIDEO BUTTON\n            const playVideoBtn = document.querySelector(\n                \".pdg-header-video-container .pdg-play-video-btn\"\n            ) as HTMLElement;\n\n            const htmlPage = document.querySelector(\"html\") as HTMLHtmlElement;\n            if (htmlPage) {\n                htmlPage.classList.add(\"page-scroll\");\n            }\n\n            let mousePosition = { clientX: 0, clientY: 0 };\n\n            const handleMouseMove = ({ clientX, clientY }: Partial<MouseEvent>) => {\n                if (clientX && clientX >= 0 && clientY && clientY >= 0) {\n                    mousePosition.clientX = clientX;\n                    mousePosition.clientY = clientY;\n\n                    playVideoBtn.style.left = `${\n                        clientX -\n                        modalContainer.offsetLeft -\n                        playVideoBtn.clientWidth / 2\n                    }px`;\n\n                    playVideoBtn.style.top = `${\n                        clientY -\n                        modalContainer.offsetTop -\n                        playVideoBtn.clientHeight / 2 -\n                        (Math.ceil(modalContainer.getBoundingClientRect().y) -\n                            modalContainer.offsetTop)\n                    }px`;\n\n                    if (playVideoBtn.style.opacity === \"0\" || !playVideoBtn.style.opacity) {\n                        gsap.to(\n                            playVideoBtn,\n                            {\n                                visibility: \"visible\",\n                                opacity: 1,\n                            }\n                        );\n                    }\n                }\n            };\n\n\n            if (headerContainer && modalContainer && videoContainer) {\n                //CLOSE MODAL ON keydown\n                window.addEventListener(\"keydown\", handleCloseModal);\n\n                //VIDEO DESCRIPTION\n                const videoDescription = videoContainer.querySelector(\n                    \".pdg-video-description\"\n                ) as HTMLParagraphElement;\n\n                //GSAP BREAKPOINTS\n                const mm = gsap.matchMedia();\n                const breakPoint = 1024;\n                const smBreakpoint = 768;\n\n                const mobileMiniBreakPoint = 375;\n                const mobileVerticalBreakPoint = 632;\n                const mobileHorizontalBreakPoint = 700;\n\n                mm.add(\n                    {\n                        isHover: '(hover: hover)',\n                        isDesktop: `(min-width: ${breakPoint}px) and (min-height: ${mobileHorizontalBreakPoint + 0.1}px)`,\n                        isTablet: `(min-width: ${smBreakpoint}px)`,\n                        isMobile: `(max-width: ${breakPoint - 0.1}px)`,\n                        isMobileHorizontal: `(min-width: ${mobileMiniBreakPoint}px) and (max-height: ${mobileHorizontalBreakPoint}px) and (orientation: landscape)`,\n                        isMobileMini: `(max-width: ${mobileHorizontalBreakPoint}px) and (max-height: ${mobileHorizontalBreakPoint}px)`,\n                        isMobileMiniVertical: `(max-width: ${mobileVerticalBreakPoint}px) and (max-height: ${mobileVerticalBreakPoint}px) and (orientation: portrait)`,\n                    },\n                    ({ conditions }) => {\n\n                        //START ANIMATION\n                        const startAnimation = gsap.timeline();\n\n                        //ANIMATION DELAY\n                        animationDelay(startAnimation, headerContainer);\n\n                        textAnimation({\n                            tl: startAnimation,\n                            split: true,\n                            container: \".pdg-header-content\",\n                            elements: [\".pdg-title-h1\", \".pdg-subhead-2\"],\n                            from: { yPercent: 100},\n                            to: {\n                                yPercent: 0,\n                                opacity: 1,\n                                delay: 0.1,\n                            },\n                            keyframe: \"entry\",\n                        });\n\n                        startAnimation.to(\n                            videoContainer,\n                            {\n                                opacity: 1,\n                                delay: 0.1,\n                            },\n                            \"entry\"\n                        );\n\n                        // IS DESKTOP\n                        const {\n                            isHover,\n                            isDesktop,\n                            isTablet,\n                            isMobileHorizontal,\n                            isMobileMini,\n                            isMobileMiniVertical,\n                        } = conditions as gsap.Conditions;\n\n                        //MAIN TIMELINE\n                        let tl = gsap.timeline();\n\n                        textAnimation({\n                            tl: tl,\n                            container: \".pdg-header-content\",\n                            elements: [\".pdg-title-h1\", \".pdg-subhead-2\"],\n                            from: { yPercent: 0 },\n                            to: { yPercent: 100 },\n                            keyframe: \"open\",\n                        });\n\n                        const duration = isMobileMiniVertical ? 4 : 1;\n\n                        tl.fromTo(\n                            videoContainer,\n                            {\n                                yPercent: 0,\n                            },\n                            {\n                                yPercent:\n                                    isMobileHorizontal || isMobileMiniVertical\n                                        ? -100\n                                        : isDesktop\n                                        ? -50\n                                        : -48,\n                                paddingBottom: \"80px\",\n                                height: \"100vh\",\n                                duration,\n                            },\n                            \n                            \"open\"\n                        );\n                        if (playVideoBtn) {\n                            videoContainer.removeEventListener(\"mousemove\", handleMouseMove);\n                            window.removeEventListener(\"scroll\", () => \n                                handleMouseMove(mousePosition)\n                            );\n                        }\n\n\n                        if (isHover || isDesktop) {\n                            if (playVideoBtn) {\n                                videoContainer.addEventListener(\"mousemove\", handleMouseMove);\n\n                                window.addEventListener(\"scroll\", () => {\n                                    if (videoContainer.getBoundingClientRect().bottom >= 0) {\n                                        handleMouseMove({\n                                            clientX: mousePosition.clientX,\n                                            clientY: mousePosition.clientY,\n                                        })\n                                    }\n                                }\n                                );\n                            }\n\n                        }\n\n                        if (isDesktop) {\n                            modalContainer.style.height = \"calc(100%)\";\n\n                                tl\n                                //OPEN\n                                .to(\n                                    \".pdg-modal-container\",\n                                    {\n                                        height: \"auto\",\n                                        yPercent: 50,\n                                    },\n                                    \"open\"\n                                )\n                                .to(\n                                    \".pdg-arrow-container\",\n                                    {\n                                        yPercent: 200,\n                                    },\n                                    \"open\"\n                                )\n                                //START\n                                .to(\n                                    \".pdg-arrow-container .pdg-arrow-svg\",\n                                    {\n                                        yPercent: 50,\n                                        opacity: 0,\n                                    },\n                                    \"start\"\n                                )\n                                .to(\n                                    \".pdg-arrow-container .pdg-arrow-description\",\n                                    {\n                                        yPercent: -50,\n                                        opacity: 0,\n                                    },\n                                    \"start\"\n                                )\n                                //SHOW\n                                .to(\n                                    \".pdg-arrow-container\",\n                                    {\n                                        width: 0,\n                                        height: 0,\n                                    },\n                                    \"show\"\n                                )\n                                .to(\n                                    \".pdg-modal-container\",\n                                    {\n                                        yPercent: 0,\n                                        overflow: \"initial\",\n                                    },\n                                    \"show\"\n                                )\n                                .to(\n                                    \".pdg-modal-container .pdg-header-video-container\",\n                                    {\n                                        margin: 0,\n                                    },\n                                    \"show\"\n                                )\n                                //END\n                                .fromTo(\n                                    \".pdg-modal-container .pdg-video-description\",\n                                    { yPercent: 100 },\n                                    {\n                                        height: \"auto\",\n                                        marginTop: \"1rem\",\n                                        yPercent: 0,\n                                        opacity: 1,\n                                    },\n                                    \"end\"\n                                )\n                        } else if (isMobileHorizontal) {\n                            videoDescription && (videoDescription.style.height = \"auto\");\n\n                            isMobileMini &&\n                                tl.to(\".pdg-modal-container .pdg-video-description\", {\n                                    marginTop: \"1rem\",\n                                });\n\n                            tl\n                                //OPEN\n                                .fromTo(\n                                    \".pdg-video-container .pdg-fade-in\",\n                                    {\n                                        opacity: 0,\n                                    },\n                                    {\n                                        opacity: 1,\n                                        stagger: -0.1,\n                                    }\n                                )\n                            if (playVideoBtn) {\n                                tl.to(\n                                    playVideoBtn,\n                                    {\n                                        visibility: \"visible\",\n                                        opacity: 1,\n                                    },\n                                    \"end\"\n                                );\n                            }\n                        } else {\n                            modalContainer.style.height = \"auto\";\n\n                            const delay = +!!isMobileMiniVertical * 3;\n\n                            tl\n                                //OPEN\n                                .to(\n                                    \".pdg-arrow-container\",\n                                    {\n                                        y: 150,\n                                        height: 0,\n                                        margin: 0,\n                                        opacity: 0,\n                                        duration,\n                                        delay,\n                                    },\n                                    isMobileMiniVertical ? \"hide-arrow\" : \"open\"\n                                )\n                                .to(\n                                    \".pdg-arrow-container .pdg-arrow-svg\",\n                                    {\n                                        yPercent: 100,\n                                        opacity: 0,\n                                        duration,\n                                        delay,\n                                    },\n                                    isMobileMiniVertical ? \"hide-arrow\" : \"open\"\n                                )\n                                // .to(\n                                //     videoContainer,\n                                //     {\n                                //         paddingRight: \"1rem\",\n                                //         duration,\n                                //     },\n                                //     isMobileMiniVertical ? \"hide-arrow\" : \"open\"\n                                // );\n\n                            //IMAGE MASK CUT ONLY IN NORMAL MOBILE\n                            !isMobileMiniVertical &&\n                                tl.fromTo(\n                                    \".pdg-modal-container\",\n                                    { maxHeight: `${isTablet ? 36 : 26}vh` },\n                                    {\n                                        maxHeight: \"100vh\",\n                                    },\n                                    isMobileMiniVertical ? \"hide-arrow\" : \"open\"\n                                );\n\n                            tl\n                                //SHOW\n                                .fromTo(\n                                    \".pdg-modal-container\",\n                                    { width: `${isTablet ? 75 : 83.33333333}%` },\n                                    {\n                                        width: \"100%\",\n                                        duration,\n                                    },\n                                    isMobileMiniVertical ? \"show-paragraph\" : \"show\"\n                                )\n                                .to(\n                                    \".pdg-modal-container .pdg-header-video-container\",\n                                    {\n                                        margin: 0,\n                                        overflow: isHover ? \"hidden\" : \"initial\",\n                                        duration,\n                                    },\n                                    isMobileMiniVertical ? \"show-paragraph\" : \"show\"\n                                )\n                                .to(\n                                    \".pdg-modal-container .pdg-video-description\",\n                                    {\n                                        marginTop: \"1rem\",\n                                        duration,\n                                    },\n                                    isMobileMiniVertical ? \"show-paragraph\" : \"show\"\n                                )\n                            if (playVideoBtn) {\n                                \n                                tl.to(\n                                    playVideoBtn,\n                                    {\n                                        visibility: \"visible\",\n                                        opacity: \"1\",\n                                        duration,\n                                    },\n                                    isMobileMiniVertical ? \"show-paragraph\" : \"show\"\n                                )\n                            }\n                                tl.fromTo(\n                                    \".pdg-modal-container .pdg-video-description\",\n                                    { yPercent: 50 },\n                                    {\n                                        height: \"auto\",\n                                        yPercent: 0,\n                                        opacity: 1,\n                                        duration,\n                                    }\n                                );\n                        }\n                        \n                            ScrollTrigger.create({\n                                animation: tl,\n                                trigger: \".pdg-header-container\",\n                                start: \"top top\",\n                                end: \"center\",\n                                preventOverlaps: true,\n                                pin: true,\n                                scrub: 1,\n                                anticipatePin: 1,\n                                invalidateOnRefresh: true,\n                                snap: isMobileMiniVertical ? 0 : 1,\n                                id: \"HEADER\",\n                            });\n                    }\n                );\n            }\n        }\n    });\n\n    onUnmounted(() => {\n        window.removeEventListener(\"keydown\", handleCloseModal);\n    });\n\n    const autoScroll = () =>\n        window.scrollTo({\n            top: videoContainer?.offsetTop,\n            behavior: \"smooth\",\n        });\n\n    const modalIsOpen = ref(false);\n\n    const toggleModal = () => {\n        //INVERT MODAL IS OPEN\n        modalIsOpen.value = !modalIsOpen.value;\n\n        //GET VIDEO\n        const modalVideo = document.querySelector(\".pdg-modal-video\") as HTMLVideoElement;\n\n        //SET VIDEO CURRENT TIME TO 0\n        modalIsOpen.value && (modalVideo.currentTime = 0);\n\n        //VIDEO PLAY PAUSE\n        modalVideo?.[modalIsOpen.value ? \"play\" : \"pause\"]();\n\n        //ADD / REMOVE \"scroll-block\" CLASS\n        document\n            .querySelector(\"html, body\")\n            ?.classList.toggle(\"scroll-block\", modalIsOpen.value);\n\n        blockScroll();\n    };\n\n    const handleCloseModal = ({ key }: { key: string }) =>\n        key === \"Escape\" && modalIsOpen.value && toggleModal();\n\n    const handleBackdropCloseModal = ({ target }: Event) =>\n        (target as HTMLElement).className.includes(\"pdg-modal-video-container\") &&\n        modalIsOpen.value &&\n        toggleModal();\n</script>\n\n<template>\n    <!-- HEADER SECTION CONTAINER -->\n    <section class=\"pdg-header-section-container\" id=\"we-are-rebranding\">\n        <Transition>\n            <!-- MODAL VIDEO CONTAINER -->\n            <div\n                class=\"pdg-modal-video-container pdg-container\"\n                @click=\"handleBackdropCloseModal\"\n                role=\"button\"\n                tabindex=\"0\"\n                :aria-pressed=\"modalIsOpen\"\n                :aria-hidden=\"!modalIsOpen\"\n                v-show=\"modalIsOpen\"\n            >\n                <!-- MODAL VIDEO CLOSE BUTTON (SOSTITUIRE CON ICONA FONT) -->\n                <button\n                    class=\"pdg-modal-close-btn\"\n                    @click=\"toggleModal\"\n                    :tabindex=\"modalIsOpen ? 0 : -1\"\n                >\n                    <span class=\"pdg-button\">\n                        {{ translations?.header?.modal?.['close-btn'] }}\n                    </span>\n\n                    <svg\n                        width=\"32\"\n                        height=\"37\"\n                        viewBox=\"0 0 32 37\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                        <path\n                            fill-rule=\"evenodd\"\n                            clip-rule=\"evenodd\"\n                            d=\"M3.62586 23.5663C3.04008 22.9805 3.04008 22.0307 3.62586 21.4449L24.132 0.938851C24.7177 0.353065 25.6675 0.353065 26.2533 0.938851C26.8391 1.52464 26.8391 2.47439 26.2533 3.06017L5.74718 23.5663C5.1614 24.1521 4.21165 24.1521 3.62586 23.5663ZM3.62586 33.7584C3.04008 34.3442 3.04008 35.294 3.62586 35.8797C4.21165 36.4655 5.1614 36.4655 5.74718 35.8797L26.2533 15.3737C26.8391 14.7879 26.8391 13.8381 26.2533 13.2523C25.6675 12.6665 24.7177 12.6665 24.132 13.2523L3.62586 33.7584Z\"\n                            fill=\"currentColor\"\n                        />\n                    </svg>\n                </button>\n\n                <!-- MODAL VIDEO ROW -->\n                <div class=\"pdg-modal-video-container-row row\">\n                    <!-- MODAL VIDEO -->\n                    <video\n                        class=\"pdg-modal-video col-md-10 offset-md-1\"\n                        src=\"/assets/paradigma-rebranding-2024.mp4\"\n                        type=\"video/mp4\"\n                        controls\n                        loading=\"lazy\"\n                        preload=\"metadata\"\n                        poster=\"/assets/img/header-video-poster.webp\"\n                    />\n                </div>\n            </div>\n        </Transition>\n\n        <!-- HEADER CONTAINER -->\n        <div class=\"pdg-header-container\">\n            <!-- HEADER CONTENT -->\n            <div class=\"pdg-header-content pdg-container\">\n                <div class=\"row\">\n                    <h1\n                        class=\"pdg-title-h1 col-11 col-md-10\"\n                        v-html=\"translations?.header?.title\"\n                    />\n                    <p\n                        class=\"pdg-subhead-2 col-10 col-md-11 offset-2 offset-md-1\"\n                        v-html=\"translations?.header?.subtitle\"\n                    />\n                </div>\n            </div>\n\n            <!-- VIDEO CONTAINER -->\n            <div class=\"pdg-video-container pdg-video-container-header pdg-container\">\n                <div class=\"pdg-video-container-row row\">\n                    <!-- MODAL CONTAINER -->\n                    <div class=\"pdg-modal-container offset-2 offset-sm-0 col-10 col-sm-9\">\n                        <!-- HEADER VIDEO CONTAINER -->\n                        <div\n                            class=\"pdg-header-video-container pdg-fade-in\"\n                            role=\"button\"\n                            tabindex=\"0\"\n                            @click=\"toggleModal\"\n                            @keydown.space.prevent=\"toggleModal\"\n                            @keydown.enter.prevent=\"toggleModal\"\n                            :aria-pressed=\"modalIsOpen\"\n                        >\n                            <NuxtImg\n                                class=\"pdg-header-video-poster\"\n                                src=\"/assets/img/header-video-poster.svg\"\n                                :alt=\"translations?.header?.rebranding?.['video-poster']\"\n                                preload\n                                sizes=\"83.33333333vw md:75vw\"\n                                densities=\"x2\"\n                            />\n\n                            <HeaderPlayVideoButton />\n                        </div>\n\n                        <p\n                            class=\"pdg-body-6 pdg-video-description pdg-fade-in\"\n                            v-html=\"translations?.header?.rebranding?.description\"\n                        />\n                    </div>\n\n                    <!-- ARROW CONTAINER -->\n                    <div class=\"pdg-arrow-container col-12 col-md-3 pdg-fade-in\">\n                        <div class=\"pdg-arrow-container-row row\">\n                            <button\n                                class=\"pdg-arrow-svg\"\n                                :aria-label=\"\n                                    translations?.header?.rebranding?.['aria-down-arrow']\n                                \"\n                                @click=\"autoScroll\"\n                            >\n                                <i class=\"icon-arrow-down\"></i>\n                            </button>\n\n                            <p\n                                class=\"pdg-body-6 pdg-arrow-description col-10 col-sm-9 col-md-12\"\n                            >\n                                {{ translations?.header?.rebranding?.['arrow-description'] }}\n                            </p>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </section>\n</template>\n\n<style scoped lang=\"scss\">\n    @import \"../scss/includes.scss\";\n\n    //HEADER SECTION CONTAINER\n    .pdg-header-section-container {\n        background: var(--bg-0);\n        overflow: hidden;\n        /* min-height: 100vh; */\n\n        //MODAL VIDEO CONTAINER\n        .pdg-modal-video-container {\n            width: 100vw;\n            height: 100vh;\n\n            background: var(--bg-1);\n\n            position: fixed;\n            top: 0;\n            left: 0;\n\n            transition: $transition;\n\n            z-index: 100;\n\n            cursor: pointer;\n\n            //MODAL CLOSE BTN\n            .pdg-modal-close-btn {\n                @include flex($align-items: center);\n\n                gap: rem(32);\n\n                color: var(--body-0);\n                background: none;\n                border: none;\n\n                position: absolute;\n                top: rem(24);\n                right: rem(16);\n\n                z-index: 1;\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    right: rem(map-get($gutter-container, md));\n                }\n            }\n\n            //MODAL VIDEO ROW\n            .pdg-modal-video-container-row {\n                align-items: center;\n\n                height: 100%;\n\n                @media screen and (min-width: map-get($horizontal-breakpoints, xxs)) and (max-height: map-get($horizontal-breakpoints, sm)) and (orientation: landscape) {\n                    justify-content: center;\n                }\n\n                .pdg-modal-video {\n                    @media screen and (min-width: map-get($horizontal-breakpoints, xxs)) and (max-height: map-get($horizontal-breakpoints, sm)) and (orientation: landscape) {\n                        width: 58.33333333%;\n                        margin-left: 0;\n                    }\n                }\n            }\n        }\n\n        //HEADER CONTAINER\n        .pdg-header-container {\n            height: 100vh;\n\n            //HEADER CONTENT\n            .pdg-header-content {\n                @include flex($align-items: center);\n                height: 48vh;\n\n                color: var(--dark);\n\n                padding-top: rem(88);\n                padding-bottom: rem(16);\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    height: 50vh;\n\n                    padding-top: rem(172);\n                    padding-bottom: rem(94);\n                }\n\n                @media screen and (max-height: map-get($horizontal-breakpoints, xs)),\n                    (max-height: map-get($horizontal-breakpoints, sm)) and (orientation: landscape) {\n                    height: 100vh;\n                }\n\n                //TITLE\n                .pdg-title-h1 {\n                    margin-bottom: vh(8);\n\n                    @media screen and (min-width: map-get($breakpoints, md)) {\n                        margin-bottom: vh(32);\n                    }\n                }\n\n                .pdg-title-h1,\n                .pdg-subhead-2 {\n                    &:deep(.pdg-line) .word {\n                        opacity: 0;\n                    }\n                }\n            }\n\n            //VIDEO CONTAINER\n            .pdg-video-container {\n                /* opacity: 0; */\n\n                height: 52dvh;\n\n                color: var(--body-0);\n                background: var(--bg-1);\n\n                padding-top: rem(40);\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    height: 50vh;\n\n                    padding-top: rem(112);\n                }\n\n                @media screen and (max-height: map-get($horizontal-breakpoints, xs)) {\n                    height: 100vh;\n\n                    padding-top: rem(90);\n                }\n\n                @media screen and (max-height: map-get($horizontal-breakpoints, sm)) {\n                    @include flex($align-items: center);\n                }\n\n                //VIDEO CONTAINER ROW\n                .pdg-video-container-row {\n                    @include flex(center, flex-end, column, nowrap);\n\n                    height: 100%;\n                    position: relative;\n\n                    @media screen and (min-width: map-get($breakpoints, md)) {\n                        @include flex(null, center, row-reverse);\n                    }\n\n                    @media screen and (min-width: map-get($horizontal-breakpoints, xxs)) and (max-height: map-get($horizontal-breakpoints, sm)) and (orientation: landscape) {\n                        @include flex(null, flex-start, row-reverse);\n\n                        /* height: auto; */\n                    }\n                }\n\n                //MODAL CONTAINER\n                .pdg-modal-container {\n                    @media screen and (min-width: map-get($breakpoints, md)) {\n                        height: 100%;\n                    }\n\n                    @media screen and (min-width: map-get($horizontal-breakpoints, xxs)) and (max-height: map-get($horizontal-breakpoints, sm)) and (orientation: landscape) {\n                        width: 66.66666667%;\n                    }\n\n                    .pdg-header-video-container {\n                        max-height: 100%;\n\n                        margin-right: rem(-16);\n\n                        position: relative;\n\n                        cursor: none;\n\n                        @media (hover: hover) {\n                            overflow: hidden;\n                        }\n\n                        @media screen and (min-width: map-get($breakpoints, md)) {\n                            margin-right: rem(-80);\n                        }\n\n                        @media screen and (min-width: map-get($horizontal-breakpoints, xxs)) and (max-height: map-get($horizontal-breakpoints, sm)) and (orientation: landscape) and (min-width: map-get($breakpoints, md)){\n                            @include flex($align-items: center);\n                            margin-right: 0;\n                        }\n\n                        .pdg-header-video-poster {\n                            width: 100%;\n                            height: 100%;\n\n                            object-fit: cover;\n                            object-position: top left;\n                        }\n                    }\n\n                    .pdg-video-description {\n                        height: 0;\n                        margin: 0;\n                        opacity: 0;\n\n                        @media screen and (min-width: map-get($breakpoints, md)) {\n                            width: 100%;\n                        }\n\n                        @media screen and (max-height: map-get($horizontal-breakpoints, sm)) and (orientation: landscape) {\n                            //MIN-WIDTH XS\n                            @media screen and (min-width: calc(map-get($horizontal-breakpoints, xs) + rem(0.1))) {\n                                height: auto;\n\n                                /* margin-left: rem(-8); */\n\n                                /* transform: translate(-100%, -100%); */\n\n                                opacity: 1;\n                                position: absolute;\n                                left: 0;\n                                bottom: 0;\n                            }\n\n                            //MAX-WIDTH XS\n                            @media screen and (max-width: calc(map-get($horizontal-breakpoints, xs) - rem(0.1))) {\n                                width: calc(100% - rem(24));\n                            }\n                        }\n                    }\n                }\n\n                //ARROW CONTAINER\n                .pdg-arrow-container {\n                    @include flex(space-between, flex-start);\n\n                    margin-top: rem(16);\n                    margin-bottom: 10vh;\n\n                    position: relative;\n\n                    @media screen and (min-width: map-get($breakpoints, md)) {\n                        @include flex(center);\n\n                        margin: 0;\n                        margin-top: rem(64);\n                    }\n\n                    @media screen and (min-width: map-get($horizontal-breakpoints, xxs)) and (max-height: map-get($horizontal-breakpoints, sm)) and (orientation: landscape) {\n                        width: 33.33333333%;\n\n                        margin-top: 0;\n                    }\n\n                    .pdg-arrow-container-row {\n                        justify-content: flex-end;\n\n                        /* @media screen and (min-width: map-get($horizontal-breakpoints, xs)) {\n                            width: 100%;\n                        } */\n\n                        .pdg-arrow-svg {\n                            width: fit-content;\n\n                            color: var(--body-3);\n                            background: none;\n\n                            padding: 0;\n\n                            position: absolute;\n                            top: rem(12);\n                            left: 0;\n\n                            font-size: rem(40);\n\n                            border: none;\n\n                            outline: none;\n\n                            transition: $transition;\n                            transition-property: padding;\n\n                            @media screen and (min-width: map-get($breakpoints, sm)) {\n                                top: 0;\n                            }\n\n                            @media screen and (min-width: map-get($breakpoints, md)) {\n                                top: rem(24);\n\n                                left: rem(-64);\n\n                                &:hover,\n                                &:focus {\n                                    padding-top: rem(20);\n                                }\n                            }\n\n                            @media screen and (min-width: map-get($horizontal-breakpoints, xxs)) and (max-height: map-get($horizontal-breakpoints, sm)) and (orientation: landscape) {\n                                display: none;\n                            }\n                        }\n\n                        .pdg-arrow-description {\n                            margin: 0;\n\n                            @media screen and (min-width: map-get($horizontal-breakpoints, xxs)) and (max-height: map-get($horizontal-breakpoints, sm)) and (orientation: landscape) {\n                                width: 100%;\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    defineProps([\"src\", \"alt\", \"stickers\", 'sizes']);\n\n    let isMobile = ref<boolean>(true);\n\n    const updateIsMobile = () =>\n        (isMobile.value = window.matchMedia(\"(max-width: 1024px)\").matches);\n\n    onMounted(() => {\n        updateIsMobile();\n        window.addEventListener(\"resize\", updateIsMobile);\n    });\n    onUnmounted(() => window.removeEventListener(\"resize\", updateIsMobile));\n</script>\n\n<template>\n    <div class=\"pdg-animated-image-container\">\n        <figure class=\"pdg-animated-image-figure\">\n            <NuxtImg\n                :src=\"src\"\n                :alt=\"alt\"\n                class=\"pdg-animated-image\"\n                loading=\"lazy\"\n                format=\"webp\"\n                :sizes=\"sizes\"\n                densities=\"x1 x2\"\n            />\n            <NuxtImg\n                :src=\"src\"\n                :alt=\"alt\"\n                class=\"pdg-sticker\"\n                :class=\"[position, size]\"\n                v-for=\"({ src, alt, position, size }, index) in stickers\"\n                :key=\"index\"\n                :aria-hidden=\"isMobile\"\n                loading=\"lazy\"\n            />\n        </figure>\n\n        <div class=\"pdg-animated-image-overlay\" />\n    </div>\n</template>\n\n<style scoped lang=\"scss\">\n    @import \"../scss/includes.scss\";\n\n    .pdg-animated-image-container {\n        flex: 0 0 auto;\n\n        position: relative;\n\n        overflow: hidden;\n\n        clip-path: content-box;\n\n        @media screen and (min-width: map-get($breakpoints, md)) {\n            clip-path: initial;\n        }\n\n        .pdg-animated-image-figure {\n            height: 100%;\n\n            margin: 0;\n\n            .pdg-animated-image {\n                width: 100%;\n                height: 100%;\n\n                object-fit: cover;\n\n                transform: scale(1.1);\n\n                opacity: 0;\n\n                z-index: -1;\n            }\n        }\n\n        .pdg-animated-image-overlay {\n            width: 100%;\n            height: 100%;\n\n            position: absolute;\n            top: 0;\n            left: 0;\n\n            opacity: 0;\n\n            transform: translateY(100%);\n\n            z-index: 1;\n        }\n\n        .pdg-sticker {\n            opacity: 0;\n            visibility: hidden;\n\n            width: rem(96);\n\n            position: absolute;\n\n            @media screen and (min-width: map-get($breakpoints, md)) {\n                opacity: 1;\n                visibility: visible;\n            }\n\n            //POSITION\n            &.top-left {\n                top: rem(-56);\n                left: rem(-48);\n            }\n\n            &.top-right {\n                top: rem(-48);\n                right: rem(-48);\n            }\n\n            &.bottom-left {\n                bottom: rem(-56);\n                left: rem(-48);\n            }\n\n            &.bottom-right {\n                bottom: rem(-56);\n                right: rem(-48);\n            }\n\n            //SIZE\n            &.small {\n                width: rem(100);\n            }\n\n            &.big {\n                width: rem(148);\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import gsap from \"gsap\";\n    import { ScrollTrigger } from \"gsap/all\";\n    const globalState = useGlobalState();\n\n    //GLOBAL VARIABLES\n    let slidesContainer: HTMLElement;\n\n    //MOVE FACTOR\n    const moveFactor = 300;\n\n    let horizontalSliderAnimation: GSAPAnimation;\n\n    //ON TOUCH START EVENT\n    const blockHorizontalSliderAutoScroll = () => horizontalSliderAnimation?.kill();\n    const { locale } = useI18n();\n\n    const { data: translations } = await useAsyncData('translations', async () => {\n        const res = await $fetch<any>(`/api/translations?lang=${locale.value}&mode=${globalState.value.mode}`)\n        return res\n    }, { watch: [locale, globalState] })\n\n    onMounted(() => {\n        if (process.client) {\n\n            //CONTAINER ASSIGNMENT\n            const container = document.querySelector(\".pdg-motto-container\") as HTMLElement;\n\n            //CONTAINER CHECK\n            if (container) {\n\n\n                //GSAP BREAKPOINTS\n                const mm = gsap.matchMedia(),\n                breakPoint = 1024;\n\n                mm.add(\n                    {\n                        isDesktop: `(min-width: ${breakPoint}px)`,\n                        isMobile: `(max-width: ${breakPoint - 0.1}px)`,\n                    },\n                    ({ conditions }) => {\n                        const { isDesktop, isMobile } = conditions as gsap.Conditions;\n\n                        //CONTAINER CHECK\n                        if (container) {\n                            const q = gsap.utils.selector(container);\n                            //SLIDES CONTAINER\n                            slidesContainer = container.querySelector(\".pdg-motto-slides-container\") as HTMLElement;\n\n                            //SLIDES\n                            const slides = Array.from(slidesContainer?.childNodes) as HTMLElement[];\n\n                            //MOVE HANDLE\n                            const moveHandle = ({ clientX, clientY }: MouseEvent) => {\n                                const containerRect = container.getBoundingClientRect();\n                                var relX = clientX - containerRect.left;\n                                var relY = clientY - containerRect.top;\n                                \n                                slides?.forEach(\n                                    (slide, i) => {\n                                        const movement = i % 2 === 0 ? -100 : 100;\n                                        const delay = i * 0.1; // Adjust the stagger delay as needed\n\n                                        gsap.to(slide, {\n                                            x: (relX - container.offsetWidth / 2) / container.offsetWidth * movement,\n                                            y: (relY - container.offsetHeight / 2) / container.offsetHeight * movement,\n                                            delay: delay\n                                        });\n                                    }\n                                );\n                            }\n\n                            // //RESET IMAGES TRANSFORM\n                            const resetImagesTransform = () =>\n                                slides?.forEach(\n                                    (slide) => (slide.style.transform = `translate(0, 0)`)\n                                );\n\n                            //AUTO HORIZONTAL SCROLL\n                            const autoHorizontalScroll = (durationSeconds: number = 20) => {\n                                const duration =\n                                    durationSeconds *\n                                    (1 -\n                                        slidesContainer.scrollLeft /\n                                            (slidesContainer.scrollWidth -\n                                                slidesContainer.offsetWidth));\n\n                                if (duration) {\n                                    blockHorizontalSliderAutoScroll();\n\n                                    horizontalSliderAnimation = gsap.to(slidesContainer, {\n                                        scrollTo: {\n                                            x: slidesContainer.scrollWidth,\n                                        },\n                                        duration,\n                                    });\n                                }\n                            };\n\n                            const animation = gsap.timeline({\n                                onComplete: () => {\n                                    if (isMobile) {\n                                        autoHorizontalScroll()\n                                        gsap.to( q('.pdg-motto-slides-container'), { overflowX: \"auto\"})\n                                    }\n                                }\n                            });\n\n                            //ANIMATION DELAY\n                            animationDelay(animation, container);\n\n                            //OPEN IMAGE ANIMATION\n                            imageAnimation({\n                                tl: animation,\n                                container: \".pdg-motto-container\",\n                                keyframe: \"entry+=0.3\",\n                            }).open();\n\n                            //CONTENT DESCRIPTION\n                            animation\n                                .fromTo(\n                                    \".pdg-motto-container .pdg-motto-content .pdg-body-2\",\n                                    {\n                                        yPercent: 100,\n                                        opacity: 0,\n                                    },\n                                    {\n                                        yPercent: 0,\n                                        opacity: 1,\n                                    },\n                                    \"entry\"\n                                )\n                                if (isDesktop) {\n                                    //ANIMATED IMAGE OVERFLOW INITIAL\n                                    animation.to(\n                                        \".pdg-motto-container .pdg-animated-image-container\",\n                                        {\n                                            overflow: \"inherit\",\n                                        },\n                                        \"show-sticker\"\n                                    )\n                                }\n\n                                //STICKER\n                                const stickers = q('.pdg-animated-image-container .pdg-sticker')\n                                if (stickers.length > 0) {\n                                    animation.fromTo(\n                                        stickers,\n                                        {\n                                            scale: 0,\n                                        },\n                                        {\n                                            scale: 1,\n                                        },\n                                        \"show-sticker\"\n                                    );\n                                }\n\n                                //TEXT ANIMATION\n                                textAnimation({\n                                    tl: animation,\n                                    split: true,\n                                    container: \".pdg-motto-container .pdg-motto-content\",\n                                    elements: [\".pdg-title-h1\"],\n                                    from: { yPercent: 100 },\n                                    to: { yPercent: 0 },\n                                    keyframe: \"entry\",\n                                });\n\n                                ScrollTrigger.create({\n                                    animation,\n                                    trigger: \".pdg-motto-container\",\n                                    start: \"top 50%\",\n                                    end:\"bottom 50%\",\n                                    id: \"MOTTO\",\n                                    preventOverlaps: true,\n                                    toggleActions: \"play reverse play reverse\",\n                                    // markers: true,\n                                    onUpdate({ getVelocity }) {\n                                        // if (isDesktop) {\n                                            gsap.fromTo(slides, {\n                                                skewY: `${getVelocity() / 300}deg`\n                                            }, {\n                                                skewY: 0\n                                            })\n                                        // } \n                                    },\n                                    // markers: {startColor: \"red\", endColor: \"yellow\", fontSize: '50'},\n                                    onEnter: () => {\n                                        setTimeout (() => {\n                                            gsap.to(\"body\", {\n                                                backgroundColor: globalState.value.mode === 'normal' ? '#fff' : '#ee4266',\n                                                overwrite: \"auto\"\n                                            })\n                                        }, 0)\n                                    },\n                                    onLeaveBack: () => \n                                    setTimeout (() => {\n                                        gsap.to(\"body\", {\n                                            backgroundColor: globalState.value.mode === 'normal' ? '#0a2843' : '#c3f73a',\n                                            overwrite: \"auto\"\n                                        })\n                                    }, 0)\n                                });\n\n                                //IS DESKTOP\n                                if (isDesktop) {\n                                    //MOVE HANDLE\n                                    container.addEventListener(\"mousemove\", moveHandle);\n\n                                    return () =>\n                                        container.removeEventListener(\"mousemove\", moveHandle);\n                                }\n\n                                //IS MOBILE\n                                else {\n                                    resetImagesTransform();\n                                }\n\n                                //ON TOUCH START AND MOUSEOVER EVENT LISTENER\n                                slidesContainer?.addEventListener(\"touchstart\", () =>\n                                    blockHorizontalSliderAutoScroll(), \n                                { passive: true }\n                                );\n                                slidesContainer?.addEventListener(\"mouseover\", () =>\n                                    blockHorizontalSliderAutoScroll()\n                                );\n                        }\n                    }\n                )\n            }\n        }\n    });\n\n    onUnmounted(() => {\n        slidesContainer?.removeEventListener(\"mouseover\", () =>\n            blockHorizontalSliderAutoScroll()\n        );\n        slidesContainer?.removeEventListener(\"touchstart\", () =>\n            blockHorizontalSliderAutoScroll()\n        );\n    });\n</script>\n\n<template>\n    <section class=\"pdg-motto-container pdg-structure-grid pdg-container\">\n        <!-- SLIDES CONTAINER -->\n        <div class=\"pdg-motto-slides-container pdg-structure-grid pdg-scroll-x\">\n                <AnimatedImage\n                    class=\"pdg-image-1 pdg-height-width-animated-image\"\n                    :src=\"`/assets/img/${globalState.mode}/motto/${globalState.mode === 'crazy' ? 'gaming-better-than-coding': 'coding'}.webp`\"\n                    :alt=\"translations?.motto?.['alt-images']?.['1']\"\n                    :stickers=\"\n                        globalState.mode === 'crazy' && [\n                            {\n                                src: `/assets/img/crazy/motto/stickers/sticker-crazymode-colpa-del-backend.svg`,\n                                alt: translations?.motto?.['alt-stickers']?.['1'],\n                                position: 'bottom-right',\n                                size: 'small',\n                            },\n                        ]\n                    \"\n                    sizes=\"200px md:30vw\"\n                />\n                <AnimatedImage\n                    class=\"pdg-image-2 pdg-height-width-animated-image\"\n                    :src=\"`/assets/img/${globalState.mode}/motto/${globalState.mode === 'crazy' ? 'not-too-brilliant-idea': 'scrum-retrospective'}.webp`\"\n                    :alt=\"translations?.motto?.['alt-images']?.['2']\"\n                    :stickers=\"\n                        globalState.mode === 'crazy' && [\n                            {\n                                src: `/assets/img/crazy/motto/stickers/sticker-crazymode-dev-new-designers.svg`,\n                                alt: translations?.motto?.['alt-stickers']?.['2'],\n                                position: 'top-left',\n                                size: 'big',\n                            },\n                            {\n                                src: `/assets/img/crazy/motto/stickers/sticker-crazymode-chaotic-organised.webp`,\n                                alt: translations?.motto?.['alt-stickers']?.['3'],\n                                position: 'top-right',\n                                size: 'big',\n                            },\n                        ]\n                    \"\n                    sizes=\"376px md:80vw\"\n                />\n                <AnimatedImage\n                    class=\"pdg-image-3 pdg-height-width-animated-image\"\n                    :class=\"`pdg-image-3-${globalState.mode}`\"\n                    :src=\"`/assets/img/${globalState.mode}/motto/${globalState.mode === 'crazy' ? 'acrobatic-selfie': 'development'}.webp`\"\n                    :alt=\"translations?.motto?.['alt-images']?.['3']\"\n                    sizes=\"200px md:40vw\"\n                />\n                <AnimatedImage\n                    class=\"pdg-image-4 pdg-height-width-animated-image\"\n                    :src=\"`/assets/img/${globalState.mode}/motto/${globalState.mode === 'crazy' ? 'fake-brainstorming': 'team-brainstorming'}.webp`\"\n                    :alt=\"translations?.motto?.['alt-images']?.['4']\"\n                    :stickers=\"\n                        globalState.mode === 'crazy' && [\n                            {\n                                src: `/assets/img/crazy/motto/stickers/sticker-crazymode-stacco-bweekend.svg`,\n                                alt: translations?.motto?.['alt-stickers']?.['4'],\n                                position: 'bottom-left',\n                                size: 'big',\n                            },\n                        ]\n                    \"\n                    sizes=\"308px md:50vw\"\n                />\n                <AnimatedImage\n                    class=\"pdg-image-5 pdg-height-width-animated-image\"\n                    :src=\"`/assets/img/${globalState.mode}/motto/${globalState.mode === 'crazy' ? 'silence-in-the-hall-Shreck-has-started': 'company-presentation'}.webp`\"\n                    :alt=\"translations?.motto?.['alt-images']?.['5']\"\n                    :stickers=\"\n                        globalState.mode === 'crazy' && [\n                            {\n                                src: `/assets/img/crazy/motto/stickers/sticker-crazymode-troppa-ansia.svg`,\n                                alt: translations?.motto?.['alt-stickers']?.['5'],\n                                position: 'top-left',\n                                size: 'big',\n                            },\n                        ]\n                    \"\n                    sizes=\"308px md:50vw\"\n                />\n        </div>\n\n            <!-- CONTENT -->\n        <div class=\"pdg-motto-content\">\n            <div class=\"row\">\n                <h1\n                    class=\"pdg-motto-title pdg-title-h1 col-12\"\n                    v-html=\"translations?.motto?.title\"\n                />\n                <p\n                    class=\"pdg-motto-description pdg-body-2 col-10 col-md-8 offset-2 offset-md-0\"\n                    v-html=\"translations?.motto?.description\"\n                />\n            </div>\n        </div>\n    </section>\n</template>\n\n<style scoped lang=\"scss\">\n    @import \"../scss/includes.scss\";\n\n    //CONTAINER\n    .pdg-motto-container {\n       min-height: 100vh;\n\n        color: var(--body-1);\n\n        position: relative;\n\n        overflow: hidden;\n\n        padding-bottom: rem(80);\n\n        padding-top: rem(80);\n\n        @media screen and (min-width: map-get($breakpoints, md)) {\n            padding-top: 0;\n            padding-bottom: rem(140);\n        }\n\n        //SLIDES CONTAINER\n        .pdg-motto-slides-container {\n            @include flex();\n            height: vh(260);\n            transition: 0.1s;\n            margin-top: rem(132);\n            margin-bottom: rem(32);\n            gap: rem(24);\n            padding: 0;\n            overflow-x: hidden;\n\n            @media screen and (min-width: map-get($breakpoints, md)) {\n                grid-column: 1 / -1;\n                grid-row: 1 / -1;\n                overflow: visible;\n                height: 100%;\n                margin: 0;\n            }\n\n                //ANIMATED IMAGE\n                .pdg-animated-image-container {\n                    &:nth-child(2n) {\n                        height: calc(100% - vh(24));\n                    }\n\n                    //IMAGE 1\n                    &.pdg-image-1 {\n                        width: rem(200);\n\n                        @media screen and (min-width: map-get($breakpoints, md)) {\n                            grid-column: 1 / 4;\n                            grid-row: 6 / 9;\n                        }\n\n                        @media screen and (min-width: map-get($breakpoints, md)) and (max-height: 1024px){\n                            grid-row: 7 / 10;\n                            padding-bottom: rem(16);\n                        }\n\n                        @media screen and (min-width: map-get($breakpoints, lg)) {\n                            grid-column: 1 / 3;\n                            grid-row: 9 / 12;\n                        }\n\n                        @each $size, $value in $gutter-container {\n                            @if $size != xs and $size != sm {\n                                @media screen and (min-width: map-get($breakpoints, $size)) {\n                                    margin-left: rem(-$value);\n                                }\n                            }\n                        }\n                    }\n\n                    //IMAGE 2\n                    &.pdg-image-2 {\n                        width: rem(376);\n\n                        @media screen and (min-width: map-get($breakpoints, md)) {\n                            grid-column: 1 / 7;\n                            grid-row: 10 / -1;\n                        }\n                        \n                        @media screen and (min-width: map-get($breakpoints, lg)) {\n                            grid-column: 3 / 7;\n                            grid-row: 10 / -1;\n                        }\n                    }\n\n                    //IMAGE 3\n                    &.pdg-image-3 {\n                        width: rem(200);\n\n                        @media screen and (min-width: map-get($breakpoints, md)) {\n                            grid-column: 7 / 11;\n                            grid-row: 5 / 8;\n                            margin-top: rem(16);\n                        }\n\n                        @media screen and (min-width: map-get($breakpoints, lg)) {\n                            grid-column: 8 / 10;\n                            grid-row: 6 / 9;\n                        }\n                    }\n\n                    //IMAGE 4\n                    &.pdg-image-4 {\n                        width: rem(308);\n\n                        @media screen and (min-width: map-get($breakpoints, md)) {\n                            grid-column: 8 / -1;\n                            grid-row: 2 / 4;\n                        }\n\n                        @media screen and (min-width: map-get($breakpoints, lg)) {\n                            grid-column: 9 / 12;\n                            grid-row: 2 / 5;\n                        }\n                    }\n\n                    //IMAGE 5\n                    &.pdg-image-5 {\n                        width: rem(308);\n\n                        @media screen and (min-width: map-get($breakpoints, md)) {\n                            grid-column: 8 / -1;\n                            grid-row: 9 / 12;\n\n                                @each $size, $value in $gutter-container {\n                                    @if $size != xs and $size != sm {\n                                        @media screen and (min-width: map-get($breakpoints, $size)) {\n                                            margin-left: rem($value);\n                                        }\n                                    }\n                                }\n                            }\n                            \n                            @media screen and (min-width: map-get($breakpoints, lg)) {\n                                grid-column: 10 / -1;\n                                grid-row: 10 / -1;\n                            }\n                    }\n\n                    &.pdg-height-width-animated-image {\n                        @media screen and (min-width: map-get($breakpoints, md)) {\n                            width: 100%;\n                            height: 100%;\n                        }\n                        transform: translate(0, 0);\n                        transition: transform 0.1s;\n                    }\n                }\n\n                //IMAGE OVERLAY\n                &:deep(.pdg-animated-image-overlay) {\n                    background: var(--green);\n                }\n        }\n\n        //CONTENT\n        .pdg-motto-content {\n            @media screen and (min-width: map-get($breakpoints, md)) {\n                grid-column: 1 / 8;\n                grid-row: 3 / 5;\n            }\n            @media screen and (min-width: map-get($breakpoints, md)) and (max-height: map-get($horizontal-breakpoints, sm)) {\n                grid-row: 2 / 5;\n            }\n\n            @media screen and (min-width: map-get($breakpoints, md)) and (max-height: map-get($horizontal-breakpoints, xs)) {\n                grid-row: 1 / 5;\n                padding-top: rem(32);\n            }\n\n\n            //TITLE\n            .pdg-motto-title {\n                margin-bottom: rem(16);\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    margin-bottom: rem(24);\n                }\n            }\n\n            //DESCRIPTION\n            .pdg-motto-description {\n                @media screen and (max-width: calc(map-get($breakpoints, md) - rem(1))) {\n                    font-size: rem(18);\n                    line-height: rem(20);\n                }\n            }\n        }\n\n        &,\n        .pdg-structure-grid {\n            @media screen and (min-width: map-get($breakpoints, md)) {\n                display: grid;\n                grid-template-columns: repeat(12, calc((100% - (rem(16) * 11)) / 12));\n                grid-template-rows: repeat(12, calc(((100vh - (rem(16) * 11)) / 12)));\n                gap: rem(16);\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n\n    defineProps([\"prevAction\", \"nextAction\"]);\n    const { locale } = useI18n();\n    const globalState = useGlobalState();\n\n    const { data: translations } = await useAsyncData('translations', async () => {\n        const res = await $fetch<any>(`/api/translations?lang=${locale.value}&mode=${globalState.value.mode}`)\n        return res\n    }, { watch: [locale, globalState] })\n</script>\n\n<template>\n    <div class=\"pdg-slider-controls\">\n        <button\n            class=\"pdg-slider-control-btn\"\n            :aria-label=\"translations?.['slider-controls']?.['aria-left-arrow']\"\n            @click=\"prevAction\"\n        >\n            <i class=\"icon-arrow-right icon\" />\n        </button>\n        <button\n            class=\"pdg-slider-control-btn\"\n            :aria-label=\"translations?.['slider-controls']?.['aria-right-arrow']\"\n            @click=\"nextAction\"\n        >\n            <i class=\"icon-arrow-left icon\" />\n        </button>\n    </div>\n</template>\n\n<style scoped lang=\"scss\">\n@import \"../scss/includes.scss\";\n\n.pdg-slider-controls {\n    @include flex(flex-start, center);\n\n    gap: rem(8);\n\n    //THEME\n    &.pink {\n        .pdg-slider-control-btn {\n            color: var(--body-2);\n\n            border-color: var(--body-2);\n\n            &:hover,\n            &:focus {\n                color: var(--body-1);\n                background: var(--body-2);\n            }\n        }\n    }\n\n    &.dark-blue {\n        .pdg-slider-control-btn {\n            color: var(--dark);\n\n            border-color: var(--dark);\n\n            &:hover,\n            &:focus {\n                color: var(--white);\n                background: var(--dark-pink);\n\n                border-color: var(--dark-pink);\n            }\n        }\n    }\n\n    //BUTTON\n    .pdg-slider-control-btn {\n        @include flex(center, center);\n\n        background: none;\n\n        padding: rem(2) rem(10);\n\n        @include typography(28, 400, 28);\n\n        border: 1px solid;\n        border-radius: rem(100);\n\n        transition: all 0.3s ease-in-out;\n\n        @media screen and (min-width: map-get($breakpoints, lg)) {\n            padding: vw(2, 1440) vw(10, 1440);\n\n            font-size: vw(28, 1440);\n            line-height: vw(28, 1440);\n        }\n    }\n}\n</style>\n","<script setup lang=\"ts\">\n    import gsap from \"gsap\";\n    import { ScrollTrigger } from \"gsap/all\";\n\n    const globalState = useGlobalState();\n\n    const adjectives =\n    globalState.value.mode === \"normal\"\n            ? [\"stubborn\", \"curious\", \"creative\", \"geeks\", \"imperfect\"]\n            : [\"stubborn\", \"curious\", /* \"creative\", */ \"geeks\", \"imperfect\", \"united\"];\n\n    const currentAdjectiveIndex = ref<number>(0);\n\n    let adjectiveTimeout: NodeJS.Timeout;\n\n    const { locale } = useI18n();\n\n    const { data: translations } = await useAsyncData('translations', async () => {\n        const res = await $fetch<any>(`/api/translations?lang=${locale.value}&mode=${globalState.value.mode}`)\n        return res\n    }, { watch: [locale, globalState] })\n\n    //SET ADJECTIVE\n    const setAdjective = (adjectiveIndex: number | null) => {\n        if (adjectiveIndex !== currentAdjectiveIndex.value) {\n            clearTimeout(adjectiveTimeout);\n\n            currentAdjectiveIndex.value = adjectiveIndex || 0;\n            adjectiveTimeout = setTimeout(() => {\n                closeAll({\n                    onComplete: () => {\n                        openAnimation();\n                    },\n                });\n            }, 0);\n        }\n    };\n\n    //ADJECTIVES CONTROLS\n    let adjectivesContainer: HTMLElement;\n\n    const prevNextAdjective = (direction: \"prev\" | \"next\") => {\n        const targetIndex = currentAdjectiveIndex.value + (direction === \"prev\" ? -1 : 1);\n\n        const index =\n            direction === \"prev\"\n                ? targetIndex < 0\n                    ? adjectives.length - 1\n                    : targetIndex\n                : targetIndex > adjectives.length - 1\n                ? 0\n                : targetIndex;\n\n        if (adjectives[index]) {\n            adjectivesContainer &&\n                adjectivesContainer.scrollTo({\n                    left:\n                        (\n                            adjectivesContainer.querySelector(\n                                `.pdg-adjective-${index}`\n                            ) as HTMLElement\n                        )?.offsetLeft - 16,\n                    behavior: \"smooth\",\n                });\n\n            setAdjective(index);\n        }\n    };\n\n    //OPEN SLIDE ANIMATION\n    const openAnimation = () => {\n        const openAnimation = gsap\n            .timeline()\n            //ADJECTIVE SLIDE\n            .to(`.pdg-we-are-container .pdg-slide-${currentAdjectiveIndex.value + 1}`, {\n                display: \"flex\",\n                duration: 0,\n            });\n\n        //OPEN IMAGE ANIMATION\n        imageAnimation({\n            tl: openAnimation,\n            container: `.pdg-we-are-container .pdg-slide-${currentAdjectiveIndex.value + 1}`,\n        }).open();\n    };\n\n    //CLOSE SLIDE ANIMATION\n    const closeAll = (props: gsap.TimelineVars) => {\n        const closeAnimation = gsap.timeline(props);\n\n        //OPEN IMAGE ANIMATION\n        imageAnimation({\n            tl: closeAnimation,\n            container: `.pdg-we-are-container`,\n        }).close();\n\n        //ADJECTIVE SLIDE\n        closeAnimation.to(\n            `.pdg-we-are-container .pdg-we-are-adjectives-slides-container .pdg-we-are-adjectives-slide`,\n            {\n                display: \"none\",\n                duration: 0,\n            }\n        );\n    };\n\n    onMounted(() => {\n\n        if (process.client) {\n            const mm = gsap.matchMedia(),\n                breakPoint = 1024;\n\n            mm.add(\n                {\n                    isDesktop: `(min-width: ${breakPoint}px)`,\n                    isMobile: `(max-width: ${breakPoint - 1}px)`,\n                },\n                () => {\n                    //CONTAINER\n                    const container = document.querySelector(\".pdg-we-are-container\") as HTMLElement;\n                    //SET ADJECTIVE CONTAINER VARIABLE\n                    adjectivesContainer = container.querySelector(\n                        \".pdg-we-are-adjectives\"\n                    ) as HTMLElement;\n\n                    //START ANIMATION\n                    const startAnimation = gsap\n                        .timeline({ onStart: () => {setAdjective(null)} })\n                        //ADJECTIVES\n                        .fromTo(\n                            \".pdg-we-are-container .pdg-we-are-adjectives-container .pdg-we-are-adjectives .pdg-we-are-adjective\",\n                            {\n                                visibility: \"hidden\",\n                                y: 32,\n                                opacity: 0,\n                            },\n                            {\n                                visibility: \"visible\",\n                                y: 0,\n                                margin: 0,\n                                opacity: 1,\n                                stagger: 0.1,\n                                onComplete: () => ScrollTrigger.refresh(),\n                            },\n                            \"entry\"\n                        )\n                        const sliderControls = container.querySelector('.pdg-slider-controls')\n                        if(sliderControls) {\n                            //ADJECTIVES CONTROLS\n                            startAnimation.fromTo(sliderControls,\n                                {\n                                    visibility: \"hidden\",\n                                    opacity: 0,\n                                },\n                                {\n                                    visibility: \"visible\",\n                                    opacity: 1,\n                                    delay: 0.8,\n                                },\n                                \"entry\"\n                            )\n                        }\n                        //DESCRIPTION\n                        startAnimation.fromTo(\n                            \".pdg-we-are-container .pdg-we-are-adjectives-description\",\n                            {\n                                yPercent: 12,\n                                opacity: 0,\n                            },\n                            {\n                                yPercent: 0,\n                                opacity: 1,\n                                delay: 0.7,\n                            },\n                            \"entry\"\n                        );\n\n                    //ANIMATION DELAY\n                    animationDelay(startAnimation, container);\n\n                    //TITLE ANIMATION\n                    textAnimation({\n                        tl: startAnimation,\n                        split: true,\n                        container: \".pdg-we-are-content\",\n                        elements: [\".pdg-we-are-title\"],\n                        from: { yPercent: 100 },\n                        to: {\n                            yPercent: 0,\n                            delay: 0.1,\n                        },\n                        keyframe: \"entry\",\n                    });\n\n                    //CHIP ANIMATION\n                    chipAnimation({\n                        tl: startAnimation,\n                        container: \".pdg-we-are-content\",\n                        keyframe: \"entry\",\n                    });\n\n                    \n                    //CHANGE COLOR\n                    ScrollTrigger.create({\n                        animation: startAnimation,\n                        trigger: \".pdg-we-are-container\",\n                        start: \"top 50%\",\n                        end:\"bottom 50%\",\n                        id: \"WEARE\",\n                        preventOverlaps: true,\n                        toggleActions: \"play reverse play reverse\",\n                        // markers: {startColor: \"red\", endColor: \"red\", fontSize: '30'},\n                        onEnter: () => {\n                                gsap.to(\".content-menu\", {\n                                    background: globalState.value.mode === 'normal' ? '#246399' : '#ffc0d5',\n                                }),\n                                gsap.to(\"body\", {\n                                    backgroundColor: globalState.value.mode === 'normal' ? '#246399' : '#ffc0d5',\n                                    overwrite: \"auto\"\n                                })\n                            },\n                        onLeaveBack: () =>{\n                                gsap.to(\"body\", {\n                                    backgroundColor: globalState.value.mode === 'normal' ? '#fff' : '#ee4266',\n                                    overwrite: \"auto\"\n                                })\n                                gsap.to( \".content-menu\", {\n                                    background: globalState.value.mode === 'normal' ? '#fff' : '#ee4266',\n                                })\n                                closeAll({});\n                        },\n                        onLeave: () => {\n                            closeAll({})\n                        },\n                    })\n                }\n            );\n        }\n    });\n</script>\n\n<template>\n    <section class=\"pdg-we-are-container pdg-container\">\n        <div class=\"row\">\n            <!-- CONTENT -->\n            <div class=\"pdg-we-are-content col-md-8\">\n                <Chip :title=\"translations?.['we-are']?.tag\" class=\"pink\" />\n                <h1 class=\"pdg-we-are-title pdg-header\">\n                    {{ translations?.['we-are']?.title }}\n                </h1>\n            </div>\n\n            <!-- ADJGECTIVES CONTAINER -->\n            <div class=\"pdg-we-are-adjectives-container col-md-4\">\n                <!-- ADJECTIVES -->\n                <ul class=\"pdg-we-are-adjectives pdg-scroll-x\">\n                    <li\n                        class=\"pdg-we-are-adjective pdg-title-h2-medium\"\n                        :class=\"[\n                            `pdg-adjective-${index}`,\n                            { active: currentAdjectiveIndex === index },\n                        ]\"\n                        v-for=\"(adjective, index) in adjectives\"\n                        :key=\"index\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        @mouseenter=\"setAdjective(index)\"\n                        @focusin=\"setAdjective(index)\"\n                    >\n                        <i class=\"icon-arrow-left\"></i>\n                        <span\n                            class=\"pdg-we-are-adjective-label\"\n                            :data-text=\"translations?.['we-are']?.adjectives?.[adjective]\"\n                        >\n                            {{ translations?.['we-are']?.adjectives?.[adjective] }}\n                        </span>\n                    </li>\n                </ul>\n\n                <!-- SLIDES CONTAINER -->\n                <div class=\"pdg-we-are-adjectives-slides-container\">\n                    <!-- STUBBORN -->\n                    <div class=\"pdg-we-are-adjectives-slide pdg-slide-1\">\n                        <AnimatedImage\n                            class=\"pdg-image-1\"\n                            :src=\"`/assets/img/${globalState.mode}/we-are/1/${globalState.mode === 'crazy' ? 'gabriele-in-cammino-impavido': 'product-owner-at-work'}.webp`\"\n                            :alt=\"translations?.['we-are']?.['alt-images']?.stubborn?.['1']\"\n                            sizes=\"40vw md:25vw\"\n                        />\n\n                        <AnimatedImage\n                            class=\"pdg-image-2\"\n                            :src=\"`/assets/img/${globalState.mode}/we-are/1/${globalState.mode === 'crazy' ? 'nora-marco-dev-designer-impavidi': 'designer-vs-dev'}.webp`\"\n                            :alt=\"translations?.['we-are']?.['alt-images']?.stubborn?.['2']\"\n                            sizes=\"60vw md:33.33333333vw\"\n                        />\n                    </div>\n\n                    <!-- CURIOUS -->\n                    <div class=\"pdg-we-are-adjectives-slide pdg-slide-2\">\n                        <AnimatedImage\n                            class=\"pdg-image-1\"\n                            :src=\"`/assets/img/${globalState.mode}/we-are/2/${globalState.mode === 'crazy' ? 'igli-alessandro-tecnici-hardware': 'developer-designer-work'}.webp`\"\n                            :alt=\"translations?.['we-are']?.['alt-images']?.curious?.['1']\"\n                            sizes=\"40vw md:25vw\"\n                        />\n\n                        <AnimatedImage\n                            class=\"pdg-image-2\"\n                            :src=\"`/assets/img/${globalState.mode}/we-are/2/${globalState.mode === 'crazy' ? 'laboratorio-di-disegno-artistico-per-dev': 'in-house-training'}.webp`\"\n                            :alt=\"translations?.['we-are']?.['alt-images']?.curious?.['2']\"\n                            sizes=\"60vw md:33.33333333vw\"\n                        />\n\n                        <AnimatedImage\n                            class=\"pdg-image-3\"\n                            :src=\"`/assets/img/${globalState.mode}/we-are/2/${globalState.mode === 'crazy' ? 'mirko-giocoliere': 'networking'}.webp`\"\n                            :alt=\"translations?.['we-are']?.['alt-images']?.curious?.['3']\"\n                            sizes=\"60vw md:25vw\"\n                        />\n                    </div>\n\n                    <!-- CREATIVE -->\n                    <div class=\"pdg-we-are-adjectives-slide pdg-slide-3\">\n                        <AnimatedImage\n                            class=\"pdg-image-1\"\n                            :src=\"`/assets/img/${globalState.mode}/we-are/3/${globalState.mode === 'crazy' ? 'pek-in-vetrina': 'corporate-gadgets'}.webp`\"\n                            :alt=\"translations?.['we-are']?.['alt-images']?.creative?.['1']\"\n                            sizes=\"40vw md:25vw\"\n                        />\n\n                        <AnimatedImage\n                            class=\"pdg-image-2\"\n                            :src=\"`/assets/img/${globalState.mode}/we-are/3/${globalState.mode === 'crazy' ? 'giacomo-freestyle': 'agile-value'}.webp`\"\n                            :alt=\"translations?.['we-are']?.['alt-images']?.creative?.['2']\"\n                            sizes=\"60vw md:25vw\"\n                        />\n                    </div>\n\n                    <!-- GEEKS -->\n                    <div class=\"pdg-we-are-adjectives-slide pdg-slide-4\">\n                        <AnimatedImage\n                            class=\"pdg-image-1\"\n                            :src=\"`/assets/img/${globalState.mode}/we-are/4/${globalState.mode === 'crazy' ? 'sexy-matteo' : 'coding-team'}.webp`\"\n                            :alt=\"translations?.['we-are']?.['alt-images']?.geeks?.['1']\"\n                            sizes=\"40vw md:25vw\"\n                        />\n\n                        <AnimatedImage\n                            class=\"pdg-image-2\"\n                            :src=\"`/assets/img/${globalState.mode}/we-are/4/${globalState.mode === 'crazy' ? 'michele-shocked': 'vr-visor-test'}.webp`\"\n                            :alt=\"translations?.['we-are']?.['alt-images']?.geeks?.['2']\"\n                            sizes=\"60vw md:33.33333333vw\"\n                        />\n\n                        <AnimatedImage\n                            class=\"pdg-image-3\"\n                            :src=\"`/assets/img/${globalState.mode}/we-are/4/${globalState.mode === 'crazy' ? 'antonio-posing-during-catwalk': 'training-events'}.webp`\"\n                            :alt=\"translations?.['we-are']?.['alt-images']?.geeks?.['3']\"\n                            sizes=\"60vw md:25vw\"\n                        />\n                    </div>\n\n                    <!-- IMPERFECT -->\n                    <div class=\"pdg-we-are-adjectives-slide pdg-slide-5\">\n                        <AnimatedImage\n                            class=\"pdg-image-1\"\n                            :src=\"`/assets/img/${globalState.mode}/we-are/5/${globalState.mode === 'crazy' ? 'tekken-match': 'blooper-3'}.webp`\"\n                            :alt=\"translations?.['we-are']?.['alt-images']?.imperfect?.['1']\"\n                            sizes=\"40vw md:25vw\"\n                        />\n\n                        <AnimatedImage\n                            class=\"pdg-image-2\"\n                            :src=\"`/assets/img/${globalState.mode}/we-are/5/${globalState.mode === 'crazy' ? 'gab-multitasking': 'blooper-1'}.webp`\"\n                            :alt=\"translations?.['we-are']?.['alt-images']?.imperfect?.['2']\"\n                            sizes=\"60vw md:33.33333333vw\"\n                        />\n\n                        <AnimatedImage\n                            class=\"pdg-image-3\"\n                            :src=\"`/assets/img/${globalState.mode}/we-are/5/${globalState.mode === 'crazy' ? 'castello-di-carte': 'blooper-2'}.webp`\"\n                            :alt=\"translations?.['we-are']?.['alt-images']?.imperfect?.['3']\"\n                            sizes=\"60vw md:30vw\"\n                        />\n                    </div>\n                </div>\n\n                <!-- SLIDER CONTROLS -->\n                <SliderControls\n                    :prevAction=\"() => prevNextAdjective('prev')\"\n                    :nextAction=\"() => prevNextAdjective('next')\"\n                    class=\"flex-justify-end pink\"\n                />\n\n                <!-- DESCRIPTION -->\n                <p\n                    class=\"pdg-we-are-adjectives-description pdg-body-2\"\n                    v-html=\"translations?.['we-are'].description\"\n                />\n            </div>\n        </div>\n    </section>\n</template>\n\n<style scoped lang=\"scss\">\n    @import \"../scss/includes.scss\";\n\n    //CONTAINER\n    .pdg-we-are-container {\n        min-height: 100vh;\n        color: var(--body-2);\n\n        overflow: hidden;\n\n        position: relative;\n\n        padding-bottom: vh(40);\n\n        @media screen and (min-width: map-get($breakpoints, md)) {\n            padding-bottom: vh(60);\n        }\n\n        //CONTENT\n        .pdg-we-are-content {\n            padding-top: vh(40);\n\n            z-index: 1;\n\n            @media screen and (min-width: map-get($breakpoints, md)) {\n                padding-top: rem(102);\n            }\n\n            //CONTENT TITLE\n            .pdg-we-are-title {\n                margin-top: rem(16);\n                margin-bottom: rem(8);\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    margin-bottom: 0;\n                }\n            }\n        }\n\n        //ADJECTIVES CONTAINER\n        .pdg-we-are-adjectives-container {\n            z-index: 0;\n\n            @media screen and (min-width: map-get($breakpoints, md)) {\n                margin-top: vh(232);\n            }\n\n            //ADJECTIVES\n            .pdg-we-are-adjectives {\n                @include flex($align-items: center);\n\n                gap: rem(32);\n\n                list-style: none;\n                margin: rem(24) 0 rem(16);\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    @include flex($align-items: flex-start, $flex-direction: column);\n\n                    gap: rem(8);\n\n                    margin: 0;\n                    margin-bottom: vh(110);\n\n                    padding: 0;\n                }\n\n                //ADJECTIVE\n                .pdg-we-are-adjective {\n                    position: relative;\n\n                    //ADJECTIVE LEFT DOT\n                    &:nth-child(1n + 2) {\n                        &:before {\n                            content: \"\";\n\n                            display: block;\n\n                            width: rem(4);\n                            height: rem(4);\n\n                            background: var(--body-2);\n\n                            border-radius: rem(50);\n\n                            position: absolute;\n                            top: 50%;\n                            left: rem(-16);\n\n                            transform: translateY(-50%);\n\n                            @media screen and (min-width: map-get($breakpoints, md)) {\n                                display: none;\n                            }\n                        }\n                    }\n\n                    @media screen and (min-width: map-get($breakpoints, md)) {\n                        @include flex($align-items: center);\n                    }\n\n                    //ARROW\n                    .icon-arrow-left {\n                        display: none;\n\n                        @include typography(40, 400, 40);\n\n                        @media screen and (min-width: map-get($breakpoints, md)) {\n                            display: block;\n                            transition: $transition;\n                            font-size: 0;\n                        }\n                    }\n\n                    //LABEL\n                    .pdg-we-are-adjective-label {\n                        @media screen and (max-width: map-get($breakpoints, md)) {\n                            @include hover-link-change-font-weight;\n                        }\n                    }\n\n                    //ACTIVE\n                    &.active {\n                        //ARROW\n                        .icon-arrow-left {\n                            @media screen and (min-width: map-get($breakpoints, md)) {\n                                margin-right: rem(12);\n\n                                font-size: rem(40);\n                            }\n\n                            @media screen and (min-width: map-get($breakpoints, lg)) {\n                                font-size: vw(40, 1440);\n                            }\n                        }\n\n                        //LABEL\n                        .pdg-we-are-adjective-label {\n                            font-weight: 700;\n                        }\n                    }\n                }\n            }\n\n            //SLIDES CONTAINER\n            .pdg-we-are-adjectives-slides-container {\n                height: vh(240);\n                min-height: rem(160);\n\n                margin: rem(40) 0;\n\n                @media screen and (min-width: map-get($breakpoints, sm)) {\n                    height: vh(340);\n                    min-height: rem(280);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    width: 100%;\n                    height: 100vh;\n\n                    margin: 0;\n\n                    padding: 0 rem(map-get($gutter-container, md));\n\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n\n                    z-index: -1;\n                }\n\n                //SLIDE\n                .pdg-we-are-adjectives-slide {\n                    @include flex($align-items: flex-start);\n\n                    gap: rem(16);\n\n                    height: 100%;\n\n                    @extend .pdg-scroll-x;\n\n                    @media screen and (min-width: map-get($breakpoints, md)) {\n                        width: calc(100% - rem(map-get($gutter-container, md)) * 2);\n\n                        margin: 0;\n\n                        padding: 0;\n\n                        position: absolute;\n                        top: 0;\n                        left: rem(map-get($gutter-container, md));\n                    }\n\n                    //SLIDE 1 \n                    &.pdg-slide-1,\n                    &.pdg-slide-3 {\n                        .pdg-animated-image-container {\n\n                            &.pdg-image-1 {\n                                width: calc(40% - rem(8));\n\n                                @media screen and (min-width: map-get($breakpoints, md)) {\n                                    width: 25%;\n\n                                    left: 0;\n                                    bottom: 0;\n                                }\n\n                                @media screen and (min-width: map-get($breakpoints, lg)) {\n                                    height: vh(380);\n                                }\n\n                                @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($breakpoints, lg) - rem(0.1))) and (min-height: map-get($breakpoints, md)) {\n                                    width: 33.33333333%;\n\n                                    left: 0;\n                                    bottom: calc(8.33333333% / 2);\n                                }\n                            }\n\n                            &.pdg-image-2 {\n                                width: calc(60% - rem(8));\n\n                                @media screen and (min-width: map-get($breakpoints, md)) {\n                                    width: 25%;\n                                    height: 25%;\n\n                                    left: 33.33333333%;\n                                    bottom: 41.66666667%;\n                                }\n\n                                @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($breakpoints, lg) - rem(0.1))) and (min-height: map-get($breakpoints, md)) {\n                                    width: 50%;\n                                    height: 25%;\n\n                                    left: 8.33333333%;\n                                    bottom: calc(50% - 8.33333333% / 2);\n                                }\n\n                                @media screen and (min-width: map-get($breakpoints, lg)) {\n                                    left:33.33333333%;\n                                }\n                            }\n                        }\n                    }\n\n                    //SLIDE 2 - 3 - 4 - 5 - 6\n                    \n                    &.pdg-slide-2,\n                    &.pdg-slide-4,\n                    &.pdg-slide-5,\n                    &.pdg-slide-6 {\n                        .pdg-animated-image-container {\n                            @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($breakpoints, lg) - rem(0.1))) and (min-height: 1100px) {\n                                max-height: rem(240);\n                            }\n\n                            &.pdg-image-1 {\n                                width: calc(40% - rem(8));\n\n                                @media screen and (min-width: map-get($breakpoints, md)) {\n                                    width: calc(25% - (8.33333333% / 4));\n\n                                    left: 0;\n                                    bottom: 8.33333333%;\n\n                                    @media screen and (min-height: 800px) {\n                                        bottom: 25%;\n                                    }\n                                }\n\n                                @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($breakpoints, lg) - rem(0.1))) and (min-height: 1100px) {\n                                    width: 41.66666667%;\n\n                                    left: 0;\n                                    bottom: 25%;\n                                }\n\n                                @media screen and (min-width: map-get($breakpoints, lg)) {\n                                    width: calc(25% - (8.33333333% / 2));\n                                }\n                            }\n\n                            &.pdg-image-2 {\n                                width: calc(60% - rem(8));\n\n                                @media screen and (min-width: map-get($breakpoints, md)) {\n                                    width: 33.33333333%;\n\n                                    top: 25%;\n                                    left: calc(\n                                        16.66666667% + rem(map-get($gutter-container, md)) *\n                                            1.5\n                                    );\n                                    padding-bottom: rem(32);\n                                }\n\n                                @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($breakpoints, lg) - rem(0.1))) and (min-height: 1100px) {\n                                    width: 50%;\n\n                                    top: calc(25% + 8.33333333% / 1.5);\n                                    left: 8.33333333%;\n                                }\n\n                                @media screen and (min-width: map-get($breakpoints, lg)) {\n                                    left: calc(25%);\n                                }\n                            }\n\n                            &.pdg-image-3 {\n                                width: calc(60% - rem(8));\n\n                                @media screen and (min-width: map-get($breakpoints, md)) {\n                                    width: calc(25%);\n\n                                    left: calc(\n                                        16.66666667% + rem(map-get($gutter-container, md)) *\n                                            1.5\n                                    );\n                                    bottom: 0;\n                                }\n\n                                @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($breakpoints, lg) - rem(0.1))) and (min-height: 1100px) {\n                                    width: 41.66666667%;\n\n                                    left: 8.33333333%;\n                                }\n\n                                @media screen and (min-width: map-get($breakpoints, lg)) {\n                                    left: calc(25%);\n                                }\n                            }\n                        }\n                    }\n                }\n\n                //IMAGE\n                .pdg-animated-image-container {\n                    height: vh(180);\n                    min-height: rem(120);\n\n                    @media screen and (min-width: map-get($breakpoints, sm)) {\n                        height: vh(280);\n                        min-height: rem(240);\n                    }\n\n                    @media screen and (min-width: map-get($breakpoints, md)) {\n                        position: absolute;\n                        height: vh(320);\n                    }\n\n                    &:nth-child(2n + 1) {\n                        margin-top: auto;\n\n                        @media screen and (min-width: map-get($breakpoints, md)) {\n                            margin-top: 0;\n                        }\n                    }\n\n                    &:deep(.pdg-animated-image-overlay) {\n                        background: var(--dark-pink);\n                    }\n                }\n            }\n\n            //SLIDER CONTROLS\n            .pdg-slider-controls {\n                margin-bottom: rem(16);\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    display: none;\n                }\n            }\n\n            //DESCRIPTION\n            .pdg-we-are-adjectives-description {\n                width: 66.66666667%;\n\n                margin: 0;\n\n                color: var(--body-4);\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    width: 83.33333333%;\n                }\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import gsap from \"gsap\";\n    import { ScrollTrigger } from \"gsap/all\";\n\n    const brands = [\n        {\n            name: \"paradigma\",\n            tags: [\"branding\"],\n            href: \"https://www.behance.net/paradiginnovation\",\n            img: [\n                'rebranding-project-paradigma-manifesto-agile',\n                'rebranding-project-paradigma-t-shirt',\n                'rebranding-project-paradigma-gadget',\n                'rebranding-project-paradigma-bag'\n            ]\n        },\n        {\n            name: \"io-comunico\",\n            tags: [\"branding\", \"webapp-design\", \"ui-library\", \"illustration-library\"],\n            href: \"https://www.behance.net/gallery/175173779/-Io-comunico\",\n            img: [\n                'webapp-project-iocomunico',\n                'webapp-project-iocomunico-ui-library',\n                'webapp-project-iocomunico-illustrations',\n                'webapp-project-iocomunico-brand-logo'\n            ]\n        },\n        {\n            name: \"ledgenda\",\n            tags: [\"branding\", \"webapp-design\", \"development\"],\n            href: \"https://www.behance.net/gallery/113515539/-Ledgenda-branding\",\n            img: [\n                'brand-identity-project-ledgenda',\n                'brand-identity-project-ledgenda-brand-kit',\n                'brand-identity-project-ledgenda-summary',\n                'brand-identity-project-ledgenda-typography'\n            ]\n        },\n        {\n            name: \"nutribees\",\n            tags: [ \"webapp-design\", \"development\"],\n            href: \"https://www.behance.net/gallery/154696249/Nutribees-dashboard-design\",\n            img: [\n                'webapp-project-nuntribees',\n                'webapp-project-nutribees-ui-elements',\n                'webapp-project-nutribees-dashboard',\n                'webapp-project-nutribees-typography'\n            ]\n        },\n        {\n            name: \"pokehouse\",\n            tags: [\"webapp-design\", \"development\"],\n            href: \"https://www.behance.net/gallery/111281957/Poke-House\",\n            img: [\n                'webapp-project-poke-house',\n                'mobile-webapp-poke-house',\n                'webapp-redesign-project-poke-house',\n                'desktop-webapp-poke-house'\n            ]\n        },\n        {\n            name: \"vesti-il-futuro\",\n            tags: [\"webapp-design\", \"lead-generation\", \"gamification\"],\n            href: \"https://www.behance.net/gallery/130624267/-Vesti-il-futuro\",\n            img: [\n                'webapp-project-onlus-manitese',\n                'desktop-webapp-vesti-il-futuro',\n                'webapp-project-vesti-il-futuro',\n                'mobile-webapp-onlus-manitese'\n            ]\n        },\n        {\n            name: \"gvp\",\n            tags: [\"personal-branding\"],\n            href: \"https://www.behance.net/gallery/166138913/GVP-Personal-Branding\",\n            img: [\n                'personal-branding-GVP',\n                'personal-branding-GVP-press-kit',\n                'personal-branding-giuseppe-vincenzo-presti',\n                'personal-braniding-GVP-headed-paper-business-cards'\n            ]\n        },\n        {\n            name: \"multicanapa\",\n            tags: [\"branding\"],\n            href: \"https://www.behance.net/gallery/143844677/-multicanapa-branding\",\n            img: [\n                'brand-identity-project-multicanapa',\n                'brand-identity-project-multicanapa-cbd-oil-label',\n                'brand-identity-project-multicanapa-paper-kit',\n                'brand-identity-project-multicanapa-stickers'\n            ]\n        }\n    ];\n\n    const currentBrandIndex = ref<number>(0);\n    const isMobile = ref<boolean>(true);\n\n    let animationBlock = true;\n\n    const { locale } = useI18n();\n    const globalState = useGlobalState();\n\n    const { data: translations } = await useAsyncData('translations', async () => {\n        const res = await $fetch<any>(`/api/translations?lang=${locale.value}&mode=${globalState.value.mode}`)\n        return res\n    }, { watch: [locale, globalState] })\n\n    const animationBlockTLProps = {\n        onStart: () => {\n            animationBlock = true;\n        },\n        onComplete: () => {\n            animationBlock = false;\n        },\n    };\n\n    //PREV NEXT BRAND\n    const prevNextBrand = (direction: \"prev\" | \"next\") => {\n        if (!animationBlock) {\n            const targetIndex = currentBrandIndex.value + (direction === \"prev\" ? -1 : 1);\n\n            const index =\n                direction === \"prev\"\n                    ? targetIndex < 0\n                        ? brands.length - 1\n                        : targetIndex\n                    : targetIndex > brands.length - 1\n                    ? 0\n                    : targetIndex;\n\n            changeBrandAnimation({\n                direction,\n                newIndex: index,\n            });\n        }\n    };\n\n    //CHANGE BRAND ANIMATION\n    const changeBrandAnimation = ({\n        direction,\n        newIndex,\n    }: {\n        direction: \"prev\" | \"next\";\n        newIndex: number;\n    }) => {\n        const yValue = 20 * -1;\n\n        gsap.timeline({ ...animationBlockTLProps })\n            //MOVE IMAGE COLORED OVERLAY TO BOTTOM\n            .to(\".pdg-we-do-container .pdg-animated-image-overlay\", {\n                y: \"100%\",\n                opacity: 1,\n                duration: 0,\n            })\n            //SHOW IMAGE COLORED OVERLAY\n            .to(\n                \".pdg-we-do-container .pdg-animated-image-overlay\",\n                {\n                    y: 0,\n                    duration: 0.3,\n                },\n                \"change\"\n            )\n            //HIDE BRAND INFO\n            .to(\n                \".pdg-we-do-container .pdg-brand-info.active .pdg-fade-in\",\n                {\n                    opacity: 0,\n                    y: yValue,\n                    stagger: 0.1,\n                    onComplete: () => {\n                        currentBrandIndex.value = newIndex;\n                    },\n                },\n                \"change\"\n            )\n            //ANIMATED IMAGE SCALE 1.1\n            .to(`.pdg-we-do-container .pdg-animated-image`, {\n                opacity: 1,\n                scale: 1.1,\n                duration: 0,\n            })\n            //SET BRAND INFO BOTTOM\n            .to(`.pdg-we-do-container .pdg-brand-info-${newIndex} .pdg-fade-in`, {\n                opacity: 0,\n                y: -yValue,\n                duration: 0,\n            })\n            //SHOW BRAND INFO\n            .to(\n                `.pdg-we-do-container .pdg-brand-info-${newIndex} .pdg-fade-in`,\n                {\n                    opacity: 1,\n                    y: 0,\n                    stagger: 0.1,\n                },\n                \"end\"\n            )\n            //HIDE IMAGE COLORED OVERLAY\n            .to(\n                \".pdg-we-do-container .pdg-animated-image-overlay\",\n                {\n                    y: \"-100%\",\n                    duration: 0.3,\n                },\n                \"end\"\n            )\n            //ANIMATED IMAGE SCALE 1\n            .to(\n                `.pdg-we-do-container .pdg-animated-image`,\n                {\n                    scale: 1,\n                    duration: 0.3,\n                },\n                \"end\"\n            );\n    };\n\n    onMounted(() => {\n        if (process.client) {\n\n            const container = document.querySelector(\".pdg-we-do-container\") as HTMLElement;\n\n            if (container) {\n                //GSAP BREAKPOINTS\n                const mm = gsap.matchMedia(),\n                    breakPoint = 1024;\n\n                mm.add(\n                    {\n                        isDesktop: `(min-width: ${breakPoint}px)`,\n                        isMobile: `(max-width: ${breakPoint - 1}px)`,\n                    },\n                    ({ conditions }) => {\n                        const { isDesktop } = conditions as gsap.Conditions;\n\n                        //IS DESKTOP\n                        if (isDesktop) {\n                            isMobile.value = false;\n                        }\n\n                        //START ANIMATION\n                        const startAnimation = gsap\n                            .timeline({ ...animationBlockTLProps })\n                            //FADE\n                            .fromTo(\n                                \".pdg-we-do-container .pdg-fade\",\n                                {\n                                    opacity: 0,\n                                },\n                                {\n                                    opacity: 1,\n                                },\n                                \"entry\"\n                            )\n                            //FADE IN\n                            .fromTo(\n                                [\n                                    \".pdg-we-do-container .pdg-title-container .pdg-fade-in\",\n                                    \".pdg-we-do-container .pdg-description .pdg-fade-in\",\n                                    \".pdg-we-do-container .active .pdg-fade-in\",\n                                ],\n                                {\n                                    opacity: 0,\n                                    y: 20,\n                                },\n                                {\n                                    opacity: 1,\n                                    y: 0,\n                                    stagger: 0.1,\n                                },\n                                \"entry\"\n                            );\n\n                        //ANIMATION DELAY\n                        animationDelay(startAnimation, container);\n\n                        //OPEN IMAGE ANIMATION\n                        imageAnimation({\n                            tl: startAnimation,\n                            container: `.pdg-we-do-container .active`,\n                            keyframe: \"entry\",\n                        }).open();\n\n                        //TITLE ANIMATION\n                        textAnimation({\n                            tl: startAnimation,\n                            split: true,\n                            container: \".pdg-we-do-container .pdg-title-content\",\n                            elements: [\".pdg-header\"],\n                            from: { yPercent: 100 },\n                            to: { yPercent: 0 },\n                            keyframe: \"entry\",\n                        });\n\n                        //CHIP ANIMATION\n                        chipAnimation({\n                            tl: startAnimation,\n                            container: \".pdg-we-do-container\",\n                            keyframe: \"entry\",\n                        });\n\n                        ScrollTrigger.create({\n                        animation: startAnimation,\n                        trigger: \".pdg-we-do-container\",\n                        start: \"top 50%\",\n                        end:\"bottom 50%\",\n                        id: \"WEDO\",\n                        preventOverlaps: true,\n                        toggleActions: \"play reverse play reverse\",\n                        // markers: {startColor: \"black\", endColor: \"red\", fontSize: '30'},\n                        onEnter: () => {\n                            setTimeout (() => {\n                                gsap.to(\"body\", {\n                                    backgroundColor: '#fff',\n                                    overwrite: \"auto\"\n                                }),\n                                gsap.to( \".content-menu\", {\n                                    background: '#fff',\n                                })\n                            }, 0)\n                        },\n                        onLeaveBack: () => {\n                            setTimeout (() => {\n                                gsap.to(\"body\", {\n                                    backgroundColor: globalState.value.mode === 'normal' ? '#246399' : '#ffc0d5',\n                                    overwrite: \"auto\"\n                                })\n                                gsap.to( \".content-menu\", {\n                                    background: globalState.value.mode === 'normal' ? '#246399' : '#ffc0d5',\n                                })\n                            }, 0)\n                        }});\n                    }\n                );\n            }\n        }\n    });\n</script>\n\n<template>\n    <section class=\"pdg-we-do-container pdg-container pdg-container-height\">\n        <div class=\"row\">\n            <!-- TITLE CONTAINER -->\n            <div class=\"pdg-title-container col-md-12\">\n                <!-- TITLE CONTAINER ROW -->\n                <div class=\"pdg-title-container-row row\">\n                    <!-- TITLE CONTENT -->\n                    <div class=\"pdg-title-content col-md-6 col-lg-5\">\n                        <Chip :title=\"translations?.['we-do'].chip\" class=\"blue\" />\n                        <h1 class=\"pdg-title pdg-header\">\n                            {{ translations?.['we-do']?.title }}\n                        </h1>\n                    </div>\n\n                    <!-- DESCRIPTION -->\n                    <p\n                        class=\"pdg-description pdg-body-2 pdg-remove-br-md col-10 col-md-3 pdg-fade-in\"\n                        v-html=\"translations?.['we-do']?.description\"\n                    />\n                </div>\n            </div>\n\n            <!-- BRAND CONTAINER -->\n            <div class=\"pdg-brand-container col-md-12\">\n                <!-- BRAND CONTAINER ROW -->\n                <div class=\"pdg-brand-container-row row\">\n                    <!-- BRAND IMAGES CONTAINER -->\n                    <div class=\"pdg-brand-images-container col-md-8\">\n                        <!-- BRAND IMAGES CONTENT (CYCLED) -->\n                        <div\n                            class=\"pdg-brand-images-content\"\n                            :class=\"currentBrandIndex === index ? 'active' : ''\"\n                            :aria-hidden=\"currentBrandIndex === index\"\n                            v-for=\"({ name: brandName, img }, index) in brands\"\n                            :key=\"index\"\n                        >\n                            <AnimatedImage\n                                class=\"pdg-brand-image\"\n                                :src=\"`/assets/img/we-do/${brandName}/${img[0]}.webp`\"\n                                :alt=\"translations?.['we-do']?.brand?.[brandName]?.alt?.['1']\"\n                                sizes=\"50vw md:50vw\"\n                            />\n                            <AnimatedImage\n                                class=\"pdg-brand-image\"\n                                :src=\"`/assets/img/we-do/${brandName}/${img[1]}.webp`\"\n                                :alt=\"translations?.['we-do']?.brand?.[brandName]?.['alt']?.['2']\"\n                                sizes=\"50vw md:50vw\"\n                            />\n                            <AnimatedImage\n                                class=\"pdg-brand-image\"\n                                :src=\"`/assets/img/we-do/${brandName}/${img[2]}.webp`\"\n                                :alt=\"translations?.['we-do']?.brand?.[brandName]?.alt?.['3']\"\n                                sizes=\"50vw md:50vw\"\n                            />\n                            <AnimatedImage\n                                class=\"pdg-brand-image\"\n                                :src=\"`/assets/img/we-do/${brandName}/${img[3]}.webp`\"\n                                :alt=\"translations?.['we-do']?.brand?.[brandName]?.alt?.['4']\"\n                                sizes=\"50vw md:50vw\"\n                            />\n                        </div>\n                    </div>\n\n                    <!-- BRAND INFO CONTAINER -->\n                    <div class=\"pdg-brand-info-container col-md-3 pdg-fade\">\n                        <!-- SLIDER CONTROLS -->\n                        <SliderControls\n                            :prevAction=\"() => prevNextBrand('prev')\"\n                            :nextAction=\"() => prevNextBrand('next')\"\n                            class=\"dark-blue\"\n                        />\n\n                        <!-- BRAND INFO (CYCLED)-->\n                        <div\n                            class=\"pdg-brand-info\"\n                            :class=\"{\n                                active: currentBrandIndex === index,\n                                ['pdg-brand-info-' + index]: true,\n                            }\"\n                            :aria-hidden=\"currentBrandIndex === index\"\n                            v-for=\"({ name: brandName, tags, href }, index) in brands\"\n                            :key=\"index\" \n                        >\n                            <!-- BRAND INFO TITLE CONTAINER -->\n                            <div class=\"pdg-brand-info-title-container\">\n                                <!-- BRAND INFO TITLE -->\n                                <h2 class=\"pdg-brand-info-title pdg-subhead-1 pdg-fade-in\">\n                                    {{ translations?.['we-do']?.brand?.[brandName]?.title }}\n                                </h2>\n\n                                <!-- BRAND INFO TAGS -->\n                                <div class=\"pdg-brand-info-tags pdg-label-1 pdg-fade-in\">\n                                    <span class=\"pdg-tag\" v-for=\"(tag, index) in tags\" :key=\"index\">{{\n                                        translations?.['we-do']?.tags?.[tag]\n                                    }}</span>\n                                </div>\n                            </div>\n\n                            <!-- BRAND INFO DESCRIPTION -->\n                            <p\n                                class=\"pdg-brand-info-description pdg-body-2 pdg-fade-in\"\n                                :aria-hidden=\"isMobile\"\n                            >\n                                {{ translations?.['we-do']?.brand?.[brandName]?.description }}\n                            </p>\n\n                            <!-- BRAND LINK -->\n                            <ArrowLink\n                                :text=\"translations?.['we-do']?.brand?.[brandName]?.cta\"\n                                :href=\"href\"\n                                :external=\"true\"\n                                class=\"pdg-fade-in\"\n                            />\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </section>\n</template>\n\n<style scoped lang=\"scss\">\n    @import \"../scss/includes.scss\";\n\n    //CONTAINER\n    .pdg-we-do-container {\n        min-height: 100vh;\n\n        color: var(--dark-blue);\n\n        padding-top: rem(114);\n        padding-bottom: rem(40);\n\n        @media screen and (min-width: map-get($breakpoints, md)) {\n            padding-top: vh(129);\n            padding-bottom: vh(114);\n        }\n\n        //TITLE CONTAINER\n        .pdg-title-container {\n            margin-bottom: rem(24);\n\n            @media screen and (min-width: map-get($breakpoints, md)) {\n                margin-bottom: rem(100);\n            }\n\n            //TABLET\n            @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($horizontal-breakpoints, md) - rem(0.1))) and (min-height: map-get($breakpoints, md)) {\n                margin-bottom: rem(44);\n            }\n\n            //TITLE CONTAINER ROW\n            .pdg-title-container-row {\n                //TITLE\n                \n                .pdg-title {\n                    margin: rem(8) 0;\n\n                    @media screen and (min-width: map-get($breakpoints, md)) {\n                        margin-bottom: 0;\n                    }\n                }\n            }\n\n            //DESCRIPTION\n            .pdg-description {\n                margin-bottom: 0;\n                \n                align-content: end;\n\n                //TABLET\n                @media screen and (min-width: map-get($breakpoints, md)) and (max-width: map-get($horizontal-breakpoints, md)){\n                    width: 33.33333333%;\n                }\n\n                @media screen and (max-width: calc(map-get($breakpoints, md) - 1px)) {\n                    font-size: rem(16);\n                    line-height: rem(20);\n                }\n            }\n        }\n\n        //BRAND CONTAINER\n        .pdg-brand-container {\n            //BRAND CONTAINER ROW\n            .pdg-brand-container-row {\n                //BRAND IMAGES CONTAINER\n                .pdg-brand-images-container {\n                    margin-bottom: rem(32);\n\n                    //TABLET\n                    @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($horizontal-breakpoints, md) - rem(0.1))) and (min-height: map-get($breakpoints, md)) {\n                        width: 100%;\n                    }\n\n                    @media screen and (min-width: map-get($breakpoints, md)) {\n                        margin-bottom: 0;\n                    }\n\n                    //BRAND IMAGES CONTENT (CYCLED)\n                    .pdg-brand-images-content {\n                        display: grid;\n\n                        grid-template-columns: repeat(2, 1fr);\n\n                        gap: rem(8);\n\n                        @media screen and (min-width: map-get($breakpoints, md)) {\n                            gap: rem(16);\n                        }\n\n                        //BRAND IMAGE\n                        .pdg-brand-image {\n                            :deep(.pdg-animated-image-overlay) {\n                                background: var(--green);\n                            }\n\n                            //FIRST IMAGE\n                            &:nth-child(1) {\n                                grid-row: 1;\n                                grid-column: 1;\n\n                                min-height: rem(96);\n                                height: vh(96);\n\n                                @media screen and (min-width: map-get($breakpoints, md)) {\n                                    height: vh(180);\n                                }\n                            }\n\n                            //SECOND IMAGE\n                            &:nth-child(2) {\n                                grid-row: 1/3;\n                                grid-column: 2;\n\n                                min-height: rem(148);\n                                height: vh(148);\n\n                                @media screen and (min-width: map-get($breakpoints, md)) {\n                                    height: vh(280);\n                                }\n                            }\n\n                            //THIRD IMAGE\n                            &:nth-child(3) {\n                                grid-row: 2/4;\n                                grid-column: 1;\n\n                                min-height: rem(140);\n                                height: vh(140);\n\n                                @media screen and (min-width: map-get($breakpoints, md)) {\n                                    height: vh(260);\n                                }\n                            }\n\n                            //FOURTH IMAGE\n                            &:nth-child(4) {\n                                grid-row: 3;\n                                grid-column: 2;\n\n                                min-height: rem(80);\n                                height: vh(88);\n\n                                @media screen and (min-width: map-get($breakpoints, md)) {\n                                    height: vh(160);\n                                }\n                            }\n                        }\n                    }\n                }\n\n                //BRAND INFO CONTAINER\n                .pdg-brand-info-container {\n                    @media screen and (min-width: map-get($breakpoints, md)) {\n                        padding-left: rem(24);\n                    }\n\n                    //TABLET\n                    @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($horizontal-breakpoints, md) - rem(0.1))) {\n                        width: 33.33333333%;\n\n                        @media screen and (min-height: map-get($breakpoints, md)) {\n                            width: 100%;\n\n                            padding-left: rem(8);\n                        }\n                    }\n\n                    //SLIDER CONTROLS\n                    .pdg-slider-controls {\n                        margin-bottom: rem(16);\n\n                        @media screen and (min-width: map-get($breakpoints, md)) {\n                            margin-bottom: rem(82);\n                        }\n\n                        //TABLET\n                        @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($horizontal-breakpoints, md) - rem(0.1))) and (min-height: map-get($breakpoints, md)) {\n                            margin-top: rem(24);\n                            margin-bottom: rem(32);\n                        }\n                    }\n\n                    //BRAND INFO (CYCLED)\n                    .pdg-brand-info {\n                        @include flex($flex-direction: column);\n\n                        gap: rem(16);\n\n                        //BRAND INFO TITLE CONTAINER\n                        .pdg-brand-info-title-container {\n                            //BRAND INFO TITLE\n                            .pdg-brand-info-title {\n                                margin-bottom: rem(8);\n\n                                @media screen and (max-width: calc(map-get($breakpoints, md) - rem(1))) {\n                                    font-size: rem(24);\n                                }\n\n                                @media screen and (min-width: map-get($breakpoints, md)) {\n                                    margin-bottom: rem(12);\n                                }\n                            }\n\n                            //BRAND INFO TAGS\n                            .pdg-brand-info-tags {\n                                @include flex($flex-wrap: wrap);\n\n                                gap: rem(12);\n\n                                .pdg-tag {\n                                    display: inline-block;\n                                }\n                            }\n                        }\n\n                        //BRAND INFO DESCRIPTION\n                        .pdg-brand-info-description {\n                            display: none;\n\n                            @media screen and (min-width: map-get($breakpoints, md)) {\n                                display: initial;\n\n                                margin-bottom: 0;\n                            }\n                        }\n                    }\n                }\n\n                /***************\n                * GLOBAL STYLE\n                ***************/\n                .pdg-brand-images-container,\n                .pdg-brand-info-container {\n                    position: relative;\n                }\n\n                .pdg-brand-images-content,\n                .pdg-brand-info {\n                    &:not(.active) {\n                        visibility: hidden;\n                        position: absolute;\n                        inset: 0;\n                    }\n\n                    &.active {\n                        position: relative;\n                        visibility: visible;\n                    }\n                }\n            }\n        }\n    }\n</style>\n","<template>\n  <section class=\"pdg-container-principles pdg-container-height\">\n    <div class=\"pdg-container\">\n      <div class=\"pdg-section-info\">\n        <Chip\n          :title=\"translations?.principles?.['info-tag']\"\n          class=\"dark-pink\"\n        />\n        <div class=\"row\">\n          <div class=\"col-md-10 pdg-principles-title\">\n            <h1 class=\"pdg-title-principle-medium\">{{ translations?.principles?.title }}</h1>\n          </div>\n          <div class=\"offset-2 col-10 offset-md-7 col-md-4 pdg-container-description pdg-body-2\">\n            <p class=\"pdg-description\" v-html=\"translations?.principles?.description\"></p>\n          </div>\n        </div>\n      </div>\n      <div class=\"pdg-section-slider\">\n        <div class=\"pdg-slider\" data-slider>\n          <div class=\"pdg-slider-buttons\">\n            <SliderControls\n                    :prevAction=\"() => prevNextAdjective('prev')\"\n                    :nextAction=\"() => prevNextAdjective('next')\"\n                    class=\"dark-blue\"\n                />\n            <h2 class=\"pdg-subhead-1 pdg-slider-subhead\">\n              {{ translations?.principles?.['buttons-subhead'] }}\n            </h2>\n          </div>\n\n          <div class=\"pdg-slider-layout\">\n            <div class=\"pdg-slider-gradient\"></div>\n            <ul class=\"pdg-slider-track\" data-slider-track>\n              <li\n                class=\"pdg-slider-slide\"\n                v-for=\"(title, index) in slidesPrinciples\"\n                :key=\"index\"\n                :style=\"colorBorderIndex(index)\"\n              >\n                <div class=\"pdg-slide\" :class=\"`pdg-slide-${slidesColor[index]}`\">\n                  <NuxtImg\n                    class=\"pdg-img-slider\"\n                    :src=\"`/assets/img/principles/${title}.webp`\"\n                    :alt=\"translations?.principles?.slider?.[`slide-${index + 1}`]?.[`alt-${index + 1}`]\"\n                    loading=\"lazy\"\n                  />\n                  <div class=\"pdg-overlay\">\n                    <i class=\"pdg-icon icon-asterisk-02\"></i>\n                    <h3 class=\"pdg-overlay-title pdg-title-h4\">\n                      {{ translations?.principles?.slider?.[`slide-${index + 1}`]?.title }}\n                    </h3>\n                    <p class=\"pdg-overlay-description pdg-body-3\">\n                      {{ translations?.principles?.slider?.[`slide-${index + 1}`]?.description }}\n                    </p>\n                  </div>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <p class=\"pdg-contact-link pdg-button\">\n          <i class=\"icon-asterisk-01 pdg-asterisk-icon\"></i>\n          {{ translations?.principles?.['text-link'] }}\n        </p>\n      </div>\n    </div>\n  </section>\n</template>\n\n<style scoped lang=\"scss\">\n@import \"../scss/includes.scss\";\n.pdg-container-principles {\n  min-height: 100vh;\n  color: var(--dark-blue);\n  overflow: hidden;\n\n  .pdg-container {\n    display: flex;\n    flex-direction: column;\n    /* overflow: hidden; */\n\n    .pdg-section-info {\n      display: flex;\n      flex-direction: column;\n      /* overflow: hidden; */\n      flex: 1;\n      align-items: flex-start;\n\n      .pdg-principles-title {\n        padding-bottom: rem(16);\n        text-transform: uppercase;\n      }\n\n      .pdg-chip {\n        margin-bottom: rem(16);\n      }\n\n      .pdg-title-principle-medium,\n      .pdg-description {\n        margin: 0;\n      }\n    }\n\n    .pdg-section-slider {\n      position: relative;\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n\n      .pdg-slider {\n        padding-top: rem(56);\n\n        @media screen and (min-width: map-get($breakpoints, md)) {\n          padding-top: rem(64);\n        }\n\n        .pdg-slider-buttons {\n          @include flex($align-items: center);\n\n          .pdg-slider-subhead {\n            padding-left: rem(12);\n            text-transform: uppercase;\n            margin: 0;\n\n            @media screen and (min-width: map-get($breakpoints, md)) {\n              letter-spacing: rem(0.48);\n            }\n          }\n        }\n\n        .pdg-slider-layout {\n          position: relative;\n          @each $size, $value in $gutter-container {\n            @media screen and (min-width: map-get($breakpoints, $size)) {\n              margin: 0 rem(-$value);\n            }\n          }\n\n          .pdg-slider-gradient {\n            @each $size, $value in $gutter-container {\n              @media screen and (min-width: map-get($breakpoints, $size)) {\n                margin: 0 rem(-$value);\n              }\n            }\n\n            @media screen and (min-width: map-get($breakpoints, md)) {\n              position: absolute;\n              top: 0;\n              right: rem(80);\n              bottom: 0;\n              width: rem(236);\n              background: linear-gradient(-90deg, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0));\n              z-index: 1;\n              pointer-events: none;\n            }\n          }\n\n          .pdg-slider-track {\n            display: flex;\n            padding-top: rem(12);\n            list-style-type: none;\n            padding-left: 0;\n            overflow: auto;\n            scroll-behavior: smooth;\n            scrollbar-width: none;\n            margin: 0;\n            flex-wrap: nowrap;\n            position: relative;\n\n            &::-webkit-scrollbar {\n              display: none;\n            }\n\n            @each $size, $value in $gutter-container {\n              @media screen and (min-width: map-get($breakpoints, $size)) {\n                padding: 0 rem($value);\n                padding-top: rem(32);\n              }\n            }\n\n            .pdg-slider-slide {\n              width: 83.33333333%;\n              flex: 0 0 auto;\n              margin-right: rem(12);\n\n              &:last-child {\n                margin-right: 0;\n              }\n\n              @media screen and (min-width: map-get($breakpoints, sm)) {\n                width: 41.66666667%;\n                margin-right: rem(16);\n              }\n\n              @media screen and (min-width: map-get($breakpoints, md)) {\n                width: 33.33333333%;\n              }\n\n              @media screen and (min-width: map-get($breakpoints, lg)) {\n                width: 25%;\n              }\n\n              .pdg-slide {\n                position: relative;\n\n                .pdg-img-slider {\n                  width: 100%;\n                  height: 100%;\n                  object-fit: cover;\n                  min-height: rem(424);\n\n                  @media screen and (min-width: map-get($breakpoints, sm)) {\n                    min-height: rem(428);\n                  }\n\n                  @media screen and (min-width: map-get($breakpoints, lg)) {\n                    min-height: rem(476);\n                  }\n\n                  @media screen and (min-width: map-get($breakpoints, xl)) {\n                    min-height: rem(680);\n                  }\n                }\n\n                .pdg-overlay {\n                  @include flex(center, $flex-direction: column);\n                  position: absolute;\n                  height: 0;\n                  padding: 0 rem(28);\n                  overflow: hidden;\n                  transition: 0.5s ease;\n                  inset: 0;\n                  top: inherit;\n\n                  .pdg-icon {\n                    @include typography(26, 400, 26);\n                  }\n\n                  .pdg-overlay-title {\n                    padding-bottom: rem(12);\n                    padding-top: rem(20);\n                  }\n\n                  .pdg-overlay-description {\n                    width: 83.33333333%;\n                  }\n                }\n\n                &.pdg-slide-green .pdg-overlay {\n                  @include overlay-theme (\n                    var(--green), \n                    var(--dark-blue), \n                    var(--dark-pink)\n                  );\n                }\n\n                &.pdg-slide-dark-blue .pdg-overlay {\n                  @include overlay-theme (\n                    var(--dark-blue), \n                    var(--white), \n                    var(--green)\n                  );\n                }\n\n                &.pdg-slide-white-smoke .pdg-overlay {\n                  @include overlay-theme ( \n                    var(--white-smoke), \n                    var(--dark-blue), \n                    var(--dark-pink)\n                  );\n                }\n\n                &.pdg-slide-pink-dark-blue .pdg-overlay {\n                  @include overlay-theme (\n                    var(--pink), \n                    var(--dark-blue), \n                    var(--blue)\n                  );\n                }\n\n                &.pdg-slide-pink-blue .pdg-overlay {\n                  @include overlay-theme (\n                    var(--pink), \n                    var(--blue), \n                    var(--green)\n                  );\n                }\n\n                &.pdg-slide-pink-blue-darkpink .pdg-overlay {\n                  @include overlay-theme ( \n                    var(--pink), \n                    var(--blue), \n                    var(--dark-pink)\n                  );\n                }\n\n                &.pdg-slide-dark-pink .pdg-overlay {\n                  @include overlay-theme ( \n                    var(--dark-pink),\n                    var(--white), \n                    var(--pink)\n                  );\n                }\n\n                &.pdg-slide-dark-pink-blue .pdg-overlay {\n                  @include overlay-theme ( \n                    var(--dark-pink), \n                    var(--white), \n                    var(--blue)\n                  );\n                }\n\n                &.pdg-slide-blue .pdg-overlay {\n                  @include overlay-theme ( \n                    var(--blue), \n                    var(--white), \n                    var(--green)\n                  );\n                }\n\n                &:hover .pdg-overlay {\n                  height: 100%;\n                }\n              }\n            }\n          }\n        }\n      }\n\n      .pdg-contact-link {\n        @include flex($align-items: center);\n        padding-top: rem(16);\n        color: var(--blue);\n\n          @media screen and (min-width: map-get($breakpoints, md)) {\n            padding-top: rem(32);\n          }\n\n        .pdg-asterisk-icon {\n          padding-right: rem(8);\n          @include typography(16, 400, 16);\n        }\n      }\n    }\n  }\n}\n</style>\n\n<script setup lang=\"ts\">\n  import { onMounted } from \"vue\";\n  import gsap from \"gsap\";\n  import { ScrollTrigger, Power1 } from \"gsap/all\";\n  import { textAnimation } from \"~/utils/animations.utils\";\n\n  const slidesColor = [\n    \"green\",\n    \"dark-blue\",\n    \"white-smoke\",\n    \"pink-dark-blue\",\n    \"dark-pink\",\n    \"pink-blue\",\n    \"blue\",\n    \"green\",\n    \"dark-pink-blue\",\n    \"dark-blue\",\n    \"green\",\n    \"pink-blue-darkpink\",\n  ];\n\n  const slidesPrinciples = [\n    \"agile_value_principles\",\n    \"agile_change_principles\",\n    \"agile_time_principles\",\n    \"agile_collaboration_principles\",\n    \"agile_motivation_principles\",\n    \"agile_honest_principles\",\n    \"agile_objectivity_principles\",\n    \"agile_rhythm_principles\",\n    \"agile_excellence_principles\",\n    \"agile_essentiality_principles\",\n    \"agile_organisation_principles\",\n    \"agile_flexibility_principles\",\n  ];\n\n  let track: HTMLElement;\n\n  const { locale } = useI18n();\n  const globalState = useGlobalState();\n\n    const { data: translations } = await useAsyncData('translations', async () => {\n        const res = await $fetch<any>(`/api/translations?lang=${locale.value}&mode=${globalState.value.mode}`)\n        return res\n    }, { watch: [locale, globalState] })\n\n  const prevNextAdjective = (direction: \"prev\" | \"next\") => {\n      const currentScrollLeft = track.scrollLeft;\n      const trackChild = track.firstElementChild as HTMLElement;\n      const index = Math.ceil(currentScrollLeft / trackChild.offsetWidth) + (direction === 'prev' ? - 1 : 1) \n\n      if (trackChild) {\n          const targetIndex = direction === 'prev' ? Math.max(0, index) : index;\n          const targetOffset = trackChild.offsetWidth * targetIndex;\n\n          track.scrollTo({\n            left: targetOffset,\n            behavior: \"smooth\",\n          });\n        }\n      }\n\n  const colorBorderIndex = (index: number) => ({\n    border:\n      index === 8 ? \"1px solid var(--dark-pink)\" : index === 9 ? \"1px solid var(--blue)\" : \"none\",\n  });\n\n\n  onMounted(() => {\n    if (process.client) {\n    const container = document.querySelector(\".pdg-container-principles\") as HTMLElement;\n    \n      if (container) {\n        const slider = container.querySelector(\"[data-slider]\") as HTMLElement;\n        track = slider.querySelector(\"[data-slider-track]\") as HTMLElement;\n        const chip = container.querySelector(\".pdg-chip\") as HTMLElement;\n        const chipWidth = chip.getBoundingClientRect().width;\n        const mm = gsap.matchMedia(), breakPoint = 1024;\n        mm.add(\n          {\n            isDesktop: `(min-width: ${breakPoint}px)`,\n            isMobile: `(max-width: ${breakPoint - 1}px)`,\n          }, () => {\n\n            const startAnimation = gsap\n            .timeline()\n            .fromTo (\n              ['.pdg-container-principles .pdg-section-info', \n              \".pdg-container-principles .pdg-principles-title\", \n              \".pdg-container-principles .pdg-description\", \n              \".pdg-container-principles .pdg-section-slider\"],\n              { opacity: 0 },\n              { opacity: 1 },\n              \"entry\"\n            );\n\n            //ANIMATION DELAY\n            animationDelay(startAnimation, container);\n\n            //CHIP ANIMATION\n            chipAnimation({\n              tl: startAnimation,\n              container: \".pdg-container-principles\",\n              keyframe: \"entry\"\n            });\n\n            //TITLE ANIMATION\n            textAnimation({\n                split: true,\n                tl: startAnimation,\n                container: \".pdg-container-principles .pdg-principles-title\",\n                elements: [\".pdg-title-principle-medium\"],\n                from: { yPercent: 100, opacity: 0 },\n                to: { yPercent: 0, opacity: 1, duration: 0.6, ease: \"power1\" },\n                keyframe: \"entry\",\n              });\n\n             //START ANIMATION \n             ScrollTrigger.create({\n                  animation: startAnimation,\n                  trigger: '.pdg-container-principles',\n                  start: \"top 50%\",\n                  end:\"bottom 50%\",\n                  id: \"PRINCIPLES\",\n                  preventOverlaps: true,\n                  toggleActions: \"play none play reverse\",\n                  // markers: {startColor: \"red\", endColor: \"red\", fontSize: '50'},\n                  onEnter: () => {\n                      gsap.to(\"body\", {\n                        backgroundColor:  '#fff',\n                        overwrite: \"auto\"\n                      })\n                      gsap.to( \".content-menu\", {\n                        background: '#fff'\n                      })\n                  },\n                  onEnterBack: () => {\n                      gsap.to(\"body\", {\n                        backgroundColor: '#fff',\n                        overwrite: \"auto\"\n                      })\n                      gsap.to( \".content-menu\", {\n                          background: '#fff'\n                      })\n\n                      gsap\n                      .timeline()\n                      .fromTo (\n                        ['.pdg-container-principles .pdg-section-info', \n                        \".pdg-container-principles .pdg-principles-title\", \n                        \".pdg-container-principles .pdg-description\", \n                        \".pdg-container-principles .pdg-section-slider\"],\n                        { opacity: 0 },\n                        { opacity: 1 },\n                      );\n                  },\n\n                  onLeave: () => {\n                    gsap\n                    .timeline()\n                    .fromTo (\n                      ['.pdg-container-principles .pdg-section-info', \n                      \".pdg-container-principles .pdg-principles-title\", \n                      \".pdg-container-principles .pdg-description\", \n                      \".pdg-container-principles .pdg-section-slider\"],\n                      { opacity: 1 },\n                      { opacity: 0 },\n                    );\n                  },\n              });\n\n              const exitAnimation = gsap\n                .timeline()\n                .fromTo (\n                  chip,\n                  {\n                    duration: 0.5,\n                    opacity: 1,\n                    width: chipWidth,\n                    ease: Power1.easeIn\n                  },\n                  {\n                    width: 0,\n                    opacity: 0\n                  },\n                  \"exit\"\n                )\n                .fromTo (\n                \".pdg-container-principles .pdg-section-info .pdg-container-description\",\n                {\n                  y: 0,\n                  opacity: 1,\n                  ease: \"power1\",\n                  duration: 0.5,\n                },\n                {\n                  y: -80,\n                  opacity: 0,\n                 \n                },\n                \"exit\"\n                )\n                .to (\n                  \".pdg-container-principles .pdg-section-info\",\n                  {\n                    flexGrow: 0,\n                    height: 0\n                  },\n                  \"exit\"\n                )\n\n                textAnimation ({\n                    tl: exitAnimation,\n                    container: \".pdg-container-principles .pdg-principles-title\",\n                    elements: [\".pdg-title-principle-medium\"],\n                    from: {\n                      yPercent: 0,\n                      opacity: 1\n                    },\n                    to: {\n                      yPercent: 100,\n                      opacity: 0,\n                      duration: 0.6,\n                      ease: \"power1\"\n                    },\n                    keyframe: \"exit\",\n                  });\n\n                  //EXIT ANIMATION MOBILE\n                  \n                    ScrollTrigger.create({\n                      animation: exitAnimation,\n                      trigger: '.pdg-container-principles',\n                      start: \"top+=50 top\",\n                      end: \"center center\",\n                      id: 'PIN-PRINCIPLES',\n                      pin: \".pdg-container-principles .pdg-container\",\n                      scrub: 2 ,\n                      anticipatePin: 1,\n                      pinSpacing: false,\n                      invalidateOnRefresh: true,\n                      preventOverlaps: true,\n                      toggleActions: \"play none play reverse\",\n                      // markers: { startColor: 'green', endColor: \"green\", fontSize: '30px'},\n                    });\n              }\n          )}\n      }\n  });\n</script>","<template>\n    <section class=\"pdg-we-want-container pdg-container-height\">\n        <div class=\"pdg-container\">\n            <div class=\"pdg-structure-we-want\">\n                <div class=\"pdg-title-container\">\n                    <Chip\n                        id=\"pdg-title-chip\"\n                        class=\"pdg-chip-main\"\n                        icon=\"asterisk-01\"\n                        :title=\"translations?.['we-want']?.title?.['title-chip']\"\n                        :class=\"'blue'\"\n                    />\n                    <h1 class=\"pdg-header pdg-title-we-want\">\n                        {{ translations?.['we-want']?.title?.main }}\n                    </h1>\n                </div>\n\n                <div\n                    :class=\"`pdg-default-column-width pdg-image-position-${slideAnimatedImage[index]}`\"\n                    v-for=\"(path, index) in (globalState.mode === 'crazy' ? imgPathCrazy : imgPathNormal)\"\n                    :key=\"index\"\n                >\n                    <AnimatedImage\n                        class=\"pdg-responsive-image-container pdg-animated-image-padding\"\n                        :src=\"`/assets/img/${globalState.mode}/we-want/${path}.webp`\"\n                        :alt=\"translations?.['we-want']?.['we-want-card']?.[`card-${index + 1}`]?.[`alt-${index + 1}`]\"\n                    />\n                    <Chip\n                        class=\"pdg-top-chip\"\n                        icon=\"asterisk-01\"\n                        :title=\"translations?.['we-want']?.['we-want-card']?.[`card-${index + 1}`]?.title\"\n                        :class=\"themeChip[index]\"\n                    />\n                </div>\n\n                <div class=\"pdg-position-description\">\n                    <p \n                        class=\"pdg-body-2\"\n                        v-html=\"translations?.['we-want']?.description\"\n                    >\n                    </p>\n                </div>\n            </div>\n        </div>\n    </section>\n</template>\n\n<script setup lang=\"ts\">\n    import gsap from \"gsap\";\n    import { ScrollTrigger } from \"gsap/all\";\n    import { imageAnimation, chipAnimation } from \"~/utils/animations.utils\";\n\n    const slideAnimatedImage = [\"grow\", \"project\", \"innovate\", \"fun\"];\n    const imgPathNormal = [\"presentation-of-company-values\", \"development\", \"design\", \"support-between-teams\"];\n    const imgPathCrazy = [\"easy-solutions-to-tough-problems\", \"drama-queen-back-from-team-building-on-etna\", \"life-is-sweet\", \"slide4\"];\n    const themeChip = [\"pink-static\", \"dark-pink\", \"light-blue\", \"green\"];\n\n    const { locale } = useI18n();\n    const globalState = useGlobalState();\n\n    const { data: translations } = await useAsyncData('translations', async () => {\n        const res = await $fetch<any>(`/api/translations?lang=${locale.value}&mode=${globalState.value.mode}`)\n        return res\n    }, { watch: [locale, globalState] })\n\n    onMounted(() => {\n        if (process.client) {\n\n            const container = document.querySelector(\".pdg-we-want-container\") as HTMLDivElement;\n\n            if (container) {\n                const infoChipArray = Array.from(\n                    container.querySelectorAll(\".pdg-chip\") as NodeListOf<HTMLSpanElement>\n                );\n                const chipMain = infoChipArray.find((chip) =>\n                    chip.classList.contains(\"pdg-chip-main\")\n                );\n                const chipsWithoutMain = infoChipArray.filter(\n                    (chip) => chip !== chipMain\n                );\n\n                const mm = gsap.matchMedia(),\n                    breakPoint = 1024;\n                mm.add(\n                    {\n                        isDesktop: `(min-width: ${breakPoint}px)`,\n                        isMobile: `(max-width: ${breakPoint - 1}px)`,\n                    },\n                    () => {\n                        const tl = gsap.timeline();\n\n                        //ANIMATION DELAY\n                        animationDelay(tl, container);\n\n                        //CHIP ANIMATION\n                        chipAnimation({\n                            tl,\n                            container: \".pdg-we-want-container\",\n                            target: chipMain,\n                            keyframe: \"entry +=0\",\n                        });\n\n                        textAnimation({\n                            tl,\n                            split: true,\n                            container: \".pdg-we-want-container .pdg-title-container\",\n                            elements: [\".pdg-header\"],\n                            from: { yPercent: 100 },\n                            to: { yPercent: 0 },\n                            keyframe: \"entry +=0.2\",\n                        });\n\n                        //OPEN IMAGE ANIMATION\n                        imageAnimation({\n                            tl,\n                            container: \".pdg-we-want-container\",\n                            keyframe: \"entry +=0.2\",\n                        }).open();\n\n                        if (chipsWithoutMain) {\n                            chipsWithoutMain.forEach((chip) => {\n                                chipAnimation({\n                                    tl,\n                                    container: \".pdg-we-want-container\",\n                                    target: chip,\n                                    from: { delay: 0.3 },\n                                    keyframe: \"entry +=0.2\",\n                                });\n                            });\n                        }\n\n                        tl.fromTo(\n                            \".pdg-we-want-container .pdg-position-description .pdg-body-2\",\n                            {\n                                yPercent: 100,\n                                opacity: 0,\n                            },\n                            {\n                                yPercent: 0,\n                                opacity: 1,\n                                delay: 0.2,\n                            },\n                            \"entry +=0.3\"\n                        );\n\n                            ScrollTrigger.create({\n                                animation: tl,\n                                trigger: '.pdg-we-want-container',\n                                start: \"top 50%\",\n                                end:\"bottom 50%\",\n                                id: \"WEWANT\",\n                                toggleActions: \"play reverse play reverse\",\n                                preventOverlaps: true,\n                                // markers: {startColor: \"green\", endColor: \"green\", fontSize: '80'},\n                                onEnter: () =>{\n                                    setTimeout (() => {\n                                        gsap.to(\"body\", {\n                                            backgroundColor:  globalState.value.mode === 'normal' ? '#0a2843' : '#c3f73a',\n                                            overwrite: \"auto\"\n                                        })\n                                        gsap.to( \".content-menu\", {\n                                            background: globalState.value.mode === 'normal' ? '#0a2843' : '#c3f73a',\n                                        })\n                                    }, 0)\n                                },\n                                onEnterBack: () => {\n                                    setTimeout (() => {\n                                        gsap.to(\"body\", {\n                                                backgroundColor:  globalState.value.mode === 'normal' ? '#0a2843' : '#c3f73a',\n                                                overwrite: \"auto\"\n                                        })\n                                        gsap.to( \".content-menu\", {\n                                            background: globalState.value.mode === 'normal' ? '#0a2843' : '#c3f73a',\n                                        })\n                                    }, 0)\n                                },\n                                onLeaveBack: () =>{\n                                    setTimeout (() => {\n                                        gsap.to(\"body\", {\n                                            backgroundColor: '#fff',\n                                            overwrite: \"auto\"\n                                        })\n                                        gsap.to( \".content-menu\", {\n                                            background: '#fff'\n                                        })\n                                    }, 0)\n                                },\n                            });\n                    }\n                );\n            }\n        }\n    });\n</script>\n\n<style scoped lang=\"scss\">\n    @import \"../scss/includes.scss\";\n\n    .pdg-we-want-container {\n        min-height: 100vh;\n        color: var(--body-0);\n        padding-top: rem(112);\n        padding-bottom: rem(100);\n\n        .pdg-chip-main {\n            margin-bottom: rem(8);\n\n            @media screen and (min-width: map-get($breakpoints, md)) {\n                margin-bottom: rem(16);\n            }\n        }\n\n        .pdg-top-chip {\n            align-self: start;\n        }\n\n        .pdg-default-column-width {\n            display: flex;\n            flex-direction: column;\n            margin-bottom: rem(56);\n            width: 83.33333333%;\n\n            .pdg-responsive-image-container {\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    flex: 1;\n                }\n            }\n        }\n\n        .pdg-structure-we-want {\n            @media screen and (min-width: map-get($breakpoints, md)) {\n                display: grid;\n                grid-template-columns: repeat(12, calc((100% - (rem(16) * 11)) / 12));\n                grid-template-rows: repeat(8, calc(((100vh - (rem(16) * 7)) / 8)));\n                gap: rem(16);\n                padding-bottom: rem(52);\n            }\n\n            @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($horizontal-breakpoints, md) - rem(0.1))) and (min-height: map-get($breakpoints, md)) {\n                grid-template-columns: repeat(8, calc((100% - (rem(16) * 7)) / 8));\n                grid-template-rows: repeat(12, calc(((100vh - (rem(16) * 11)) / 12)));\n            }\n\n            .pdg-animated-image-container {\n                margin-bottom: rem(16);\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    margin-bottom: vw(16, 1440);\n                }\n\n                &:deep(.pdg-animated-image-overlay) {\n                    background: var(--bg-1);\n                }\n            }\n\n            .pdg-title-container {\n                text-transform: uppercase;\n                margin-bottom: rem(24);\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    margin-bottom: 0;\n                    grid-column: 1 / 8;\n                    padding-right: rem(124);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($horizontal-breakpoints, md) - rem(0.1))) and (min-height: map-get($breakpoints, md)) {\n                    margin-bottom: 0;\n                    grid-column: 1 / 9;\n                    grid-row: 2 / 4;\n                }\n\n                .pdg-title-we-want {\n                    margin-bottom: 0;\n                }\n            }\n\n            .pdg-image-position-grow {\n                min-height: rem(284);\n\n                @media screen and (min-width: map-get($breakpoints, sm)) {\n                    width: 58.33333333%;\n                    min-height: rem(404);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    grid-column: 1 / 4;\n                    grid-row: 5 / -1;\n                    padding: rem(40) rem(20) rem(16) 0;\n                    margin-bottom: 0;\n                    width: initial;\n                    min-height: rem(288);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($horizontal-breakpoints, md) - rem(0.1))) and (min-height: map-get($breakpoints, md)) {\n                    grid-column: 1 / 4;\n                    grid-row: 4 / 7;\n\n                    padding: 0;\n                }\n\n                @media screen and (min-width: map-get($breakpoints, lg)) {\n                    min-height: rem(340);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, xl)) {\n                    min-height: rem(412);\n                }\n\n                &:deep(.pdg-animated-image-overlay) {\n                    background: var(--dark-pink);\n                }\n            }\n\n            .pdg-image-position-project {\n                margin-left: 33.33333333%;\n                width: 66.66666667%;\n                min-height: rem(320);\n\n                @media screen and (min-width: map-get($breakpoints, sm)) {\n                    margin-left: 50%;\n                    width: 50%;\n                    min-height: rem(480);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    grid-column: 7 / 10;\n                    grid-row: 6 / -1;\n                    padding: rem(40) rem(24) rem(0) rem(64);\n                    width: initial;\n                    margin-left: 0;\n                    margin-bottom: 0;\n                    min-height: rem(288);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($horizontal-breakpoints, md) - rem(0.1))) and (min-height: map-get($breakpoints, md)) {\n                    grid-column: 6 / 9;\n                    grid-row: 7 / 10;\n\n                    padding: 0;\n                }\n\n                @media screen and (min-width: map-get($breakpoints, lg)) {\n                    min-height: rem(352);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, xl)) {\n                    min-height: rem(428);\n                }\n\n                &:deep(.pdg-animated-image-overlay) {\n                    background: var(--bg-5);\n                }\n            }\n\n            .pdg-image-position-innovate {\n                width: 100%;\n                min-height: rem(280);\n\n                @media screen and (min-width: map-get($breakpoints, sm)) {\n                    width: 83.33333333%;\n                    min-height: rem(472);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    grid-column: 8 / 12;\n                    grid-row: 1 / 5;\n                    padding-right: rem(64);\n                    padding-top: 0;\n                    margin-bottom: 0;\n                    width: initial;\n                    min-height: rem(288);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($horizontal-breakpoints, md) - rem(0.1))) and (min-height: map-get($breakpoints, md)) {\n                    grid-column: 1 / 5;\n                    grid-row: 8 / 11;\n                }\n\n                @media screen and (min-width: map-get($breakpoints, lg)) {\n                    min-height: rem(396);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, xl)) {\n                    min-height: rem(468);\n                }\n\n                &:deep(.pdg-animated-image-overlay) {\n                    background: var(--pink);\n                }\n            }\n\n            .pdg-image-position-fun {\n                margin-left: 16.66666667%;\n                min-height: rem(296);\n\n                @media screen and (min-width: map-get($breakpoints, sm)) {\n                    margin-left: 41.66666667%;\n                    width: 58.33333333%;\n                    min-height: rem(416);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    grid-column: 4 / 7;\n                    grid-row: 3 / 6;\n                    padding-left: rem(20);\n                    margin-left: 0;\n                    margin-bottom: 0;\n                    width: initial;\n                    min-height: rem(288);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($horizontal-breakpoints, md) - rem(0.1))) and (min-height: map-get($breakpoints, md)) {\n                    grid-column: 5 / 8;\n                    grid-row: 4 / 7;\n\n                    margin-top: rem(-32);\n                    margin-bottom: rem(32);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, lg)) {\n                    min-height: rem(280);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, xl)) {\n                    min-height: rem(332);\n                }\n\n                &:deep(.pdg-animated-image-overlay) {\n                    background: var(--light-blue);\n                }\n            }\n\n            .pdg-position-description {\n                width: 83.33333333%;\n\n                @media screen and (min-width: map-get($breakpoints, sm)) {\n                    width: 58.33333333%;\n                }\n\n                .pdg-body-2 {\n                    margin-bottom: 0;\n                }\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    grid-column: 10 / 13;\n                    grid-row: 7 / 9;\n                    padding-right: rem(40);\n                    width: initial;\n                    display: flex;\n                    align-items: flex-end;\n                    margin-bottom: vw(46, 1440);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, md)) and (max-width: calc(map-get($horizontal-breakpoints, md) - rem(0.1))) and (min-height: map-get($breakpoints, md)) {\n                    grid-column: 5 / 9;\n                    grid-row: 11 / 12;\n\n                    margin: 0;\n                    padding: 0;\n                }\n            }\n        }\n    }\n</style>","export const navbarHeight = (sectionContainer : Element | null) => {\n    const navbarHeight = (document.querySelector('.content-menu') as HTMLDivElement)?.offsetHeight;\n\n    if (sectionContainer && navbarHeight) {\n        const paddingSkill = parseInt(getComputedStyle(sectionContainer).paddingTop);\n\n        (sectionContainer as HTMLDivElement).style.paddingTop = `${navbarHeight + paddingSkill }px`;\n    }\n}","<template>\n  <section class=\"pdg-container-skills-technologies\">\n    <div class=\"pdg-container\">\n        <Chip\n          :title=\"translations?.['skills-technologies']?.chip\"\n          class=\"pink\"\n        />\n\n        <div class=\"pdg-title-description\">\n          <div class=\"row\">\n            <h1 class=\"pdg-title pdg-title-h1 col-10 col-md-12\">\n              {{ translations?.['skills-technologies']?.title }}\n            </h1>\n            <p class=\"pdg-description pdg-body-2\">\n              {{ translations?.['skills-technologies']?.description }}\n            </p>\n        </div>\n      </div>\n\n      <div class=\"row\">\n        <div class=\"pdg-work-with-us col-md-7\">\n          <ul \n            class=\"nav pdg-nav-pills\"\n            id=\"pills-tab\" \n            role=\"tablist\">\n            <li class=\"pdg-nav-item\" role=\"presentation\">\n              <button \n                class=\"pdg-nav-link pdg-label-2 active\" \n                id=\"pills-skills-tab\" \n                data-bs-toggle=\"pill\"\n                data-bs-target=\"#pills-skills\" \n                type=\"button\" \n                role=\"tab\" \n                :aria-selected=\"isActive\"\n                 @click=\"toggleIsActive\">\n                {{ translations?.['skills-technologies']?.button?.firstButton }}\n              </button>\n            </li>\n            <li class=\"pdg-nav-item\" role=\"presentation\">\n              <button \n                class=\"pdg-nav-link pdg-label-2\" \n                id=\"pills-technologies-tab\" \n                data-bs-toggle=\"pill\"\n                data-bs-target=\"#pills-technologies\" \n                type=\"button\" \n                role=\"tab\" \n                :aria-selected=\"isActive\"\n                @click=\"toggleIsActive\">\n                {{ translations?.['skills-technologies']?.button?.secondButton }}\n              </button>\n            </li>\n          </ul>\n          <div class=\"pdg-tab-content\" id=\"pills-tabContent\">\n            <div \n              class=\"pdg-tab-pane active\" \n              id=\"pills-skills\" \n              role=\"tabpanel\" \n              aria-labelledby=\"pills-skills-tab\">\n              <ul class=\"pdg-menu-items\">\n                <li class=\"pdg-menu-item\" v-for=\"(skill, index) in skills\" :key=\"index\">\n                  <NuxtImg \n                    :src=\"`/assets/img/${globalState.mode}/skills-technologies/skills/${skill}.svg`\"\n                    :alt=\"translations?.['skills-technologies']?.['alt-skills-menu']?.['skills']?.[index + 1]\" \n                    class=\"pdg-img\" \n                    loading=\"lazy\"\n                    sizes=\"160px\"\n                  />\n                    <p class=\"pdg-subhead-1 pdg-item-margin\">\n                      {{ translations?.['skills-technologies']?.['service-menu']?.[index+1] }}\n                    </p>\n                </li>\n              </ul>\n            </div>\n            <div \n              class=\"pdg-tab-pane\" \n              id=\"pills-technologies\" \n              role=\"tabpanel\" \n              aria-labelledby=\"pills-technologies-tab\">\n              <ul class=\"pdg-menu-items\">\n                <li class=\"pdg-menu-item\" v-for=\"(tech, index) in technologies\" :key=\"index\">\n                  <NuxtImg\n                    :src=\"`/assets/img/${globalState.mode}/skills-technologies/technologies/${tech}.svg`\"\n                    :alt=\"translations?.['skills-technologies']?.['alt-skills-menu']?.technologies?.[index + 1]\" \n                    class=\"pdg-img\"\n                    loading=\"lazy\"\n                    sizes=\"160px\"\n                  />\n                  <p class=\"pdg-subhead-1 pdg-item-margin\">\n                    {{ translations?.['skills-technologies']?.['technologies-menu']?.[index + 1] }}\n                  </p>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"pdg-box-info-container col-10 col-md-3\">\n          <div class=\"pdg-box-info-padding\">\n            <h2 class=\"pdg-title-h4 pdg-title-box-info\">\n              {{ translations?.['skills-technologies']?.['box-info']?.title }}\n            </h2>\n            <p class=\"pdg-description-box-info pdg-body-2\" v-html=\"translations?.['skills-technologies']?.['box-info']?.description\">\n              \n            </p>\n            <ArrowLink\n              :text=\"translations?.['skills-technologies']?.['box-info']?.link \"\n              href=\"https://applyfor.paradigma.me/\"\n              :external=\"true\"\n              class=\"pdg-contact-link\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n\n<style scoped lang=\"scss\">\n@import \"../scss/includes.scss\";\n\n.pdg-container-skills-technologies {\n  /* min-height: 100vh; */\n  color: var(--dark-blue);\n\n  @media screen and (min-width: map-get($breakpoints, md)) {\n    @include flex($align-items: center);\n  }\n\n  .pdg-container {\n    padding-top: rem(40);\n    padding-bottom: rem(36);\n\n    @media screen and (min-width: map-get($breakpoints, md)) {\n      padding-top: rem(24);\n      padding-bottom: rem(24);\n    }\n\n    .pdg-chip {\n      margin-bottom: rem(8);\n    }\n\n    .pdg-title-description {\n      .pdg-title {\n        margin-bottom: rem(16);\n      }\n\n      .pdg-description {\n        margin-bottom: rem(8);\n\n        @media screen and (min-width: map-get($breakpoints, md)) {\n          margin-bottom: rem(16);\n        }\n      }\n    }\n\n    .pdg-work-with-us {\n      padding-bottom: rem(40);\n\n      @media screen and (min-width: map-get($breakpoints, md)) {\n        padding-bottom: 0;\n      }\n\n      .pdg-nav-pills {\n        list-style: none;\n        padding-bottom: rem(8);\n        padding-top: rem(8);\n\n        @media screen and (min-width: map-get($breakpoints, md)) {\n          margin-bottom: rem(16);\n          position: relative;\n          z-index: 3;\n        }\n\n        .pdg-nav-item {\n          margin-right: rem(12);\n\n          &:last-child {\n            margin-right: 0;\n          }\n        }\n\n        .pdg-nav-link {\n          background: var(--bg-0);\n          color: var(--body-11);\n          padding: rem(4) rem(8);\n          border: rem(1) solid var(--body-11);\n          border-radius: rem(100);\n          transition: $transition;\n\n          @media screen and (min-width: map-get($breakpoints, md)) {\n            padding: rem(12);\n          }\n\n          &:not(.active) {\n            &:focus-visible\n            &:focus,\n            &:hover {\n              background-color: var(--body-5);\n              color: var(--body-10);\n              border-color: var(--body-5);\n            }\n          }\n\n          &.active {\n            background-color: var(--body-9);\n            border-color: var(--body-9);\n            color: var(--body-0);\n          }\n        }\n      }\n\n      .pdg-tab-content {\n        overflow: visible;\n\n        .pdg-tab-pane {\n          display: none;\n\n          &.active {\n            display: block;\n          }\n        }\n      }\n\n      .pdg-menu-items {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n\n        .pdg-menu-item {\n          display: block;\n          padding: rem(8) 0;\n          text-transform: uppercase;\n          position: relative;\n          z-index: 2;\n\n          &:last-child {\n            &::after {\n              content: none;\n            }\n          }\n\n          &::after {\n            content: '';\n            display: block;\n            height: rem(1);\n            width: 100%;\n            left: 0;\n            bottom: 0;\n            position: absolute;\n            background-color: var(--light-blue);\n          }\n\n          .pdg-img {\n            position: absolute;\n            width: rem(200);\n            height: rem(200);\n            object-fit: cover;\n            transform: translateY(-50%);\n            top: 50%;\n            left: 0;\n            opacity: 0;\n            visibility: hidden;\n            z-index: -1;\n            pointer-events: none;\n\n            &:hover {\n              color: var(--body-12);\n              z-index: 1;\n            }\n          }\n\n          \n        }\n\n        .pdg-item-margin {\n          margin-bottom: 0;\n          font-weight: 400;\n        }\n      }\n    }\n\n    .pdg-box-info-container {\n      //TABLET\n      @media screen and (min-width: map-get($breakpoints, md)) and (max-width: map-get($horizontal-breakpoints, md)){\n        width: 33.33333333%;\n      }\n\n      @media screen and (min-width: map-get($breakpoints, md)) {\n        padding-top: rem(8);\n      }\n\n      .pdg-box-info-padding {\n        @media screen and (min-width: map-get($breakpoints, md)) {\n          padding-left: rem(32);\n        }\n\n        .pdg-title-box-info {\n          margin-bottom: rem(16);\n        }\n\n        .pdg-description-box-info {\n          margin-bottom: rem(28);\n        }\n      }\n    }\n  }\n}\n</style>\n\n<script setup lang=\"ts\">\nimport { gsap } from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\nimport { Power1 } from \"gsap/all\";\n\nconst isActive = ref(true);\nconst globalState = useGlobalState();\n\n\nconst technologies = [\n  'react-nextjs',\n  'typescript',\n  'vue',\n  'angular',\n  'nosql',\n  'node-js',\n  'flutter',\n  'react-native'\n]\n\nconst skills = [\n  'web-mobile-development',\n  'cloud-architecture',\n  'user-experience-user-design',\n  'service-design',\n  'visual-graphic-design',\n  'motion-graphic',\n  'agile-project-management',\n  'quality-assurance'\n]\n\nconst toggleIsActive = () => {\n  isActive.value = !isActive.value;\n};\n\n  const { locale } = useI18n();\n\n    const { data: translations } = await useAsyncData('translations', async () => {\n        const res = await $fetch<any>(`/api/translations?lang=${locale.value}&mode=${globalState.value.mode}`)\n        return res\n    }, { watch: [locale, globalState] })\n\nonMounted(() => {\n\n  if (process.client) {\n    \n    var tl = gsap.timeline();\n\n    const container: HTMLDivElement | null = document.querySelector(\".pdg-container-skills-technologies\");\n\n    if (container) {\n        const tabsBtn = container.querySelectorAll(\"[data-bs-toggle]\");\n        const tabs = Array.from(container.querySelectorAll('.pdg-container-skills-technologies [role=\"tabpanel\"]'));\n\n        const mm = gsap.matchMedia(), breakPoint = 1024;\n        mm.add({\n          isDesktop: `(min-width: ${breakPoint}px)`,\n          isMobile: `(max-width: ${breakPoint - 1}px)`,\n        }, ({ conditions }) => {\n          const { isDesktop } = conditions as gsap.Conditions;\n          (container as HTMLDivElement).style.paddingTop = '0px';\n          navbarHeight(container);\n\n          if (tabsBtn) {\n            tabsBtn.forEach((tab) => {\n              tab.addEventListener(\"click\", (e: Event) => {\n                const currentActiveTab = tabs.find((el) => (el as HTMLElement).classList.contains(\"active\"));\n\n                if (!tl.isActive() && !tab.classList.contains(\"active\")) {\n                  tabsBtn.forEach((element) => element.classList.remove(\"active\"));\n                  tab.classList.add(\"active\");\n\n                  if (e && e.target) {\n                    const target = (e.target as HTMLElement).getAttribute(\"data-bs-target\");\n                    const activeTab = tabs.find((el) => el.id === (target?.replace(\"#\", \"\") || ''));\n\n                    tl.to(\n                      gsap.utils.toArray(\".pdg-container-skills-technologies .pdg-menu-item\", currentActiveTab as HTMLObjectElement),\n                      {\n                        xPercent: -10,\n                        duration: 0.3,\n                        stagger: 0.1,\n                        opacity: 0,\n                        onComplete: () => {\n                          tabs.forEach((element) => {\n                            if (element instanceof HTMLElement) {\n                              element.classList.remove(\"active\");\n                            }\n                          });\n                          activeTab?.classList.add(\"active\");\n                        },\n                      }\n                    ).fromTo(\n                      gsap.utils.toArray(\".pdg-container-skills-technologies .pdg-menu-item\", activeTab),\n                      {\n                        xPercent: 10,\n                        opacity: 0\n                      },\n                      {\n                        xPercent: 0,\n                        opacity: 1,\n                        stagger: 0.1,\n                        duration: 0.3\n                      }\n                    );\n                  }\n                }\n              });\n            });\n          }\n\n          const startAnimation = gsap.timeline();\n\n          //ANIMATION DELAY\n          animationDelay(startAnimation, container);\n\n          //CHIP ANIMATION\n          chipAnimation({\n            tl: startAnimation,\n            container: \".pdg-container-skills-technologies\",\n            keyframe: \"0\"\n          })\n\n          startAnimation\n          .fromTo(\n              \".pdg-container-skills-technologies .pdg-nav-item\",\n            {\n              opacity: 0,\n            },\n            {\n              opacity: 1,\n              duration: 0.3,\n              ease: Power1.easeIn,\n            },\n            \"entry\"\n          )\n\n          textAnimation({\n            split: true,\n            tl: startAnimation,\n            container: \".pdg-container-skills-technologies .pdg-container\",\n            elements: [\".pdg-title\", \".pdg-description, .pdg-title-h4, .pdg-description-box-info\"],\n            from: { yPercent: 100, opacity: 0 },\n            to: { yPercent: 0, opacity: 1 },\n            keyframe: 'entry'\n          });\n\n          if (isDesktop) {\n            const items: NodeListOf<HTMLElement> = container.querySelectorAll(\".pdg-menu-item\");\n            \n            startAnimation\n              .fromTo(\n                [\".pdg-container-skills-technologies .pdg-menu-item\"],\n                {\n                  xPercent: 10,\n                  opacity: 0\n                },\n                {\n                  xPercent: 0,\n                  opacity: 1,\n                  stagger: 0.1,\n                  duration: 0.3\n                },\n                'entry'\n              )\n              .fromTo (\n                  [\n                    \".pdg-container-skills-technologies .pdg-title-box-info\", \n                    \".pdg-container-skills-technologies .pdg-description-box-info\",\n                    \".pdg-container-skills-technologies .pdg-nav-pills\",\n                    \".pdg-container-skills-technologies .pdg-contact-link\"\n                  ], \n                  {\n                    y: 50,\n                    opacity: 0\n                  },\n                  {\n                    y: 0,\n                    opacity: 1,\n                    duration: 0.3,\n\n                  onComplete: function () {\n                    items && animationImageHover(items);\n\n                    gsap.set(this.targets(), { clearProps: \"all\" })\n                  },\n                },\n                \"entry\")\n            }\n            else {\n              startAnimation\n                .fromTo(\n                  \".pdg-container-skills-technologies .pdg-menu-item\",\n                  { yPercent: -20, opacity: 0},\n                  { yPercent: 0, stagger: 0.1, opacity: 1 },\n                  'entry'\n                )\n                .fromTo (\n                  [\n                    \".pdg-container-skills-technologies .pdg-title-box-info\", \n                    \".pdg-container-skills-technologies .pdg-description-box-info\",\n                    \".pdg-container-skills-technologies .pdg-contact-link\"\n                  ], \n                  {\n                    y: -50,\n                    opacity: 0\n                  },\n                  {\n                    y: 0,\n                    opacity: 1,\n                    duration: 0.3,\n                    stagger: 0.2,\n\n                    onComplete: function () {\n                      gsap.set(this.targets(), { clearProps: \"all\" })\n                    },\n                  },\n                  \"entry\")\n              }\n\n              ScrollTrigger.create({\n                animation: startAnimation,\n                trigger: container,\n                start: \"top 50%\",\n                end:\"bottom 50%\",\n                id: \"SKILLS&TECHNOLOGIES\",\n                preventOverlaps: true,\n                toggleActions: \"play reverse play reverse\",\n                //  markers: {startColor: \"black\", endColor: \"red\", fontSize: '30'},\n                  onEnter: () => {\n                    setTimeout (() => {\n                      gsap.to( \".content-menu\", {\n                              background: globalState.value.mode === 'normal' ? '#fff' : '#ffc0d5',\n                      })\n                      gsap.to(\"body\", {\n                        backgroundColor:  globalState.value.mode === 'normal' ? '#fff' : '#ffc0d5',\n                        overwrite: \"auto\"\n                    })\n                    }, 0)\n                 \n                },\n                  onEnterBack: () => {\n                    setTimeout (() => {\n                      gsap.to( \".content-menu\", {\n                              background: globalState.value.mode === 'normal' ? '#fff' : '#ffc0d5',\n                      })\n                      gsap.to(\"body\", {\n                        backgroundColor:  globalState.value.mode === 'normal' ? '#fff' : '#ffc0d5',\n                        overwrite: \"auto\",\n                      })\n                    }, 0)\n                  }\n              });\n        });\n     }\n  }\n});\n</script>","<template>\n    <section class=\"pdg-container-section pdg-work-with-us-container pdg-container-height\" id=\"work-with-us\">\n        <div class=\"pdg-container\">\n            <div class=\"row order-2 order-md-1\">\n                    <div class=\"col-md-10 offset-md-1\">\n                        <div class=\"pdg-container-lottie pdg-fade-in\">\n                            <client-only>\n                                <Vue3Lottie :animationLink=\"`/assets/lottie/asterisk${globalState.mode === 'normal' ? '' : '-crazy'}.json`\" />\n                            </client-only>\n                        </div>\n\n                        <div class=\"pdg-title\">\n                            <h1 class=\"pdg-display\">{{ translations?.['work-with-us']?.title }}</h1>\n                        </div>\n                    </div>\n\n                 <div class=\"pdg-contact offset-2 col-10 col-md-4 offset-md-6 pdg-fade-in\">\n                    <p class=\"pdg-body-2 pdg-margin-p\">\n                        {{ translations?.['work-with-us']?.['contact-description'] }}\n                    </p>\n                    <ArrowLink\n                        :text=\"translations?.['work-with-us']?.['contact-button']\"\n                        href=\"mailto: info@paradigma.me\"\n                        :external=\"true\"\n                        class=\"pdg-contact-link \"\n                    />\n                </div>\n            </div>\n\n            <div class=\"pdg-slider-work-with-us pdg-fade-in order-1 order-md-2\">\n                <h2 class=\"pdg-subhead-2\">{{ translations?.['work-with-us']?.['title-slider'] }}</h2>\n                <div class=\"pdg-container-logos\">\n                    <div class=\"pdg-slider-work-with-us-gradient left\"></div>\n                    <div class=\"pdg-slider-container\">\n                        <NuxtImg\n                            v-for=\"(item, index) in sliderLogos.reverse()\"\n                            class=\"pdg-logo\"\n                            :alt=\"translations?.['work-with-us']?.['alt-slider']?.[index]\"\n                            :src=\"`/assets/img/${globalState.mode}/work-with-us/${item}.svg`\"\n                            loading=\"lazy\"\n                        />\n                    </div>\n                    <div class=\"pdg-slider-work-with-us-gradient\"></div>\n                </div>\n            </div>\n        </div>\n    </section>\n</template>\n\n<style scoped lang=\"scss\">\n    @import \"../scss/includes.scss\";\n\n    .pdg-container-section {\n        color: var(--body-0);\n        /* min-height: 100vh; */\n        display: flex;\n        padding: vh(56) 0;\n        align-items: center;\n\n        .pdg-container {\n            display: flex;\n            flex-direction: column;\n\n            .pdg-container-lottie {\n                width: 58.33333333%;\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    width: 25%;\n                }\n            }\n\n            .pdg-title {\n                padding-top: rem(32);\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    padding-top: rem(24);\n                }\n            }\n\n            .pdg-contact {\n                padding-top: rem(24);\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    padding-top: rem(32);\n                }\n\n                .pdg-margin-p {\n                    margin: 0;\n                }\n\n                .pdg-contact-link {\n                    color: var(--body-7);\n                }\n            }\n\n        .pdg-slider-work-with-us {\n            padding-bottom: rem(100);\n            position: relative;\n\n            .pdg-slider-work-with-us-gradient {\n                position: absolute;\n                top: 0;\n                right: 0;\n                bottom: 0;\n                width: rem(64);\n                background: linear-gradient(-90deg, var(--bg-4), rgba(#246399, 0));\n                z-index: 1;\n                pointer-events: none;\n\n                @media screen and (min-width: map-get($breakpoints, sm)) {\n                    width: rem(72);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    width: rem(236);\n                }\n\n                &.left {\n                    right: initial;\n                    left: 0;\n                    background: linear-gradient(90deg, var(--bg-4), rgba(#246399, 0));\n                }\n            }\n\n            @media screen and (min-width: map-get($breakpoints, md)) {\n                margin-top: rem(32);\n                padding-bottom: 0;\n            }\n\n            .pdg-subhead-2 {\n                padding-bottom: rem(16);\n                margin: 0;\n\n                    @media screen and (min-width: map-get($breakpoints, md)) {\n                        padding-bottom: rem(24);\n                    }\n                }\n\n                @keyframes slide {\n                    from {\n                        transform: translateX(0%);\n                    }\n\n                    to {\n                        transform: translateX(-150%);\n                    }\n                }\n\n                @-webkit-keyframes slide {\n                    from {\n                        -webkit-transform: translateX(0%);\n                    }\n\n                    to {\n                        -webkit-transform: translateX(-150%);\n                    }\n                }\n\n                .pdg-container-logos {\n                    overflow-x: hidden;\n                    white-space: nowrap;\n                    position: relative;\n                }\n\n                .pdg-slider-container {\n                    display: grid;\n                    gap: 8px;\n                    grid-template-columns: repeat(4, 1fr); /* number of visible images + width */\n                    overflow: hidden;\n\n                    @media screen and (min-width: map-get($breakpoints, sm)) {\n                        gap: 12px;\n                        grid-template-columns: repeat(6, 1fr); /* number of visible images + width */\n                    }\n\n                    @media screen and (min-width: map-get($breakpoints, md)) {\n                        gap: 24px;\n                        grid-template-columns: repeat(8, 1fr); /* number of visible images + width */\n                    }\n\n                    @media screen and (min-width: map-get($breakpoints, lg)) {\n                        grid-template-columns: repeat(10, 1fr); /* number of visible images + width */\n                    }\n\n                    $n: 26;\n                    /* reference: https://verpex.com/blog/website-tips/how-to-create-a-css-only-infinite-scroll-animation */\n\n                    @keyframes r {\n                        #{calc(100% / ($n + ($n - 2) * 0.24))} {\n                            transform: translate(-100%);\n                            opacity: 0;\n                        }\n                        #{calc(100% / ($n + ($n - 2) * 0.24) + 0.1%)} {\n                            transform: translate(calc(($n - 1 + ($n - 2) * 0.24) * 100%));\n                            opacity: 0;\n                        }\n                        #{calc(100% / ($n + ($n - 2) * 0.24) + 0.2%)} {\n                            opacity: 1;\n                        }\n                    }\n                   \n\n                    @for $i from 1 to ($n + 2) {\n                        & > .pdg-logo:nth-child(#{$i}) {\n                            animation-delay: #{calc((1 - $i) / $n) * 40s}\n                        }\n                    }\n\n                    .pdg-logo {\n                        height: rem(68);\n                        width: auto;\n                        grid-area: 1/1;\n                        width: 100%;\n                        animation: r 40s linear infinite;\n                        animation-play-state: paused;\n                        -webkit-animation-play-state: paused;\n\n                        @media screen and (min-width: map-get($breakpoints, md)) {\n                            height: rem(120);\n                        }\n                    }\n                }\n            }\n        }\n    }\n</style>\n\n<script setup lang=\"ts\">\n    import { onMounted } from \"vue\";\n    import gsap from \"gsap\";\n    import { ScrollTrigger } from \"gsap/all\";\n    import { textAnimation } from \"~/utils/animations.utils\";\n\n    const { locale } = useI18n();\n    const globalState = useGlobalState();\n\n    const sliderLogos = [\n        'telepass-logo',\n        'ibm-logo',\n        'campari-logo',\n        'poke-house-logo',\n        'dxc-logo',\n        'tinexta-group-logo',\n        'enel-logo',\n        'eni-logo',\n        'cosmico-logo',\n        'thomson-reuters-foundation-logo',\n        'trenitalia-logo',\n        'app-io-logo',\n        'snai-logo',\n        'snam-logo',\n        'tim-logo',\n        'manitese-logo',\n        'nutribees-logo',\n        'prestat-logo',\n        'eclittica-logo',\n        'motork-logo',\n        'moak-logo',\n        'nurale-logo',\n        'numbers-logo',\n        'eatsready-logo',\n        'steve-jobs-academy-logo',\n        'leonardo-logo'\n    ]\n\n    const { data: translations } = await useAsyncData('translations', async () => {\n        const res = await $fetch<any>(`/api/translations?lang=${locale.value}&mode=${globalState.value.mode}`)\n        return res\n    }, { watch: [locale, globalState] })\n\n    onMounted(() => {\n        if (process.client) {\n            nextTick(() => {\n                const container = document.querySelector(\".pdg-work-with-us-container\") as HTMLElement;\n\n                if(container) {\n\n                    const mm = gsap.matchMedia(), breakPoint = 1024;\n                    mm.add(\n                    {\n                        isDesktop: `(min-width: ${breakPoint}px)`,\n                        isMobile: `(max-width: ${breakPoint - 1}px)`,\n                    }, () => {\n\n                        const linearBlue = 'linear-gradient(-90deg, rgb(36, 99, 153), rgba(36, 99, 153, 0)';\n                        const linearDarkBlue = 'linear-gradient(-90deg, rgb(10, 40, 67), rgba(10, 40, 67, 0))';\n                        const linearGreen = 'linear-gradient(-90deg, rgb(195, 247, 58), rgba(195, 247, 58, 0))';\n                        const linearWhite = 'linear-gradient(-90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0))';\n                        const linearPink = 'linear-gradient(-90deg, rgb(255, 192, 213), rgba(255, 192, 213, 0)';\n                        const linearBlueLeft = 'linear-gradient(90deg, rgb(36, 99, 153), rgba(36, 99, 153, 0)';\n                        const linearDarkBlueLeft = 'linear-gradient(90deg, rgb(10, 40, 67), rgba(10, 40, 67, 0))';\n                        const linearGreenLeft = 'linear-gradient(90deg, rgb(195, 247, 58), rgba(195, 247, 58, 0))';\n                        const linearWhiteLeft = 'linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0))';\n                        const linearPinkLeft = 'linear-gradient(90deg, rgb(255, 192, 213), rgba(255, 192, 213, 0)';\n                        const logos = gsap.utils.toArray('.pdg-container-section .pdg-logo').reverse()\n\n                        const startAnimation = gsap.timeline()\n                            .to(\n                                \".pdg-container-section .pdg-logo\",\n                                {\n                                    animationPlayState: \"running\"\n                                },\n                            )\n                            .fromTo(\n                                \".pdg-container-lottie, .pdg-container-section .pdg-fade-in\",\n                                {\n                                    y: 50,\n                                    opacity: 0\n                                },\n                                {\n                                    y: 0,\n                                    opacity: 1,\n                                    stagger: 0.2,\n                                    ease: \"power1\",\n                                    onComplete: function () {\n                                        gsap.set(this.targets(), { clearProps: \"all\" })\n                                    },\n                                },\n                                'entry'\n                            )\n                            .fromTo(\n                                \".pdg-work-with-us-container .pdg-slider-container\",\n                                { opacity: 0 },\n                                {\n                                    opacity: 1,\n                                    stagger: 0.1,\n                                    ease: \"power1\",\n                                },\n                                'entry'\n                            )\n\n                        //ANIMATION DELAY\n                        animationDelay(startAnimation, container);\n\n                        //TITLE ANIMATION\n                        textAnimation({\n                            split: true,\n                            tl: startAnimation,\n                            container: \".pdg-work-with-us-container .pdg-title\",\n                            elements: [\".pdg-display\"],\n                            from: { yPercent: 100, opacity: 0 },\n                            to: { yPercent: 0, opacity: 1, duration: 0.4, ease: \"power1\" },\n                            keyframe: 'entry'\n                        });\n\n                            ScrollTrigger.create({\n                            animation: startAnimation,\n                            trigger: \".pdg-work-with-us-container\",\n                            start: \"top 50%\",\n                            end: \"bottom 50%\",\n                            id: \"WORKWITHUS\",\n                            toggleActions: \"play reverse play reverse\",\n                            preventOverlaps: true,\n                            // markers: { startColor: \"black\", endColor: \"yellow\", fontSize: '30', },\n                            onEnter: () => {\n                                setTimeout (() => {\n                                    gsap.to(\".pdg-slider-work-with-us-gradient\", {\n                                        background: globalState.value.mode === 'normal' ? linearBlue : linearGreen,\n                                    });\n                                    gsap.to(\".pdg-slider-work-with-us-gradient.left\", {\n                                        background: globalState.value.mode === 'normal' ? linearBlueLeft : linearGreenLeft,\n                                    });\n        \n                                    gsap.to(\"body\", {\n                                        backgroundColor: globalState.value.mode === 'normal' ? '#246399' : '#c3f73a',\n                                    });\n        \n                                    gsap.to( \".content-menu\", {\n                                        background: globalState.value.mode === 'normal' ? '#246399' : '#c3f73a',\n                                    })\n                                }, 0)\n                            },\n                            onLeave: () => {\n                                setTimeout (() => {\n                                    gsap.to(\".pdg-slider-work-with-us-gradient\", { \n                                        background: linearDarkBlue,\n                                    });\n                                    gsap.to(\".pdg-slider-work-with-us-gradient.left\", { \n                                        background: linearDarkBlueLeft,\n                                    });\n                                }, 0)\n                            },\n                            onEnterBack: () => {\n                                setTimeout (() => {\n                                    gsap.to(\".pdg-slider-work-with-us-gradient\", {\n                                        background: globalState.value.mode === 'normal' ? linearBlue : linearGreen,\n                                    });\n                                    gsap.to(\".pdg-slider-work-with-us-gradient.left\", {\n                                        background: globalState.value.mode === 'normal' ? linearBlueLeft : linearGreenLeft,\n                                    });\n                                }, 0)\n                            },\n                            onLeaveBack: () => {\n                                setTimeout (() => {\n                                    gsap.to(\".pdg-slider-work-with-us-gradient\", {\n                                        background: globalState.value.mode === 'normal' ? linearWhite : linearPink,\n                                    });\n                                    gsap.to(\".pdg-slider-work-with-us-gradient.left\", {\n                                        background: globalState.value.mode === 'normal' ? linearWhiteLeft : linearPinkLeft,\n                                    });\n                                }, 0)\n                            },\n                        });\n                    }\n                )}\n            })\n        }\n    });\n</script>","<template>\n    <footer class=\"pdg-footer-container pdg-container-height\">\n        <div id=\"wrap\" class=\"pdg-mouse-container\" ref=\"mouseContainer\">\n            <div v-if=\"globalState.mode === 'crazy'\">\n                <div v-for=\"(item, index) in startArray\" :key=\"index\">\n                    <NuxtImg\n                        class=\"pdg-follow-image\" \n                        :src=\"translations?.footer?.sticker?.[item]?.['img-sticker']\"\n                        :alt=\"translations?.footer?.sticker?.[item]?.['img-alt']\"\n                        :style=\"{'z-index': reversedArray[index] + 1}\"\n                        loading=\"lazy\"\n                        sizes=\"150px\"\n                    />\n                </div>\n            </div>\n        <div class=\"pdg-container\">\n            <div class=\"pdg-relative-container\">\n            <div class=\"row\">\n                <div class=\"col-md-11 offset-md-1\">\n                    <div class=\"pdg-asterisk\">\n                        <NuxtImg\n                            class=\"pdg-asterisk-img\"\n                            src=\"/assets/img/asterisk.svg\"\n                            alt=\"asterisk\"\n                            loading=\"lazy\"\n                        />\n                    </div>\n\n                    <div class=\"pdg-footer-title\">\n                        <h1 class=\"pdg-display\">\n                            {{ translations?.footer?.title?.main }}\n                        </h1>\n                        <a\n                            href=\"mailto: info@paradigma.me\"\n                            class=\"pdg-display-2\"\n                        >\n                            {{ translations?.footer?.title?.sub }}\n                        </a>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"pdg-info-container row\">\n                <div\n                    class=\"pdg-company-info pdg-body-2 pdg-fade-in col-md-4 offset-md-1\"\n                >\n                    <p class=\"pdg-paragraph-info\">\n                        {{ translations?.footer?.companyInfo?.companyName }}\n                    </p>\n                    <address\n                        class=\"pdg-address-info\"\n                        v-html=\"translations?.footer?.companyInfo?.address\"\n                    ></address>\n                    <p>\n                        {{ translations?.footer?.companyInfo?.vatNumber }}\n                    </p>\n                    <a\n                        class=\"pdg-link-decoration pdg-animated-underline\"\n                        href=\"mailto: info@paradigma.me\"\n                    >\n                        info@paradigma.me\n                    </a>\n                </div>\n\n                <ul class=\"pdg-policy-list pdg-body-3 pdg-fade-in col-md-3\">\n                    <li class=\"pdg-policy-list-element\">\n                        <a\n                            class=\"pdg-link-decoration pdg-animated-underline\"\n                            href=\"https://www.iubenda.com/privacy-policy/37616530\"\n                            target=\"_blank\"\n                        >\n                            {{ translations?.footer?.policyList?.privacyPolicy }}\n                        </a>\n                    </li>\n                    <li class=\"pdg-policy-list-element\">\n                        <a\n                            class=\"pdg-link-decoration pdg-animated-underline\"\n                            href=\"https://www.iubenda.com/privacy-policy/37616530/cookie-policy\"\n                            target=\"_blank\"\n                        >\n                            {{ translations?.footer?.policyList?.cookiePolicy }}\n                        </a>\n                    </li>\n                    <li class=\"pdg-policy-list-element\">\n                        <NuxtLink\n                            class=\"pdg-link-decoration pdg-animated-underline\"\n                            to=\"/assets/politica-paradigma.pdf\"\n                            target=\"_blank\"\n                            external\n                        >\n                            {{ translations?.footer?.policyList?.policy }}\n                        </NuxtLink>\n                    </li>\n                </ul>\n\n                <ul class=\"pdg-social pdg-fade-in col-md-3\">\n                    <li>\n                        <a\n                            class=\"pdg-social-icon\"\n                            target=\"_blank\"\n                            href=\"https://www.linkedin.com/company/paradigma-innovation/\"\n                            aria-label=\"linkedin\"\n                        >\n                            <i class=\"icon-linkedin\"></i>\n                        </a>\n                    </li>\n                    <li>\n                        <a\n                            class=\"pdg-social-icon\"\n                            target=\"_blank\"\n                            href=\"https://www.facebook.com/ParadigmaInnovation\"\n                            aria-label=\"facebook\"\n                        >\n                            <i class=\"icon-facebook\"></i>\n                        </a>\n                    </li>\n                    <li>\n                        <a\n                            class=\"pdg-social-icon\"\n                            target=\"_blank\"\n                            href=\"https://www.behance.net/paradiginnovation?tracking_source=search_users|paradigma\"\n                            aria-label=\"behance\"\n                        >\n                            <i class=\"icon-behance\"></i>\n                        </a>\n                    </li>\n                    <li>\n                        <a\n                            class=\"pdg-social-icon\"\n                            target=\"_blank\"\n                            href=\"https://www.instagram.com/paradigma_inn/\"\n                            aria-label=\"instagram\"\n                        >\n                            <i class=\"icon-instagram\"></i>\n                        </a>\n                    </li>\n                </ul>\n\n                <button\n                    type=\"button\"\n                    class=\"pdg-back-to-top\"\n                    @click=\"scrollToTop()\"\n                    @mouseover=\"scale\"\n                    @mouseleave=\"scale\"\n                    @focusin=\"scale\"\n                    @focusout=\"scale\"\n                    :aria-label=\"translations?.footer?.['back-to-top']\"\n                >\n                    <i class=\"icon-arrow-up\"></i>\n                </button>\n            </div>\n        </div>\n\n            <div class=\"pdg-rights-languages pdg-fade-in row\">\n                <div\n                   class=\"col-md-3 order-md-3\">\n                    <ul class=\"pdg-switch-language\">\n                        <li\n                            class=\"pdg-language-list pdg-body-3\"\n                            v-for=\"(localeObject, index) in availableLocales\"\n                            :key=\"index\">\n                                <a\n                                    class=\"pdg-style-link pdg-animated-underline\"\n                                    :class=\"{'router-link-exact-active': locale === (localeObject as LocaleObject).code}\"\n                                    :href=\"switchLocalePath((localeObject as LocaleObject).code)\">\n                                    <span class=\"pdg-span-inline-block\"> {{ (localeObject as LocaleObject).name }} </span>\n                                </a>\n                        </li>\n                    </ul>\n                </div>\n\n                <p class=\"pdg-label-2 pdg-margin-rights col-6 col-sm-3 col-md-4 order-md-1 offset-md-1\">\n                    {{ translations?.footer?.['right-reservered']?.copyright }}\n                </p>\n\n                <p class=\"pdg-label-2 col-6 col-sm-3 col-md-3 order-md-2\">\n                    {{ translations?.footer?.['right-reservered']?.rightsReserved }}\n                </p>\n            </div>\n        </div>\n    </div>\n  </footer>\n</template>\n\n<script setup lang=\"ts\">\n    import gsap from \"gsap\";\n    import { ScrollTrigger } from \"gsap/all\";\n    import { LocaleObject } from '@nuxtjs/i18n/dist/runtime/composables';\n    const globalState = useGlobalState();\n\n    const startArray = Array.from(Array(10).keys());\n    const reversedArray = [...startArray].reverse();\n    \n    const { locales, locale } = useI18n();\n    const switchLocalePath = useSwitchLocalePath()\n    const availableLocales = computed(() => locales.value.filter((locale: string|LocaleObject) => (locale as LocaleObject).code !== locale));\n    const followBox: string = \"#wrap .pdg-follow-image\";\n    const mouseContainer = ref<HTMLDivElement>();\n    \n    const { data: translations } = await useAsyncData('translations', async () => {\n        const res = await $fetch<any>(`/api/translations?lang=${locale.value}&mode=${globalState.value.mode}`)\n        return res\n    }, { watch: [locale, globalState] })\n\n    const scrollToTop = () =>\n        window.scrollTo({\n            top: 0,\n            behavior: \"smooth\",\n        });\n\n    const scale = ({ target, type }: Event) => {\n        const t = (target as HTMLElement).closest(\n            \".pdg-back-to-top\"\n        ) as HTMLButtonElement | null;\n\n        if (t) {\n            let value = 1;\n\n            switch (type) {\n                case \"mouseover\":\n                case \"focusin\":\n                    value = 1.2;\n                    break;\n\n                default:\n                    value = 1;\n                    break;\n            }\n\n            t.style.transform = `scale(${value})`;\n        }\n    };\n\n    onMounted(() => {\n        if (process.client) {\n            \n            //CONTAINER\n            const container = document.querySelector(\".pdg-footer-container\") as HTMLElement;\n\n            if(container){\n                const imgSticker = document.querySelectorAll('.pdg-follow-image') as NodeListOf<HTMLImageElement>;\n\n                const mm = gsap.matchMedia(), breakPoint = 1024;\n                mm.add({\n                    isDesktop: `(min-width: ${breakPoint}px)`,\n                    isMobile: `(max-width: ${breakPoint - 1}px)`,\n                }, ({ conditions }) => {\n                    const { isDesktop } = conditions as gsap.Conditions;\n\n                    const startAnimation = gsap\n                    .timeline()\n                    .fromTo(\n                        \".pdg-footer-container .pdg-footer-title\",\n                        { opacity: 0 },\n                        { opacity: 1, duration: 0.1 },\n                        \"entry +=0\"\n                    )\n                    .fromTo(\n                        \".pdg-footer-container .pdg-asterisk-img\",\n                        { scale: 0, rotate: 0, opacity: 0 },\n                        { scale: 1, rotate: \"180deg\", opacity: 1 },\n                        \"entry\"\n                    )\n                    .fromTo(\n                        \".pdg-footer-container .pdg-fade-in\",\n                        { yPercent: 50, opacity: 0 },\n                        { yPercent: 0, stagger: 0.1, duration: 0.4, opacity: 1 },\n                        \"entry +=0\"\n                    )\n                    .fromTo(\n                        \".pdg-footer-container .pdg-back-to-top\",\n                        { scale: 0, rotateY: 0, opacity: 0 },\n                        { scale: 1, duration: 0.4, opacity: 1, transition: \"0.3s ease-in-out\", },\n                        \"entry +=0\"\n                    )\n\n                    animationDelay(startAnimation, container);\n\n                    textAnimation({\n                        split: true,\n                        tl: startAnimation,\n                        container: \".pdg-footer-title\",\n                        elements: [\".pdg-display\", \".pdg-display-2\"],\n                        from: { yPercent: 100, opacity: 0 },\n                        to: { yPercent: 0, opacity: 1 },\n                        keyframe: \"entry\",\n                    });\n\n                    ScrollTrigger.create({\n                    animation: startAnimation,\n                    trigger: \".pdg-footer-container\",\n                    start: \"top 50%\",\n                    end: \"bottom 50%\",\n                    preventOverlaps: true,\n                    id: \"FOOTER\",\n                    toggleActions: \"play reverse play reverse\",\n                    // markers: {startColor: \"black\", endColor: \"red\", fontSize: '30'},\n                    onEnter: () => {\n                        setTimeout (() => {\n                            gsap.to(\"body\", {\n                                backgroundColor: '#0a2843',\n                            });\n                            gsap.to( \".content-menu\", {\n                                background: '#0a2843'\n                            })\n                        }, 0)\n                    },\n                    onLeaveBack: () => {\n                        setTimeout (() => {\n                            gsap.to(\"body\", {\n                                backgroundColor: globalState.value.mode === 'normal' ? '#246399' : '#c3f73a',\n                            });\n                            gsap.to( \".content-menu\", {\n                                background: globalState.value.mode === 'normal' ? '#246399' : '#c3f73a',\n                            })\n                        }, 0)\n                    }\n                });\n\n                    if (globalState.value.mode === 'crazy') {\n                        let mousePosition = { clientX: 0, clientY: 0 };\n\n                        if (isDesktop) {\n                            gsap.set(followBox, {\n                                xPercent: -50,\n                                yPercent: -20,\n                            });\n\n                            startAnimation.fromTo(\n                                imgSticker,\n                                { opacity: 0 },\n                                { opacity: 1 },\n                                \"entry +=0\"\n                            )\n\n                            const handleStickerMove =\n                                ({ clientX, clientY }: Partial<MouseEvent>) => {\n\n                                    if (clientX && clientX >= 0 && clientY && clientY >= 0 && mouseContainer) {\n                                        mousePosition.clientX = clientX;\n                                        mousePosition.clientY = clientY;\n\n                                        const footerTop = mouseContainer.value?.getBoundingClientRect();\n\n                                        if (footerTop && clientY >= footerTop.top) {\n\n                                            gsap.to(followBox, {\n                                                duration: 0.5,\n                                                overwrite: \"auto\",\n                                                x: clientX,\n                                                y: clientY - (mouseContainer.value?.getBoundingClientRect().y || 0),\n                                                stagger: 0.15,\n                                                ease: \"none\"\n                                            });\n\n                                            gsap.timeline({\n                                                defaults: { duration: 0.5, ease: \"none\" }\n                                            })\n                                            .to(followBox,\n                                            {\n                                                overwrite: \"auto\",\n                                                stagger: { amount: 0.15, from: \"start\", ease: \"none\" }\n                                            })\n                                            .to(followBox,\n                                            {\n                                                overwrite: \"auto\",\n                                                stagger: { amount: 0.15, from: \"end\", ease: \"none\" }\n                                            }, \"+=2.5\")\n                                        }\n                                    }\n                                };\n                            container.addEventListener(\"mousemove\", handleStickerMove);\n                            window.addEventListener(\"scroll\", () => {\n                                if (container.getBoundingClientRect().top <= (window.innerHeight / 2)) {\n                                    handleStickerMove(mousePosition)\n                                }\n                            })\n                        } else {\n                            container.removeEventListener(\"mousemove\", () => {});\n                            window.removeEventListener(\"scroll\", () => {});\n                            gsap.set(\n                                imgSticker,\n                                { opacity: 0 },\n                            )\n                        };\n                    }\n                })\n            }\n        }\n    });\n</script>\n\n<style scoped lang=\"scss\">\n    @import \"../scss/includes.scss\";\n\n    .pdg-footer-container {\n        color: var(--light);\n        position: relative;\n        overflow: visible;\n\n        .pdg-mouse-container {\n            width: 100%;\n            min-height: 100vh;\n            padding: rem(116) 0 rem(56);\n\n            @media screen and (min-width: map-get($breakpoints, md)) {\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                padding: rem(148) 0 rem(36);\n            }\n\n            .pdg-follow-image {\n                position: absolute;\n                top: 0;\n                left: 0;\n                pointer-events: none;\n                width: auto;\n                height: rem(250);\n            }\n        }\n\n        .pdg-relative-container {\n            position: relative;\n        }\n\n        .pdg-container {\n            z-index: 15;\n            .pdg-asterisk {\n                .pdg-asterisk-img {\n                    width: auto;\n                    height: rem(32);\n\n                    @media screen and (min-width: map-get($breakpoints, md)) {\n                        height: rem(66);\n                    }\n                }\n            }\n\n            .pdg-footer-title {\n                padding-top: rem(16);\n\n                .pdg-display {\n                    margin: 0;\n                }\n\n                .pdg-display-2 {\n                    position: relative;\n                    display: inline-block;\n                    color: var(--light);\n                    text-decoration: none;\n\n                    &:hover,\n                    &:focus  {\n                        color: var(--green);\n\n                        &::after {\n                            background-color: var(--green);\n                        }\n                    }\n\n                    &:after {\n                        content: \"\";\n                        position: absolute;\n                        width: 100%;\n                        height: rem(3);\n                        background-color: var(--light);\n                        bottom: 0;\n                        left: 0;\n                    }\n                }\n            }\n\n            .pdg-link-decoration {\n                text-decoration: none;\n                color: currentColor;\n            }\n\n            .pdg-info-container {\n                align-items: flex-start;\n                padding-top: rem(32);\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    padding-top: rem(80);\n                }\n            }\n\n            .pdg-company-info {\n                .pdg-paragraph-info {\n                    font-weight: 500;\n                    margin-bottom: 0;\n                }\n\n                .pdg-address-info {\n                    margin-bottom: 0;\n                }\n            }\n\n            .pdg-policy-list,\n            .pdg-social {\n                list-style: none;\n                margin: 0;\n                line-height: rem(30);\n            }\n\n            .pdg-policy-list {\n                padding-top: rem(32);\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    padding-top: 0;\n                }\n            }\n\n            .pdg-social {\n                display: flex;\n                padding-top: rem(80);\n                font-size: rem(30);\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    padding-top: 0;\n                }\n\n                .pdg-social-icon {\n                    display: flex;\n                    width: rem(40);\n                    height: rem(40);\n                    padding: rem(4);\n                    justify-content: center;\n                    align-items: center;\n                    background-color: var(--light);\n                    color: var(--dark);\n                    border-radius: 100%;\n                    margin-right: rem(16);\n                    text-decoration: none;\n                    transition: transform 0.3s ease-in-out;\n\n                    &:hover,\n                    &:focus {\n                        background-color: var(--green);\n                    }\n                }\n            }\n\n            .pdg-back-to-top {\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                background-color: var(--green);\n                color: var(--blue);\n                width: rem(62);\n                height: rem(62);\n                border-radius: 100%;\n                position: absolute;\n                right: 0;\n                bottom: rem(8);\n                cursor: pointer;\n                border: none;\n                font-size: rem(22);\n                line-height: rem(22);\n                z-index: 50;\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    bottom: rem(-16);\n                }\n\n                @media screen and (min-width: map-get($breakpoints, lg)) {\n                    bottom: rem(16);\n                }\n\n                &:focus {\n                    border: rem(1) solid var(--light-blue);\n                }\n            }\n\n             .pdg-rights-languages {\n                padding-top: rem(48);\n\n                @media screen and (min-width: map-get($breakpoints, md)) {\n                    align-items: center;\n                }\n\n                .pdg-label-2 {\n                    margin-bottom: 0;\n                }\n\n                .pdg-switch-language {\n                    display: flex;\n                    padding-bottom: rem(32);\n                    margin-bottom: 0;\n                    padding-left: 0;\n\n                    @media screen and (min-width: map-get($breakpoints, md)) {\n                        padding-bottom: 0;\n                    }\n\n                    .pdg-language-list {\n                        list-style: none;\n\n                        &:first-child::after {\n                            content: \"-\";\n                            padding: 0 rem(16);\n                        }\n\n                        .pdg-span-inline-block {\n                            display: inline-block;\n                        }\n                    }\n\n                    .pdg-style-link {\n                        text-decoration: none;\n                        color: var(--white);\n                        \n                        &:hover,\n                        &:focus,\n                        &:focus-visible,\n                        &.router-link-exact-active { \n                            &::after {\n                                width: 100%;\n                            }\n                        }\n                        &.router-link-exact-active {\n                            color: var(--green);\n                            transition: transform 0.3s ease-in-out;\n                        }\n                    }\n                }\n            }\n        }\n    }\n</style>"],"names":["gsap","_coreInitted","_window","_docEl","_body","_toArray","_config","ScrollTrigger","_windowExists","_getGSAP","_isString","value","_isFunction","_max","element","axis","dim","scroll","client","_buildGetter","e","p","_clean","index","target","targets","result","_getOffset","container","rect","isRoot","cRect","offsets","_parseVal","currentVal","offset","_initCore","ScrollToPlugin","core","tween","data","snapType","ratio","pt","autoKill","xPrev","yPrev","isWin","snap","snapInline","x","y","yDif","xDif","threshold","property","both","sidebar","ref","currentSection","initialSection","currentColor","colorSections","sections","nextSection","globalState","useGlobalState","hidden","hiddenClasses","locale","useI18n","translations","__temp","__restore","_withAsyncContext","useAsyncData","onMounted","nextTick","onScroll","onUnmounted","windowY","isOnHeader","_a","offsetTop","offsetHeight","className","topValue","section","i","positionSection","startChangeColor","sidebarHeight","hiddenClass","scrollToSection","_hoisted_1","_hoisted_6","_sfc_render","_ctx","_cache","_imports_0","_imports_1","videoContainer","watchEffect","htmlPage","props","headerContainer","modalContainer","playVideoBtn","mousePosition","handleMouseMove","clientX","clientY","handleCloseModal","videoDescription","mm","breakPoint","smBreakpoint","mobileMiniBreakPoint","mobileVerticalBreakPoint","mobileHorizontalBreakPoint","conditions","startAnimation","animationDelay","textAnimation","isHover","isDesktop","isTablet","isMobileHorizontal","isMobileMini","isMobileMiniVertical","tl","duration","delay","autoScroll","modalIsOpen","toggleModal","modalVideo","blockScroll","key","handleBackdropCloseModal","isMobile","updateIsMobile","slidesContainer","horizontalSliderAnimation","blockHorizontalSliderAutoScroll","q","slides","moveHandle","containerRect","relX","relY","slide","movement","resetImagesTransform","autoHorizontalScroll","durationSeconds","animation","imageAnimation","stickers","getVelocity","adjectives","currentAdjectiveIndex","adjectiveTimeout","setAdjective","adjectiveIndex","closeAll","openAnimation","adjectivesContainer","prevNextAdjective","direction","targetIndex","closeAnimation","sliderControls","chipAnimation","brands","currentBrandIndex","animationBlock","animationBlockTLProps","prevNextBrand","changeBrandAnimation","newIndex","slidesColor","slidesPrinciples","track","currentScrollLeft","trackChild","targetOffset","colorBorderIndex","chip","chipWidth","exitAnimation","Power1","slideAnimatedImage","imgPathNormal","imgPathCrazy","themeChip","infoChipArray","chipMain","chipsWithoutMain","navbarHeight","sectionContainer","paddingSkill","isActive","technologies","skills","toggleIsActive","tabsBtn","tabs","tab","currentActiveTab","el","activeTab","items","animationImageHover","sliderLogos","linearBlue","linearDarkBlue","linearGreen","linearWhite","linearPink","linearBlueLeft","linearDarkBlueLeft","linearGreenLeft","linearWhiteLeft","linearPinkLeft","followBox","startArray","reversedArray","locales","switchLocalePath","useSwitchLocalePath","availableLocales","computed","mouseContainer","scrollToTop","scale","type","t","imgSticker","handleStickerMove","footerTop","_b"],"mappings":"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","x_google_ignoreList":[0]}