@import compass/reset
@import compass/css3
@import mixins

/* Fallback for older browsers */
.stage
  display: none
.csstransforms3d .stage
  display: block

.fallback
  display: block
  padding: 130px 0 0
  iframe
    display: block
    margin: 0 auto
  p 
    text-align: center
    letter-spacing: 1
    line-height: 1.5em
    padding: 20px
.csstransforms3d .fallback
  display: none

body
  background-color: #efe8dd
  @include background(linear-gradient(color-stops(#ced5d3, #ced5d3 144px, #efe8dd 144px, #efe8dd 100%)))
  overflow: hidden
  font-family: Helvetica, Arial, Sans-serif
  letter-spacing: 2

  .title
    position: absolute
    left: 0
    top: 12px

    h3
      padding-bottom: 10px
      font-size: 14px
      &:before
        content: ''
        position: absolute
        top: -10px
        left: 0
        width: 30px
        height: 5px
        background: #000
    h1
      font-size: 28px
      font-weight: bold
      padding-bottom: 15px
    h2
      font-size: 14px

  .info
    position: absolute
    text-align: left
    right: 0
    top: 12px
    width: 150px
    height: 100px
    font-size: 14px
    letter-spacing: 1.2
    opacity: 0.4
    @include transition(all 0.3s)

    &:hover 
      opacity: 0.8
      @include transition(all 0.3s)

    .addthis_toolbox a
      float: left
      padding: 10px 0 0 5px
    p
      clear: both
      padding: 14px 0 5px
      a
        text-decoration: none

.container
  width: 960px
  height: 500px
  position: relative
  margin: 20px auto 0 auto
  @include perspective(3000px)
  @include perspective-origin(50% -1400px)

.stage
  width: 460px
  margin: 0 auto
  @include transform-style(preserve-3d)
  @include transform(rotateY(-45deg))

  div
    position: absolute
    @include transform-style(preserve-3d)

  .shadow
    width: 550px
    height: 550px
    background-color: transparent
    opacity: 0
    @include transform(rotateX(90deg) translateZ(-166px) translateX(550px))
    @include box-shadow(-600px 0 50px #afa79f)
    @include animation(show-background 1.5s forwards)
    -webkit-animation-delay: 1s
    -moz-animation-delay: 1s
    animation-delay: 1s


  .back-left
    width: 500px
    height: 120px
    background-color: #6b522b
    @include transform(rotateY(90deg) translateX(-256px))
    border-top: 6px solid #8a683d
    border-left: 6px solid #574625
    @include animation(show-background 1.6s forwards)

  .back-right
    width: 446px
    height: 120px
    background-color: #9c7442
    @include transform(translateX(253px) translateZ(3px))
    border-top: 6px solid #b5854a
    border-right: 6px solid #78552c
    opacity: 0
    @include animation(show-background 1.8s forwards)
    -webkit-animation-delay: 0.5s
    -moz-animation-delay: 0.5s
    animation-delay: 0.5s

  .platform-left
    width: 446px
    height: 220px
    background-color: #bcb3a8
    @include transform(rotateX(90deg) translateY(396px) translateX(253px) translateZ(-13px))
    border-bottom: 6px solid #857964
    opacity: 0
    @include animation(show-background 1.5s forwards)
    -webkit-animation-delay: 1s
    -moz-animation-delay: 1s
    animation-delay: 1s

    span
      display: block
      position: absolute
      width: 120px
      height: 200px
      left: 0
      opacity: 0
      @include background(radial-gradient(left, #f3cac8, #c8b8ad 70px, #bcb3a8 90px))
      @include animation(show-red-highlight 1s forwards)
      -webkit-animation-delay: 5s
      -moz-animation-delay: 5s
      animation-delay: 5s
      z-index: 10

  .platform-right
    width: 446px
    height: 164px
    background-color: #bcb3a8
    @include transform(rotateX(90deg) translateY(88px) translateX(253px) translateZ(-41px))
    border-right: 6px solid #554c3d
    border-bottom: 6px solid #847660
    opacity: 0
    @include animation(show-background 1.6s forwards)
    -webkit-animation-delay: 1s
    -moz-animation-delay: 1s
    animation-delay: 1s

    span
      display: block
      position: absolute
      width: 150px
      height: 60px
      left: 280px
      opacity: 0
      @include background(radial-gradient(top, #cdebe8, #c2cbc1 40px, #bcb3a8 60px))
      @include animation(show-blue-highlight 1s forwards)
      -webkit-animation-delay: 6s
      -moz-animation-delay: 6s
      animation-delay: 6s

  .pit-left
    width: 447px
    height: 800px
    top: -1400px
    background-color: #4d4233
    @include transform(translate3D(254px, 125px, 285px))
    @include animation(show-pit 1s forwards)
    -webkit-animation-delay: 2.5s
    -moz-animation-delay: 2.5s
    animation-delay: 2.5s

  .pit-right
    width: 451px
    height: 800px
    top: -1400px
    background-color: #847660
    @include transform(translate3D(254px, 125px, 173px))
    @include animation(show-pit 1s forwards)
    -webkit-animation-delay: 2.4s
    -moz-animation-delay: 2.4s
    animation-delay: 2.4s

  .pit-back
    width: 170px
    height: 220px
    background-color: #6b522b
    @include transform(rotateY(90deg) translate3D(-200px, 87px, 168px))
    @include animation(show-background 1.6s forwards)

  .door
    width: 65px
    height: 0
    top: 85px
    background: #efe8dd
    border-bottom: 0 solid #bcb3a8
    border-left: 7px solid #78552e
    @include transform(translate3D(450px, 34px, 4px))
    @include animation(show-door 1.6s forwards)
    -webkit-animation-delay: 4s
    -moz-animation-delay: 4s
    animation-delay: 4s

  .portal
    width: 48px
    height: 72px
    opacity: 0
    background-color: black
    -webkit-border-radius: 44px / 62px
    border-radius: 44px / 62px
    @include box-shadow(0 0 15px 4px #fff)

    &:before
      content: ""
      display: block
      width: 48px
      height: 72px
      border: 4px solid #fff
      -webkit-border-radius: 44px / 62px
      border-radius: 44px / 62px
      margin-top: -4px
      margin-left: -4px

    &.red
      @include background(radial-gradient(black, black 50%, #ff4640 70%))
      border: 7px solid #ff4640
      @include transform(translate3D(223px, 25px, 385px) rotateY(90deg) skewX(5deg))
      @include animation(show-red-portal 1s forwards)
      -webkit-animation-delay: 5s
      -moz-animation-delay: 5s
      animation-delay: 5s

    &.blue
      @include background(radial-gradient(black, black 50%, #258aff 70%))
      border: 7px solid #258aff
      @include transform(translate3D(586px,25px,4px) skewX(-5deg))
      @include animation(show-blue-portal 1s forwards)
      -webkit-animation-delay: 6s
      -moz-animation-delay: 6s
      animation-delay: 6s

  .dude, .dude-shadow
    width: 30px
    height: 100px

    figure
      display: block
      background-color: #000
      position: absolute

      &.head
        top: 0
        left: 3px
        width: 20px
        height: 20px
        @include border-radius(22px)

      &.body
        top: 21px
        width: 26px
        height: 30px
        @include border-radius(30px 30px 0 0)

        &:before, &:after
          content: ""
          position: absolute
          width: 9px
          height: 15px
          background-color: #000
          top: 30px

        &:before
          left: 3px

        &:after
          left: 14px

  .dude.one
    @include animation(move-dude-one 10s linear infinite)
    opacity: 0
    -webkit-animation-delay: 8s
    -moz-animation-delay: 8s
    animation-delay: 8s
    @include transform(translate3D(514px, 50px, 375px) rotateY(78deg))

  .dude-shadow.one
    @include transform(translateX(-12px) rotateX(90deg) translateY(8px))
    opacity: 0.1

  .dude.two
    @include animation(move-dude-two 10s linear infinite)
    opacity: 0
    -webkit-animation-delay: 8s
    -moz-animation-delay: 8s
    animation-delay: 8s
    @include transform(translate3D(610px, 40px, 10px) rotateY(15deg))


    figure

      &.arm.left
        position: absolute
        width: 20px
        height: 8px
        background: #000
        left: -13px
        top: 20px
        @include transform(rotateZ(40deg))
        opacity: 0
        @include animation(arms 10s linear infinite)
        -webkit-animation-delay: 8s
        -moz-animation-delay: 8s
        animation-delay: 8s

      &.arm.right
        position: absolute
        width: 20px
        height: 8px
        background: #000
        right: -10px
        top: 20px
        @include transform(rotateZ(-40deg))
        opacity: 0
        @include animation(arms 10s linear infinite)
        -webkit-animation-delay: 8s
        -moz-animation-delay: 8s
        animation-delay: 8s

  .dude-shadow.two
    @include transform(translateY(12px) translateX(-16px) translateZ(-6px) rotateZ(-90deg) rotateY(90deg) rotateZ(50deg) skewX(30deg) scaleX(0.8))
    opacity: 0.1

@include keyframes(move-dude-one)
  0%
    @include transform(translate3D(514px, -10px, 375px) rotateY(78deg) scaleY(2))
  1%, 18%
    @include transform(translate3D(514px, 50px, 375px) rotateY(78deg) scaleY(1))
    opacity: 1
  34%, 39%
    @include transform(translate3D(284px, 40px, 375px) rotateY(78deg))
    opacity: 1
  41%, 42%
    @include transform(translate3D(234px, 40px, 375px) rotateY(78deg))
    opacity: 1
  43%, 100%
    @include transform(translate3D(234px, 40px, 375px) rotateY(78deg))
    opacity: 0

@include keyframes(move-dude-two)
  0%, 42%
    @include transform(translate3D(610px, 40px, 10px) rotateY(15deg))
    opacity: 0
  42.5%
    @include transform(translate3D(610px, 40px, 10px) rotateY(15deg))
    display: block
    opacity: 1
  46%, 75%
    @include transform(translate3D(610px, 40px, 120px) rotateY(15deg))
    opacity: 1
  76%, 97%
    @include transform(translate3D(610px, -10px, 120px) rotateY(15deg) scaleY(2))
    opacity: 0
  98%, 100%
    @include transform(translate3D(610px, -10px, 120px) rotateY(15deg) scaleY(2))
    opacity: 0

@include keyframes(arms)
  0%, 53%
    opacity: 0
  54%, 100%
    opacity: 1

@include keyframes(show-background)
  0%
    top: 800px
    opacity: 0
  10%
    opacity: 1
  100%
    top: 0
    opacity: 1

@include keyframes(show-pit)
  0%
    top: -1400px
  100%
    top: 0

@include keyframes(show-door)
  0%
    height: 0
    top: 85px
    border-bottom: 0 solid #bcb3a8
  5%
    border-bottom: 6px solid #bcb3a8
  100%
    height: 85px
    top: 0
    border-bottom: 6px solid #bcb3a8

@include keyframes(show-red-portal)
  0%
    @include transform(translate3D(223px, 25px, 385px) rotateY(90deg) skewX(5deg) scale(0))
  5%
    opacity: 1
  100%
    @include transform(translate3D(223px, 25px, 385px) rotateY(90deg) skewX(5deg) scale(1))
    opacity: 1

@include keyframes(show-blue-portal)
  0%
    @include transform(translate3D(586px,25px,4px) skewX(-5deg) scale(0))
  5%
    opacity: 1
  100%
    @include transform(translate3D(586px,25px,4px) skewX(-5deg) scale(1))
    opacity: 1

@include keyframes(show-red-highlight)
  0%
    opacity: 0
  100%
    opacity: 1

@include keyframes(show-blue-highlight)
  0%
    opacity: 0
  100%
    opacity: 1
