@import "compass"

// illustration

$scale: 1
$background-color: #182C38
$interface-color: rgba( 252, 254, 255, 1 )

@include keyframes( bounce )
  100%
    @include translate( -50% , -10% )
  0%
    @include translate( -50% , 0 )

@include keyframes( look )
  100%
    @include translate( 40% , 0 )
  60%
    @include translate( 40% , 0 )
  40%
    @include translate( -40% , 0 ) 
  0%
    @include translate( -40% , 0 )
    
.ghost
  @include animation( bounce 0.75s ease-in-out 0s infinite alternate none )
  position: absolute
  text-align: center
  font-size: 0
  left: 50%
  top: 50%
  
  $solid-color: rgba( 249, 252, 255, 1 )
  $diameter: 22
  
  width: #{$diameter*$scale}vw
  height: #{$diameter*$scale}vw
  @media screen and (orientation: landscape)
    width: #{$diameter*$scale}vh
    height: #{$diameter*$scale}vh
  
  .head , .body
    position: absolute
    background-color: $solid-color
    
  .head
    border-radius: 50%
    
    margin: -#{$diameter*$scale*0.5}vw 0 0 0
    width: #{$diameter*$scale}vw
    height: #{$diameter*$scale}vw
    @media screen and (orientation: landscape)
      margin: -#{$diameter*$scale*0.5}vh 0 0 0
      width: #{$diameter*$scale}vh
      height: #{$diameter*$scale}vh

  .eyes
    position: absolute
    right: 0
    left: 0
    top: 50%
  
    li
      position: absolute
      background-color: $background-color
      border-radius: 50%
      overflow: hidden
    
      margin: -#{$diameter*$scale*0.1}vw 0 0 -#{$diameter*$scale*0.1}vw
      width: #{$diameter*$scale*0.2}vw
      height: #{$diameter*$scale*0.2}vw
      @media screen and (orientation: landscape)
        margin: -#{$diameter*$scale*0.1}vh 0 0 -#{$diameter*$scale*0.1}vh
        width: #{$diameter*$scale*0.2}vh
        height: #{$diameter*$scale*0.2}vh

      &:nth-of-type(1)
        left: 30%

      &:nth-of-type(2)
        left: 70%

      i
        @include animation( look 2.95s ease-in-out 0s infinite alternate none )
        position: absolute
        border-radius: 50%
        background-color: $solid-color
        margin-top: -40%
        margin-left: -40%
        top: 50%
        left: 50%
        height: 80%
        width: 80%


  .body
    
    width: #{$diameter*$scale}vw
    height: #{$diameter*$scale*0.75}vw
    @media screen and (orientation: landscape)
      width: #{$diameter*$scale}vh
      height: #{$diameter*$scale*0.75}vh

    .bottom
      position: absolute
      right: 0
      left: 0
  
      top: #{$diameter*$scale*0.75}vw
      @media screen and (orientation: landscape)
        top: #{$diameter*$scale*0.75}vh

      li
        position: absolute
        top: -1px
        
        border-top: #{$diameter*$scale*0.25}vw solid $solid-color
        @media screen and (orientation: landscape) 
          border-top: #{$diameter*$scale*0.25}vh solid $solid-color

        &:nth-of-type(1)
          left: 0
          border-right: #{$diameter*$scale*0.25}vw solid transparent
          @media screen and (orientation: landscape) 
            border-right: #{$diameter*$scale*0.25}vh solid transparent

        &:nth-of-type(2)
          left: 25%
          border-right: #{$diameter*$scale*0.25}vw solid transparent
          border-left: #{$diameter*$scale*0.25}vw solid transparent
          @media screen and (orientation: landscape)
            border-right: #{$diameter*$scale*0.25}vh solid transparent
            border-left: #{$diameter*$scale*0.25}vh solid transparent

        &:nth-of-type(3)
          right: 0
          border-left: #{$diameter*$scale*0.25}vw solid transparent
          @media screen and (orientation: landscape) 
            border-left: #{$diameter*$scale*0.25}vh solid transparent

// interface

html , body , main
  background-color: $background-color
  font-family: 'Roboto Condensed', sans-serif
  display: block
  position: absolute
  overflow: hidden
  height: 100%
  width: 100%
  left: 0
  top: 0
  
h1
  font-weight: 300
  color: $interface-color
  position: absolute
  text-align: center
  letter-spacing: 0.025em
  bottom: 65px
  right: 0
  left: 0
  
  font-size: 7.5vw
  @media screen and (orientation: landscape)
    font-size: 7.5vh

a
  @include transition( opacity 0.1s ease-in-out )
  cursor: pointer
  position: relative
  border: 1px solid $interface-color
  margin: 5px
  font-weight: 300
  text-decoration: none
  width: 24px
  height: 24px
  display: inline-block
  font-size: 15px
  line-height: 24px
  opacity: 0.75
  color: $interface-color
  
  &:hover
    opacity: 1
  
  &.this:before
    content: ""
    position: absolute
    border-bottom: 7px solid $interface-color
    border-left: 7px solid transparent
    right: 0
    bottom: 0
    
  &.latest ~ a , &.latest ~ a:hover
    cursor: default
    opacity: 0.45
  
nav
  @include translate( 0 , 100% )
  @include transition( transform 0.25s ease-in-out )
  overflow-x: scroll
  white-space: nowrap
  font-size: 0
  position: absolute
  padding: 30px 15px
  text-align: center
  bottom: -25px
  right: 0
  left: 0
  
.pre , .post
  position: absolute
  pointer-events: none
  bottom: 0
  height: 55px
  width: 25px
  
$fade-color: rgba( $background-color , 0 )
  
.pre
  @include background-image(linear-gradient(to right, $background-color , $fade-color ))
  left: 0
  
.post
  @include background-image(linear-gradient(to left, $background-color , $fade-color ))
  right: 0
  
h1:hover ~ nav , nav:hover
  @include translate( 0 , 0 )