{"version":3,"sources":["webpack:///./src/views/Start.vue?4c65","webpack:///./src/views/Start.vue?6f34","webpack:///src/views/Start.vue","webpack:///./src/views/Start.vue?413e","webpack:///./src/views/Start.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_l","index","key","_m","attrs","buttons","staticRenderFns","_v","component"],"mappings":"yIAAA,W,yCCAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,cAAc,CAACF,EAAG,MAAM,CAACE,YAAY,mBAAmB,CAACF,EAAG,MAAM,CAACE,YAAY,gBAAgBN,EAAIO,GAAG,GAAI,SAASC,GAAO,OAAOJ,EAAG,MAAM,CAACK,IAAID,EAAMF,YAAY,oBAAmB,GAAGF,EAAG,MAAM,CAACE,YAAY,gBAAgBN,EAAIO,GAAG,GAAI,SAASC,GAAO,OAAOJ,EAAG,MAAM,CAACK,IAAID,EAAMF,YAAY,oBAAmB,KAAKN,EAAIU,GAAG,GAAGN,EAAG,MAAM,CAACO,MAAM,CAAC,QAAUX,EAAIY,QAAQ,KAAO,4CAA4C,IAC7gBC,EAAkB,CAAC,WAAa,IAAIb,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,WAAW,CAACF,EAAG,MAAM,CAACE,YAAY,WAAW,CAACF,EAAG,MAAM,CAACE,YAAY,kBAAkB,CAACF,EAAG,OAAO,CAACE,YAAY,SAAS,CAACN,EAAIc,GAAG,cAAcV,EAAG,MAAM,CAACE,YAAY,qBAAqB,CAACF,EAAG,OAAO,CAACE,YAAY,YAAY,CAACN,EAAIc,GAAG,yB,oCC4BpW,KAEA,IACE,MAAF,SACE,SAAF,cACE,YAAF,yCACA,CACE,MAAF,OACE,SAAF,cACE,YAAF,6BACA,CACE,MAAF,UACE,SAAF,gBACE,YAAF,uCAGA,GACE,KAAF,QACE,WAAF,CACI,IAAJ,QAEE,KALF,WAMI,MAAJ,CACM,QAAN,EACQ,MAAR,QACQ,GAAR,eACQ,SAAR,MACA,CACQ,MAAR,QACQ,GAAR,eACQ,SAAR,MACA,CACQ,MAAR,SACQ,GAAR,eACQ,SAAR,SAIE,QAAF,CACI,eADJ,WAEM,IAAN,2CACA,8CACA,+CAEA,IAEM,EAAN,iBACQ,QAAR,EACQ,QAAR,EACQ,MAAR,EACQ,YAAR,EACQ,SAAR,WACU,GAAV,EACA,eACY,EAAZ,MAKM,EAAN,MACQ,EAAR,OACQ,SAAR,GACQ,KAAR,YACQ,WAAR,WACU,EAAV,0BAEA,GAEM,EAAN,MACQ,EAAR,QACQ,SAAR,GACQ,KAAR,YACQ,WAAR,WACU,EAAV,6BAEA,GAEM,EAAN,MACQ,UAAR,EACQ,SAAR,GACQ,KAAR,YACQ,WAAR,WACU,EAAV,gCAEA,GAEM,EAAN,MACQ,EAAR,KACQ,SAAR,GACQ,KAAR,cACA,IAEM,EAAN,MACQ,EAAR,KACQ,SAAR,GACQ,KAAR,cACA,IAEM,EAAN,MACQ,UAAR,EACQ,SAAR,GACQ,KAAR,cACA,IAEM,EAAN,SAGE,QA3FF,WA2FI,IAAJ,OACI,KAAJ,iBAEI,YAAJ,WACM,EAAN,YACA,MAEE,cAlGF,WAmGA,yBACM,EAAN,SCjJ+U,I,wBCQ3UC,EAAY,eACd,EACAhB,EACAc,GACA,EACA,KACA,KACA,MAIa,aAAAE,E","file":"js/chunk-7a222c90.b0536aac.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Start.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"view-start\"},[_c('div',{staticClass:\"square__wrapper\"},[_c('div',{staticClass:\"square__line\"},_vm._l((4),function(index){return _c('div',{key:index,staticClass:\"square__item\"})}),0),_c('div',{staticClass:\"square__line\"},_vm._l((4),function(index){return _c('div',{key:index,staticClass:\"square__item\"})}),0)]),_vm._m(0),_c('Nav',{attrs:{\"buttons\":_vm.buttons,\"text\":\"Pour commencer, appuyez sur « Début »\"}})],1)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"content\"},[_c('div',{staticClass:\"heading\"},[_c('div',{staticClass:\"heading__title\"},[_c('span',{staticClass:\"title\"},[_vm._v(\"Reliez\")])]),_c('div',{staticClass:\"heading__subtitle\"},[_c('span',{staticClass:\"subtitle\"},[_vm._v(\"Les acteurs\")])])])])}]\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"view-start\">\n    <div class=\"square__wrapper\">\n      <div class=\"square__line\">\n        <div class=\"square__item\" v-for=\"index in 4\" :key=\"index\"></div>\n      </div>\n      <div class=\"square__line\">\n        <div class=\"square__item\" v-for=\"index in 4\" :key=\"index\"></div>\n      </div>\n    </div>\n    <div class=\"content\">\n      <div class=\"heading\">\n        <div class=\"heading__title\">\n          <span class=\"title\">Reliez</span>\n        </div>\n        <div class=\"heading__subtitle\">\n          <span class=\"subtitle\">Les acteurs</span>\n        </div>\n      </div>\n    </div>\n    <Nav :buttons=\"buttons\" text=\"Pour commencer, appuyez sur « Début »\"/>\n  </div>\n</template>\n\n<script>\n  import Nav from '@/components/partials/Nav'\n\n  import gsap from 'gsap'\n\n  let tl = {}\n\n  const heading = [{\n    title: 'Reliez',\n    subtitle: 'Les acteurs',\n    instruction: 'Pour commencer, appuyez sur « Début »'\n  }, {\n    title: 'Link',\n    subtitle: 'The players',\n    instruction: 'To begin, press « Start »'\n  }, {\n    title: 'Conecta',\n    subtitle: 'a los actores',\n    instruction: 'Para comenzar, presione « Inicio »'\n  }]\n\n  export default {\n    name: 'Start',\n    components: {\n      Nav\n    },\n    data() {\n      return {\n        buttons: [{\n          label: 'Début',\n          to: 'introduction',\n          language: 'fr'\n        }, {\n          label: 'Start',\n          to: 'introduction',\n          language: 'en'\n        }, {\n          label: 'Inicio',\n          to: 'introduction',\n          language: 'es'\n        }]\n      }\n    },\n    methods: {\n      animateHeading() {\n        const $title = document.getElementsByClassName('title')\n        const $subtitle = document.getElementsByClassName('subtitle')\n        const $instruction = document.getElementsByClassName('nav__text')\n\n        let index = 1\n\n        tl = gsap.timeline({\n          paused: true,\n          repeat: -1,\n          delay: 5,\n          repeatDelay: 5,\n          onRepeat: () => {\n            index += 1\n            if (index > heading.length - 1) {\n              index = 0\n            }\n          }\n        })\n\n        tl.to($title, {\n          y: '100%',\n          duration: 0.6,\n          ease: 'power4.in',\n          onComplete: () => {\n            $title[0].innerText = heading[index].title\n          }\n        }, 0)\n\n        tl.to($subtitle, {\n          y: '-120%',\n          duration: 0.6,\n          ease: 'power4.in',\n          onComplete: () => {\n            $subtitle[0].innerText = heading[index].subtitle\n          }\n        }, 0)\n\n        tl.to($instruction, {\n          autoAlpha: 0,\n          duration: 0.6,\n          ease: 'power4.in',\n          onComplete: () => {\n            $instruction[0].innerText = heading[index].instruction\n          }\n        }, 0)\n\n        tl.to($title, {\n          y: '0%',\n          duration: 0.6,\n          ease: 'power4.out'\n        }, 0.7)\n\n        tl.to($subtitle, {\n          y: '0%',\n          duration: 0.6,\n          ease: 'power4.out'\n        }, 0.7)\n\n        tl.to($instruction, {\n          autoAlpha: 1,\n          duration: 0.6,\n          ease: 'power4.out'\n        }, 0.7)\n\n        tl.play()\n      }\n    },\n    mounted() {\n      this.animateHeading()\n\n      setTimeout(() => {\n        this.loadFxs()\n      }, 800)\n    },\n    beforeDestroy() {\n      if (Object.keys(tl).length > 0) {\n        tl.kill()\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .view-start {\n    height: 100%;\n\n    .square {\n      &__wrapper {\n        @include fullcover;\n\n        width: 100%;\n        height: 100%;\n\n        z-index: 1;\n      }\n      &__line {\n        display: flex;\n        flex-wrap: nowrap;\n        width: 100%;\n        height: 50%;\n        overflow: hidden;\n\n        &:first-child {\n          .square__item {\n            &:first-child {\n              background-color: #960F20;\n\n              &::before {\n                clip-path: polygon(100% 0, 100% 100%, 0 100%);\n                background-color: #CB292F;\n              }\n            }\n            &:nth-child(2) {\n              background-color: #AD2B2B;\n\n              &::before {\n                clip-path: polygon(0 0, 100% 100%, 0 100%);\n                background-color:#960F20;\n              }\n            }\n            &:nth-child(3) {\n              background-color: $pink;\n\n              &::before {\n                clip-path: polygon(0 0, 100% 0, 0 100%);\n                background-color: #D54044;\n              }\n            }\n            &:nth-child(4) {\n              background-color: #D54044;\n\n              &::before {\n                clip-path: polygon(0 0, 100% 100%, 0 100%);\n                background-color: $pink;\n              }\n            }\n          }\n        }\n        &:last-child {\n          .square__item {\n            &:nth-child(1) {\n              background-color: #610D1A;\n\n              &::before {\n                clip-path: polygon(0 0, 100% 0, 100% 100%);\n                background-color: #7C0E1D;\n              }\n            }\n            &:nth-child(2) {\n              background-color: #702C37;\n\n              &::before {\n                clip-path: polygon(0 0, 100% 0, 0 100%);\n                background-color:#622029;\n              }\n            }\n            &:nth-child(3) {\n              background-color:#A32D34;\n\n              &::before {\n                clip-path: polygon(0 0, 100% 100%, 0 100%);\n                background-color:#960F20;\n              }\n            }\n            &:nth-child(4) {\n              background-color: $pink;\n\n              &::before {\n                clip-path: polygon(0 0, 100% 0, 0 100%);\n                background-color: $pink;\n              }\n            }\n          }\n        }\n      }\n      &__item {\n        position: relative;\n        overflow: hidden;\n        flex: 0 1 auto;\n        min-width: 30%;\n        height: 100%;\n\n        &::before {\n          content: '';\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n        }\n      }\n    }\n\n    .content {\n      position: absolute;\n      top: 50%;\n      left: 0;\n      width: 100%;\n      height: 50%;\n\n      color: $white;\n\n      z-index: 2;\n    }\n\n    .heading {\n      margin-left: 35%;\n\n      &__title {\n        position: relative;\n        font-size: 150px;\n        line-height: 1;\n        overflow: hidden;\n\n        .title {\n          display: block;\n        }\n      }\n      &__subtitle {\n        position: relative;\n        font-size: 70px;\n        line-height: 1.3;\n        overflow: hidden;\n\n        .subtitle {\n          display: block;\n        }\n      }\n    }\n\n    // Queries\n    @include mq($and: '(max-height: 800px)') {\n      .content {\n        top: 35%;\n      }\n    }\n\n    @include mq($until: wide, $and: '(orientation: landscape)') {\n      .content {\n        top: 50%;\n        height: auto;\n        transform: translateY(-50%);\n      }\n      .heading {\n        margin-left: 45%;\n\n        &__title {\n          font-size: 90px;\n        }\n        &__subtitle {\n          font-size: 50px;\n        }\n      }\n\n      .square {\n        &__line {\n          height: 100%;\n\n          .square__item {\n            width: 50%;\n\n            &:nth-child(3),\n            &:nth-child(4) {\n              display: none;\n            }\n          }\n\n          &:last-child {\n            display: none;\n          }\n        }\n      }\n    }\n  }\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Start.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Start.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Start.vue?vue&type=template&id=70d8b8a0&\"\nimport script from \"./Start.vue?vue&type=script&lang=js&\"\nexport * from \"./Start.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Start.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}