.home

  #rocket
    position: relative
    background-image: url("/img/rocket/city_small.jpg")
    background-position: center
    background-size: contain
    background-repeat: no-repeat
    height: 0
    padding-bottom: 80%
    transition: all 0.2s ease 0.3s
    opacity: 1

    .rocket-placeholder
      position: absolute
      z-index: 10
      left: 12.1%
      top: 26.8%
      width: 68.9%
      padding-bottom: 39.5%
      transform: translate3d(0,0,0)
      transition: opacity 0.5s , transform 0.2s

      img
        width: 100%
        position: absolute
        right: 0
        top: 0
        opacity: 1
        transition: all 0.7s ease 0.4s

        &.rocket-main
          z-index: 3
        &.rocket-blur
          z-index: 2
          +leftRight
        &.rocket-fire
          z-index: 1
          +fadeInFadeOut

    #shape, .text, .cloud, .pigeon, .pigeons-1, .pigeons-2
      position: absolute
      opacity: 1
      transform: translate3d(0,0,0)
      transition: transform 0.7s ease 0.3s, opacity 0.7s ease 0.3s

    #shape
      z-index: 5
      width: 65%
      left: 17.5%
      top: 5%
      transform: rotate(0deg)

    .text
      z-index: 7
      width: 52.3%
      left: 23.4%
      top: 20.9%
      transform: scale3d(1,1,1)

    .cloud
      z-index: 8
      top: 5%
      width: 60%
      left: 28%

    .pigeon
      z-index: 9
      left: 23%
      top: 17%
      width: 15%

    .pigeons-1
      z-index: 3
      left: 43%
      top: 12.7%
      width: 11%

    .pigeons-2
      z-index: 9
      left: 64.8%
      top: 19.2%
      width: 12%


    &.allowMouseAnimation
      #shape, .text, .cloud, .pigeon, .pigeons-1, .pigeons-2
        transition: transform 0.2s

    &.showVideo
      opacity: 0
      transition: all 0.3s ease 1s
      #shape
        opacity: 0
        transform: rotate(-15deg) !important
        transition: all 0.7s ease 0.4s
      .text
        opacity: 0
        transform: scale3d(0.8,0.8,1) !important
        transition: all 0.7s ease 0.4s

      .pigeon
        opacity: 0
        transform: translate3d(-80px,-30px,0) !important
        transition: all 0.7s ease 0.4s

      .pigeons-1, .pigeons-2
        opacity: 0
        transform: translate3d(-60px,-16px,0) !important
        transition: all 0.7s ease 0.4s

      .rocket-placeholder
        opacity: 0
        transition: all 0.7s ease 0.4s
        img
          top: -20px
          right: 80px
          transition: all 0.7s ease 0.4s

  .video
    &.animation-part, &.preFlight
      #rocket
        opacity: 0
        #shape
          opacity: 0
          transform: rotate(15deg)
        .text
          opacity: 0
          transform: scale3d(0.9,0.9,1)

        .pigeon
          opacity: 0
          transform: translate3d(40px,10px,0)

        .pigeons-1, .pigeons-2
          opacity: 0
          transform: translate3d(30px,8px,0)

        .rocket-placeholder
          opacity: 0
          img
            top: 20px
            right: -80px


  &.animateOut
    .video
      #rocket
        opacity: 0
        transition: all 0.3s ease 1s
        #shape
          opacity: 0
          transform: rotate(-15deg) !important
          transition: all 0.7s ease 0.4s
        .text
          opacity: 0
          transform: scale3d(0.8,0.8,1) !important
          transition: all 0.7s ease 0.4s

        .pigeon
          opacity: 0
          transform: translate3d(-80px,-30px,0) !important
          transition: all 0.7s ease 0.4s

        .pigeons-1, .pigeons-2
          opacity: 0
          transform: translate3d(-60px,-16px,0) !important
          transition: all 0.7s ease 0.4s

        .rocket-placeholder
          opacity: 0
          transition: all 0.7s ease 0.4s
          img
            top: -20px
            right: 80px
            transition: all 0.7s ease 0.4s