{"version":3,"sources":["webpack:///./src/components/Buttons/PlayButton.js","webpack:///./src/components/VideosListViewer/elements.js","webpack:///./src/assets/grunge-thumbnails.png","webpack:///./src/assets/YT-play-button.png","webpack:///./src/components/SectionTitle/index.js"],"names":["PlayButton","baseCSS","layout","Youtube","hoverTextColor","style","prop","cssProperty","key","CloseButtonWrapper","space","CloseViewer","InternalLink","top","breakpoints","ButtonBackHover","MainVideo","HighlightsGrid","gridTemplateColumns","ItemWrapper","VideoContainer","VideoItem","Wrapper","ItemContainer","PlayContainer","GrungyTexture","Description","position","bottom","Item","imgData","description","onClick","playVisible","alt","width","fluid","aspectRatio","title","posY","Math","floor","random","height","my","defaultProps","module","exports","Title","children","rest","justifyContent","flexDirection","fontSize","textAlign","mx","px","upperCase"],"mappings":"ugBA4BeA,EArBI,2CACfC,IADY,IAEZC,SAFY,yBAGUC,IAHV,wFAQcA,IARd,kFAccA,IAdd,iD,kECYhB,IAAMC,EAAiBC,gBAAM,CAC3BC,KAAM,iBACNC,YAAa,QACbC,IAAK,WAGMC,EAAqB,4CAAH,kBAE3BC,QAF2B,KAKlBC,EAAc,kBAAOC,IAAP,sBAAH,2EAKpBC,MALoB,wFAQ4CC,IAAY,GARxD,0FAcMC,IAdN,0GAsBMA,IAtBN,wCAyBhBX,EAzBgB,OA8BXY,EAAY,4CAAH,mEAKTC,EAAiB,4CAAH,oDAGrBC,sBAHqB,yEAUdC,EAAc,4CAAH,2IAaXC,EAAiB,4CAAH,mEAMdC,EAAY,4CAAH,kFAQhBC,EAAU,4CAAH,+EAMPC,EAAgB,4CAAH,4WA6BNC,EAAgB,4CAAH,oFAIAC,IAJA,uDASbC,EAAc,6CAAH,kBAEpBC,WAFoB,IAGpBC,SAHoB,uBAOXC,EAAO,SAAC,GAAD,IAAGC,EAAH,EAAGA,QAASC,EAAZ,EAAYA,YAAaC,EAAzB,EAAyBA,QAASC,EAAlC,EAAkCA,YAAaC,EAA/C,EAA+CA,IAA/C,OAClB,cAACZ,EAAD,CAASU,QAASA,GAChB,cAACT,EAAD,CAAeY,MAAO,GACpB,mBAAMA,MAAO,GACX,mBAAKA,MAAO,GACV,cAAC,IAAD,CACEC,MAAK,iBAAON,EAAP,CAAgBO,YAAa,IAAM,MACxCH,IAAKA,EACLI,MAAOP,MAIZE,GACC,cAACT,EAAD,CAAeW,MAAO,EAAGI,KAAMC,KAAKC,MAAsB,EAAhBD,KAAKE,WAC7C,cAAC,EAAD,CAAYP,MAAO,GAAIQ,OAAQ,OAIrC,cAACjB,EAAD,CAAaS,MAAO,EAAGS,GAAG,SACvBb,KAePF,EAAKgB,aAAe,CAClBf,QAAS,CAAEM,MAAO,MAClBL,YAAa,KACbC,QAAS,KACTC,aAAa,EACbC,IAAK,O,qBChMPY,EAAOC,QAAU,IAA0B,iE,qBCA3CD,EAAOC,QAAU,IAA0B,8D,uHCK9BC,EAAQ,SAAC,GAAD,IAAGV,EAAH,EAAGA,MAAOW,EAAV,EAAUA,SAAaC,EAAvB,2CACnB,gCACE,cAAC,IAAD,aACEC,eAAgB,CAAC,SAAU,KAAM,SACjCP,GAAI,CAAC,EAAG,KAAM,UACVM,GAEJ,mBAAME,cAAc,SAASD,eAAgB,CAAC,SAAU,KAAM,UAC5D,cAAC,IAAD,CACEE,SAAU,CAAC,GAAI,IACfC,UAAW,CAAC,SAAU,KAAM,QAC5BC,GAAI,CAAC,OAAQ,SACbX,GAAI,CAAC,SAAU,SACfY,GAAI,CAAC,OAAQ,GACbC,WAAS,GAERnB,GAEH,cAAC,IAAD,CACEe,SAAU,CAAC,OAAQ,QACnBC,UAAW,CAAC,SAAU,SAAU,QAChCG,WAAS,GAERR,OAYXD,EAAMH,aAAe,CACnBI,SAAU,MAGGD","file":"0581fb207c995764bc0abd244a516e8621f312ee-6fc2e084686f3be26aa4.js","sourcesContent":["import styled from '@emotion/styled';\nimport { Button as DefaultButton } from '@square-enix-private/vaquita-ui';\nimport { layout } from 'styled-system';\n\nimport Youtube from '~/assets/YT-play-button.png';\nimport { baseCSS } from './styles';\n\nconst PlayButton = styled(DefaultButton)`\n  ${baseCSS};\n  ${layout};\n  background-image: url(${Youtube});\n  background-size: contain;\n\n  :hover {\n    @supports (-ms-scroll-limit: 0) {\n      background-image: url(${Youtube});\n    }\n  }\n\n  ::after {\n    @supports (clip-path: circle(100% at 50% 50%)) {\n      background-image: url(${Youtube});\n      background-size: contain;\n      filter: invert(1);\n    }\n  }\n`;\n\nexport default PlayButton;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { Box, Flex, Heading } from '@square-enix-private/vaquita-ui';\nimport {\n  position,\n  top,\n  bottom,\n  style,\n  space,\n  gridTemplateColumns\n} from 'styled-system';\nimport { breakpoints } from '~/themes/base';\nimport Img from 'gatsby-image';\nimport PlayButton from '~/components/Buttons/PlayButton';\nimport GrungyTexture from '~/assets/grunge-thumbnails.png';\nimport ButtonBackHover from '~/assets/Buttons/Small/Button_hover.png';\nimport { InternalLink } from '~/components/Buttons';\n\nconst hoverTextColor = style({\n  prop: 'hoverTextColor',\n  cssProperty: 'color',\n  key: 'colors'\n});\n\nexport const CloseButtonWrapper = styled(Box)`\n  max-width: 44px;\n  ${space};\n`;\n\nexport const CloseViewer = styled(InternalLink)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  filter: invert(1);\n  ${top};\n  background-size: cover;\n\n  @media only screen and (orientation: landscape) and (max-width: ${breakpoints[1]}) {\n    margin: 8px;\n  }\n\n  ::after {\n    @supports (clip-path: circle(0% at 50% 50%)) {\n      background-image: url(${ButtonBackHover});\n      background-size: cover;\n      filter: invert(1);\n    }\n  }\n\n  @supports (-ms-scroll-limit: 0) {\n    &:hover {\n      background-image: url(${ButtonBackHover});\n      background-size: cover;\n      filter: unset;\n      ${hoverTextColor};\n    }\n  }\n`;\n\nexport const MainVideo = styled(Flex)`\n  position: relative;\n  flex-direction: column;\n`;\n\nexport const HighlightsGrid = styled(Flex)`\n  @media screen and (min-width: 580px) {\n    display: grid;\n    ${gridTemplateColumns};\n    grid-template-rows: repeat(1, 1fr);\n    grid-gap: 32px;\n    grid-auto-rows: auto;\n  }\n`;\n\nexport const ItemWrapper = styled(Flex)`\n  width: 100%;\n  position: relative;\n  flex-direction: column;\n\n  :first-of-type {\n    margin-left: 0;\n  }\n  :last-of-type {\n    margin-right: 0;\n  }\n`;\n\nexport const VideoContainer = styled(Box)`\n  width: 100%;\n  height: 0;\n  padding-top: 56.25%;\n`;\n\nexport const VideoItem = styled(Box)`\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\n\nconst Wrapper = styled(Flex)`\n  width: 100%;\n  position: relative;\n  flex-direction: column;\n`;\n\nconst ItemContainer = styled(Flex)`\n  align-items: center;\n  overflow: hidden;\n  cursor: pointer;\n  position: relative;\n  div {\n    transition: 0.5s;\n    transition-timing-function: ease-in-out;\n  }\n\n  :hover {\n    div {\n      transform: scale(1.05);\n      backface-visibility: hidden;\n    }\n    button {\n      @supports (-ms-scroll-limit: 0) {\n        filter: invert(1);\n      }\n\n      ::after {\n        @supports (clip-path: circle(100% at 50% 50%)) {\n          clip-path: circle(100% at 50% 50%);\n        }\n      }\n    }\n  }\n`;\n\nexport const PlayContainer = styled(Flex)`\n  position: absolute;\n  justify-content: center;\n  align-items: center;\n  background-image: url(${GrungyTexture});\n  background-size: cover;\n  background-position: center;\n`;\n\nexport const Description = styled(Heading)`\n  font-size: 22px;\n  ${position};\n  ${bottom};\n  text-align: center;\n`;\n\nexport const Item = ({ imgData, description, onClick, playVisible, alt }) => (\n  <Wrapper onClick={onClick}>\n    <ItemContainer width={1}>\n      <Flex width={1}>\n        <Box width={1}>\n          <Img\n            fluid={{ ...imgData, aspectRatio: 430 / 240 }}\n            alt={alt}\n            title={description}\n          />\n        </Box>\n      </Flex>\n      {playVisible && (\n        <PlayContainer width={1} posY={Math.floor(Math.random() * 3)}>\n          <PlayButton width={60} height={40} />\n        </PlayContainer>\n      )}\n    </ItemContainer>\n    <Description width={1} my=\"small\">\n      {description}\n    </Description>\n  </Wrapper>\n);\n\nItem.propTypes = {\n  imgData: PropTypes.shape({\n    fluid: PropTypes.object\n  }),\n  description: PropTypes.string,\n  onClick: PropTypes.func,\n  playVisible: PropTypes.bool,\n  alt: PropTypes.string\n};\n\nItem.defaultProps = {\n  imgData: { fluid: null },\n  description: null,\n  onClick: null,\n  playVisible: false,\n  alt: null\n};\n","module.exports = __webpack_public_path__ + \"static/grunge-thumbnails-d93dafecc996e5eac6a6c2c3ed842275.png\";","module.exports = __webpack_public_path__ + \"static/YT-play-button-01334c68c780a5aaf85bfb196117aaa8.png\";","import React from 'react';\nimport { Flex } from '@square-enix-private/vaquita-ui';\nimport PropTypes from 'prop-types';\nimport { Wrapper, SectionTitle, SectionSubTitle } from './elements';\n\nexport const Title = ({ title, children, ...rest }) => (\n  <>\n    <Wrapper\n      justifyContent={['center', null, 'unset']}\n      my={[0, null, 'unset']}\n      {...rest}\n    >\n      <Flex flexDirection=\"column\" justifyContent={['center', null, 'unset']}>\n        <SectionTitle\n          fontSize={[38, 46]}\n          textAlign={['center', null, 'left']}\n          mx={['auto', 'unset']}\n          my={['medium', 'large']}\n          px={['55px', 0]}\n          upperCase\n        >\n          {title}\n        </SectionTitle>\n        <SectionSubTitle\n          fontSize={['28px', '26px']}\n          textAlign={['center', 'center', 'left']}\n          upperCase\n        >\n          {children}\n        </SectionSubTitle>\n      </Flex>\n    </Wrapper>\n  </>\n);\n\nTitle.propTypes = {\n  title: PropTypes.string.isRequired,\n  children: PropTypes.string\n};\n\nTitle.defaultProps = {\n  children: null\n};\n\nexport default Title;\n"],"sourceRoot":""}