/*==========================================================================
  Home page
  ========================================================================== */

$blockAmount: 3
$transitionDelay: 0
$delayIntersect: 0.08
$delayBlockIntersect: 0.2

.ajax-container.home
  background-color: #a8b1b3
  height: calc(100vh - 160px)
  transition: background 0.3s
  display: -ms-grid
  grid-columns: auto minmax(min-content, 1fr)
  grid-rows: auto minmax(min-content, 1fr) auto

  display: grid
  grid-template-columns: 12fr 5fr
  grid-template-rows: 1fr 1fr
  grid-template-areas: "video our-work" "video our-studio"
  overflow: hidden

  .home-block
    position: relative
    padding: 40px
    text-decoration: none
    overflow: hidden
    transition: background 0.4s

    figure
      position: absolute
      top: 0
      left: 0
      height: 100%
      width: 100%
      opacity: 1
      background-size: cover
      background-position: center
      transition: opacity 0.4s

    &.animation-part
      background-color: transparent !important
      figure
        opacity: 0

    h1
      position: relative
      z-index: 2
      font-size: 3rem
      line-height: 1.2
      text-transform: uppercase
      transition: color 0.4s

      +respond-to-width(1650)
        font-size: 2.4rem

      +respond-to-width(1420)
        font-size: 2.2rem

      span, small
        opacity: 1
        +translate3d(0,0,0)
        transition: transform 0.3s, opacity 0.3s


      small
        display: block
        font-size: 0.5em
        color: white
        opacity: 0.5
        +translate3d(0,0,0)

      span
        display: inline-block

    &.animation-part
      h1
        span, small
          +translate3d(40px,0,0)
          opacity: 0

    @for $i from 1 through $blockAmount
      &:nth-child(#{$i})

        small
          transition-delay: #{$transitionDelay}s
          $transitionDelay: $transitionDelay + $delayIntersect !global

        figure
          transition-delay: #{$transitionDelay}s

        span
          transition-delay: #{$transitionDelay}s
          $transitionDelay: $transitionDelay + $delayBlockIntersect !global



  .video
    -ms-grid-area: video
    grid-area: video
    +flex(flex-start, center)
    padding: 0
    opacity: 1
    transition: opacity 0.5s ease 0.8s !important

    #close-home-video
      position: absolute
      z-index: 103
      right: 0
      top: 0
      height: 60px
      width: 60px
      +flex(center, center)
      color: white
      cursor: pointer
      background-color: #a8b1b3
      border-radius: 0 0 0 25px
      font-family: din()
      font-size: 25px
      line-height: 1
      opacity: 0
      transition: transform 0.5s, opacity 0.5s, border-radius 0.5s ease 0.5s

      .corner
        position: absolute
        width: $corners
        height: $corners
        svg
          width: 100%
          height: 100%
          position: absolute
          left: 0
          top: 0
          path
            fill: #a8b1b3

        &.left-corner
          left: -$corners
          top: 0
        &.right-corner
          right: 0
          bottom: -$corners

      +respond-to-width-or-height(950, 700)
        height: 50px
        width: 50px

      &.show
        opacity: 1

    #ytplayer
      height: 56.25vw
      left: 50%
      min-height: 100%
      min-width: 100%
      transform: translate(-50%, -50%)
      position: absolute
      top: 50%
      width: 177.77777778vh
      opacity: 0
      transition: opacity 0.5s

      &.showVideo
        opacity: 1
        z-index: 13

    .placeholder
      position: relative
      display: block
      width: 100%

      #home-play
        position: absolute
        z-index: 12
        width: 100px
        left: calc(50% - 50px)
        top: calc(50% - 50px)
        opacity: 1
        cursor: pointer
        transform: scale3d(1,1,1)
        transition: all 0.4s

        +respond-to-width(600)
          width: 70px
          left: calc(50% - 35px)
          top: calc(50% - 35px)

        img
          width: 100%

        &:hover
          transform: scale3d(0.85, 0.85, 1)

        &.hidePlayButton
          opacity: 0
          transform: scale3d(0.7, 0.7, 1)

    h1
      position: absolute
      left: 40px
      bottom: 40px
      color: $darkGray
      opacity: 1
      transition: opacity 0.3s

      &.showVideo
        opacity: 0

  .our-work
    -ms-grid-area: our-work
    grid-area: our-work
    background-color: $red

    h1
      color: $darkRed

    figure
      height: calc(100% + 40px)
      width: calc(100% + 40px)
      left: -20px
      top: -20px
      background-image: url("/img/our-work.jpg")

    &:hover
      h1
        color: white

  .our-studio
    -ms-grid-area: our-studio
    grid-area: our-studio
    background-color: $darkBlue

    h1
      color: $blue

    figure
      height: calc(100% + 40px)
      width: calc(100% + 40px)
      left: -20px
      top: -20px
      background-image: url("/img/our-factory.jpg")

    &:hover
      h1
        color: white

  &.animateOut
    .home-block
      background-color: transparent
      transition: background 0.4s ease 0.6s

      figure
        opacity: 0
        transition: opacity 0.4s ease 0.6s

      h1
        span
          +translate3d(40px, 0, 0)
          opacity: 0
        small
          +translate3d(40px, 0, 0)
          opacity: 0

    .video
      opacity: 0

      .placeholder
        #home-play
          opacity: 0

  //Edge support
  @supports (-ms-ime-align: auto)
    display: block
    position: relative
    height: auto
    white-space: nowrap
    font-size: 0
    line-height: 0
    .video
      display: block
      width: 100%

    .home-block
      font-size: 1rem
      line-height: 1.6

    .our-work, .our-studio
      width: 50%
      display: inline-block
      height: 400px

      figure
        transform: translate3d(0,0,0) !important
        left: 0 !important
        top: 0 !important
        height: 100% !important
        width: 100% !important


      +respond-to-width(900)
        width: 100%
        display: block
        height: 250px

  /* Small Tablet view
     ========================================================================== */
  +respond-to-width-or-height(900, 700)
    grid-template-columns: 1fr 1fr
    //grid-template-rows: 600px 350px
    grid-template-areas: "video video" "our-work our-studio"

    .video
      &:after


  /* Mobile view
    ========================================================================== */
  +respond-to-width-or-height(500, 600)
    display: block
    height: auto

    .video
      +flex(flex-start, flex-end)
      width: 100%
      padding-bottom: 60px

      h1
        bottom: 20px

    .our-work, .our-studio
      display: block
      width: 100%
      height: 35vh
      min-height: 250px