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

$animationDuration: 5s
$triangleColour: #ffd200
$triangleLightColour: #ffe403
$triangleDarkColour: #ffd200
$borderColour: #fbb700

body
  background: #000
  @include animation(animate-background 6s linear)


.zelda-container
  width: 768px
  height: 432px
  margin: 100px auto
  position: relative
  
.background-holder
  position: absolute
  width: 768px
  height: 432px
  background: url(../images/bg.png)
  @include animation(animate-background-picture 6s linear forwards)

.zeldatext
  position: absolute
  top: 130px
  left: 140px
  width: 505px
  height: 220px
  @include animation(showZeldaText 6.5s linear)

  h1
    top: 10px
    font-size: 180px
    font-family: "EB Garamond"
    padding-left: 80px
    color: #8b3536
    @include text-fill-color(#b62f22)
    @include text-stroke-color(#8b3536)
    @include text-stroke-width(2px)
    letter-spacing: -5px

    sup
      position: absolute
      top: -50px
      left: -80px
      font-size: 280px

    span.closer
      letter-spacing: -28px

  h2, h3
    position: absolute
    text-transform: uppercase
    font-family: "Old Standard TT"
    color: #eee
    font-size: 40px
    @include text-fill-color(#eee)
    @include text-stroke-color(#8b3536)
    @include text-stroke-width(0.2px)
    @include text-shadow(0 0 2px #000)

  h2
    top: -10px
    left: 100px

  h3
    top: 170px
    left: 100px
    width: 500px

    a
      text-decoration: none
      color: #eee
      @include text-fill-color(#eee)

.stage
  width: 300px
  height: 300px
  left: 220px
  top: 50px
  position: absolute
  @include perspective(800px)
  @include perspective-origin(50% 190px)

  .triangle
    position: absolute
    top: 0
    left: 75px
    width: 150px
    height: 150px
    @include transform-style(preserve-3d)
    @include transform-origin(75px)

    &.one
      @include animation(rotate $animationDuration infinite linear, introduce-1 5s linear)

    &.two
      top: 150px
      left: 0
      @include animation(rotate $animationDuration infinite linear, introduce-2 5s linear)

    &.three
      top: 150px
      left: 150px
      @include animation(rotate $animationDuration infinite linear, introduce-3 5s linear)

    figure
      display: block
      position: absolute
      @include backface-visibility(hidden)

      &.front
        +arrow(150px, 150px, up, $triangleLightColour)
        @include transform(translateZ(20px))

      &.back
        +arrow(150px, 150px, up, $triangleLightColour)
        @include transform(rotateY(180deg) translateZ(20px))

      &.side1
        content: " "
        display: block
        position: absolute
        height: 168px
        width: 40px
        background-color: $triangleDarkColour
        @include transform(translateY(-9px) translateX(18px) rotateY(-90deg) rotateX(26.5deg))

      &.side2
        content: " "
        display: block
        position: absolute
        height: 168px
        width: 40px
        background-color: $triangleDarkColour
        @include transform(translateY(-9px) translateX(92px) rotateY(90deg) rotateX(26.5deg))

      &.side3
        content: " "
        background-color: $triangleDarkColour
        width: 150px
        height: 40px
        @include transform(translateY(130px) rotateX(-90deg))

.madeby
  text-align: center
  margin-top: 200px
  bottom: 20px
  color: #000
  font-family: "EB Garamond"
  a
    color: #000
    text-decoration: none
    opacity: 0.2
    background-color: #fff
    +border-radius(5px)
    padding: 10px
    &:hover
      opacity: 1

@include keyframes(rotate)
  0%
    @include transform(rotateY(0))
  100%
    @include transform(rotateY(360deg))

@include keyframes(showZeldaText)
  0%, 80%
    @include transform(scale(0.6) translateZ(-100px))
    opacity: 0
  100%
    @include transform(scale(1) translateZ(0))
    opacity: 1

@include keyframes(introduce-1)
  0%
    top: -200px
    opacity: 0
  45%
    top: -100px
    @include transform(rotateY(180deg) rotateX(-180deg))
    opacity: 1
  90%, 100%
    top: 0
    @include transform(rotateY(360deg) rotateX(-360deg))

@include keyframes(introduce-2)
  0%
    left: -150px
    top: 250px
    opacity: 0
  45%
    left: -75px
    top: 200px
    @include transform(rotateY(180deg) rotateX(-180deg))
    opacity: 1
  90%, 100%
    top: 150px
    left: 0
    @include transform(rotateY(360deg) rotateX(-360deg))

@include keyframes(introduce-3)
  0%
    left: 350px
    top: 250px
    opacity: 0
  45% 
    left: 275px
    top: 200px
    @include transform(rotateY(180deg) rotateX(-180deg))
    opacity: 1
  90%, 100%
    top: 150px
    left: 150px
    @include transform(rotateY(360deg) rotateX(-360deg))

@include keyframes(animate-background)
  0%
    background: #000
  83%
    background: #000
  84%
    background: #fff
  87%, 100%
    background: #000

@include keyframes(animate-background-picture)
  0%,86%
    opacity: 0
  86.01%, 100%
    opacity: 1
