/*==========================================================================
  Our Studio - Detail page
  ========================================================================== */

$blockAmount: 6
$transitionDelay: 0.7
$delayIntersect: 0.2
$delayBlockIntersect: 0.4



.ajax-container.our-studio-detail
  display: grid
  grid-template-columns: 1fr 1fr
  grid-template-areas: "content image"

  .backToOverview
    position: absolute
    right: 85px
    top: 20px
    z-index: 5
    text-decoration: none
    font-size: 0.8rem
    text-transform: uppercase
    font-family: din()
    color: rgba(white, 0.6)
    transition: color 0.3s
    &:hover
      color: white

  .next-studio-item
    position: absolute
    bottom: 15px
    left: calc(50% - 100px)
    text-decoration: none
    width: 200px
    z-index: 10
    text-align: center
    cursor: pointer
    opacity: 1
    transition: opacity 0.4s
    p
      display: inline-block
      font-size: 0.8rem
      color: white
      font-family: din()
      text-transform: uppercase
      margin: 0
      opacity: 1
      text-shadow: 0 0 10px rgba(0,0,0, 0.5)
      transform: scale3d(1,1,1)
      will-change: text-shadow, color
      transition: transform 0.3s, color 0.3s, opacity 0.5s, text-shadow 0.1s

    span
      display: block
      margin: auto
      +sprite(-33px -65px, 22px, 22px)
      +translate3d(0,0,0)
      opacity: 1
      transition: transform 0.3s

    &.animation-part
      p
        opacity: 0

      span
        opacity: 0
        +translate3d(0, -6px, 0)

    &:hover
      p
        color: $fontBlack
        text-shadow: 0 0 10px rgba(0,0,0, 0)
        transform: scale3d(1.1, 1.1, 1)
      span
        +translate3d(0, 2px, 0)

  .title
    position: absolute
    z-index: 10
    left: 4%
    top: 6%
    width: 96%
    font-size: 3.2rem
    line-height: 1
    text-transform: uppercase
    font-family: din()
    pointer-events: none

    div
      pointer-events: none

    .pre-title
      position: relative
      z-index: 1
      display: inline-block
      font-size: 0.7em
      background-color: white
      padding: 15px 15px 0
      margin-bottom: 8px
      +translate3d(0,0,0)
      opacity: 1
      transition: all 0.5s

      &.loaded-animation
        +translate3d(-40px, 0, 0)
        opacity: 0

        +respond-to-width-beyond(900)
          a, p span
            color: rgba($darkBlue, 0)
            text-indent: -40px

          p
            color: rgba($lightGray, 0)
            text-indent: -40px

      +respond-to-width(400)
        margin-bottom: 0
        padding-bottom: 4px

    a, p span
      color: rgba($darkBlue, 1)
      text-decoration: none
      pointer-events: all
      text-indent: 0
      transition: all 0.5s ease 0.4s

    p
      display: inline-block
      color: rgba($lightGray, 1)
      margin: 0
      pointer-events: all
      text-indent: 0
      transition: all 0.5s ease 0.4s

    .main-title
      +translate3d(0,0,0)
      opacity: 1
      transition: all 0.5s ease 0.4s

      &.loaded-animation
        +translate3d(-40px, 0, 0)
        opacity: 0

        +respond-to-width-beyond(900)
          h1
            color: rgba($blue, 0)
            text-indent: -40px

    h1
      margin-top: -14px
      padding: 4px 15px 0
      background-color: white
      display: inline-block
      font-size: 2em
      line-height: 1
      pointer-events: all
      color: rgba($blue, 1)
      text-indent: 0
      transition: all 0.5s ease 0.7s

    +respond-to-width(1800)
      font-size: 2.6rem
      h1
        padding-bottom: 4px

    +respond-to-width(1650)
      top: 4%
      h1
        font-size: 1.6em

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

      h1
        font-size: 1.6em

    +respond-to-width(400)
      h1
        margin-top: -2px
        font-size: 1.7rem

  .content
    position: relative
    z-index: 4
    grid-area: content
    padding: 275px 4% 8% 
    border-radius: 25px 0 0 25px
    background-color: transparent
    transition: all 0.4s

    &.loaded-animation
      background-color: transparent !important

    +respond-to-width(1800)
      padding-top: 265px

    +respond-to-width(1650)
      padding-top: 220px

    +respond-to-width(1150)
      padding-top: 250px

    &.in-active
      .service-block
        max-height: 0
        opacity: 0
        margin-bottom: 0

    .service-block
      margin-bottom: 25px
      height: auto
      max-height: 350px
      opacity: 1
      transition: max-height 0.8s, margin-bottom 0.8s, opacity 0.5s ease 0.3s

      &:last-of-type
        margin-bottom: 0

        p:last-of-type
          margin-bottom: 0

      @for $i from 1 through $blockAmount
        &:nth-of-type(#{$i})
          h2
            transition-delay: #{$transitionDelay}s

          p
            transition-delay: #{$transitionDelay+0.1}s

          $transitionDelay: $transitionDelay + $delayIntersect !global

      h2
        position: relative
        color: $blue
        padding-left: 50px
        line-height: 1
        text-transform: uppercase
        margin-bottom: 0
        opacity: 1
        +translate3d(0,0,0)
        transition: all 0.5s

        span
          position: absolute
          top: -1px
          left: 0
          color: white

      p
        color: white
        opacity: 1
        +translate3d(0,0,0)
        transition: all 0.5s

        &:first-of-type
          margin-top: 5px

      &.loaded-animation
        h2, p
          opacity: 0
          +translate3d(-40px, 0, 0)

  .image
    position: relative
    +flex(center, center)
    grid-area: image
    background-size: cover
    background-position: center

    border-radius: 0 25px 25px 0
    overflow: hidden
    cursor: pointer
    transition: opacity 0.4s


    .placeholder
      position: relative
      z-index: 3
      width: 100%
      text-align: center
      cursor: pointer
      +flex(center, center)
      //overflow: hidden

      .youtube-play
        height: 100px
        width: 100px
        transform: scale3d(1,1,1)
        opacity: 1
        transition: transform 0.5s, opacity 0.5s
        img
          width: 100%
          height: 100%

    .shape
      position: absolute
      z-index: 2
      top: 10%
      left: 10%
      +flex(center, center)
      width: 80%
      height: 80%
      transform: scale3d(1,1,1)
      transition: transform 0.6s

      svg
        width: 80%
        opacity: 1
        transform: scale3d(1,1,1)
        transition: transform 0.6s, opacity 0.6s

        path
          transform-origin: 50% 50%
          transition: fill 0.4s

        &#circle
          max-width: 600px

        &#triangle
          max-width: 700px

    &.animation-part
      opacity: 0

      .shape
        svg
          opacity: 0

      .placeholder
        .youtube-play
          opacity: 0
          transform: scale3d(0.6,0.6,1)

    &:hover
      .placeholder
        .youtube-play
          transform: scale3d(1.2,1.2,1)

      .shape
        transform: scale3d(0.9, 0.9, 1)
        svg
          .st0
            fill: rgba(255,255,255, 0.3)

    &.creativity
      .shape
        top: 13%

      &.animation-part
        .shape
          svg
            transform: scale3d(0.3,1,1)

    &.ourFactory
      .shape
        width: 60%
        height: 60%
        left: 20%
        top: 20%

        svg
          transform: rotate(45deg)

      &.animation-part
        .shape
          svg
            transform: rotate(0)

    &.ourTeam
      .shape
        width: 70%
        height: 70%
        left: 15%
        top: 15%
        svg
          transform: rotate(30deg)

      &.animation-part
        .shape
          svg
            transform: rotate(0)

    // Inverted styling for odd children
  &[data-color-type='2']
    .title
      a, p span
        color: $darkerBlue

    .content
      background-color: $darkBlue


  &.animateOut
    .backToOverview, .next-studio-item
      opacity: 0

    .title
      .pre-title
        +translate3d(-40px, 0, 0)
        opacity: 0

      .main-title
        +translate3d(-40px, 0, 0)
        opacity: 0
        transition-delay: 0.3s !important

    .content
      transition: all 0.4s ease 0.6s
      background-color: transparent

      .service-block
        h2, p
          transition-delay: 0.6s !important
          opacity: 0
          +translate3d(-40px, 0, 0)

    .image
      opacity: 0
      transition: opacity 0.4s ease 0.6s

      &:before
        opacity: 0

      .placeholder

        .youtube-play
          opacity: 0
          transform: scale3d(0.6,0.6,1)

      .shape
        transition-delay: 0.4s
        transform: scale3d(0.6, 0.6, 1)

        svg
          transition-delay: 0.4s
          opacity: 0

  /* Small Tablet view
   ========================================================================== */
  +respond-to-width-or-height(900, 700)
    display: block
    padding-top: 60px

    .title
      position: relative
      top: 0
      left: 8%
      width: 84%

    .content
      padding-top: 40px
      background-color: transparent !important

    .image
      padding: 100px 0 150px
      border-radius: 0 0 25px 25px
      transition: padding 0.5s

      .shape
        width: 60%
        height: 60%
        top: 20%
        left: 20%

      &.creativity
        .shape
          top: 20%

      &.ourTeam
        .shape
          margin-top: -25px
          svg
            width: auto
            height: 80%


      &:after
        border-radius: 0 0 25px 25px

      &.in-active
        padding: 0 !important

    &[data-color-type='2']
      background-color: $darkBlue

    &[data-color-type='1']
      .backToOverview
        color: $darkBlue

  +respond-to-width(680)
    .title
      font-size: 1.5rem

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

    .backToOverview
      color: $darkGray
      &:hover
        color: $black

    .next-studio-item
      position: relative
      z-index: 20
      padding: 40px 0
      display: block
      width: 100%
      left: 0
      bottom: auto
      background-color: $lighterGray
      pointer-events: all
      opacity: 1

      p
        color: $fontBlack
        text-shadow: 0 0 0 rgba(255,255,255, 0)

      span
        +sprite(-58px -65px, 22px, 22px)

    .title
      position: relative
      top: 0
      font-size: 1.5rem
      left: 8%
      width: 84%

      .pre-title
        position: relative

    .content
      padding-top: 50px

      .service-block
        max-height: none
        h2
          font-size: 1.4rem
          padding-left: 35px

      &.in-active
        .service-block
          max-height: none
          opacity: 1

    .image
      border-radius: 0
      width: 100%
      height: 0
      padding-bottom: 85%

      .placeholder
        position: absolute
        top: 0
        left: 0
        +flex(center, center)
        +flex-rows
        height: 100%
        width: 100%

        p
          font-size: 1.1rem

      .shape
        width: 80%
        height: 80%
        top: 10%
        left: 10%

      &.ourTeam
        .shape
          margin-top: 0

      &.creativity
        .shape
          top: 12.5%

        .placeholder
          .youtube-play
            position: relative
            top: -2.4%

    &[data-color-type='2']
      background-color: $darkBlue

      .backToOverview
        color: white