@import 'compass/reset'
@import 'compass'
@import 'animate-helpers'
@import 'animate/windblown'
@import 'animate/fade'

$default-animation-class-mode: silent
$default-animation-duration: 0.5s
$default-animation-timing-function: ease

+animate-windblown()
+animate-fade

html
  height: 100vh
  +perspective(1000)
  +transform-style(preserve-3d)

body
  font-family: 'PT Sans', sans-serif
  background: rgba(215, 215, 215, 0.5)
  @include background-image(radial-gradient( rgba(165, 165, 165, 0.5), rgba(211, 211, 211, 0.5)))
  overflow: hidden
  height: 100vh

.hint
  display: none

/*
  .root.moving
    &.by-slide
      &.forwards
        .slide
          &.previous
            z-index: 10
          &.current
            z-index: 5
          &.next
            z-index: 3
        .slide.previous.am-at
          +animation(windblownOut .5s ease)
      &.backwards
        .slide
          &.previous
            z-index: 3
          &.current
            z-index: 5
          &.next
            z-index: 10
        .slide.next.am-at
          +animation(windblownIn .5s ease)

.rhet-butler
  &.root
    @include box-sizing(border-box)
    width: 100vw
    height: 50vh
    margin: 0
    padding: 0
    overflow: hidden

  &.current ~ .slide
    display: block
    left: 50vw
    opacity: .7

  &.current ~ .group .slide
    display: block
    left: 50vw
    opacity: .7

.slide
  @include box-sizing(border-box)
  width: 46vw
  height: 46vh
  margin: 2vh 2vw
  padding: 5vh 5vw
  float: left

  display: none

  &.current,&.next,&.previous
    display: block

  &.current
    .notes
      position: absolute
      display: block
      width: 89vw
      height: 39vh
      margin: 2vh 2vw
      padding: 3vh 3vw
      top: 50vh
      left: 0
      border: 1px solid black
      background-color: honeydew

  &.previous
    z-index: 10

  &.current
    z-index: 5

  &.next
    z-index: 3

  @include background-image(linear-gradient(white, rgb(230, 230, 230)))

  border: 1px solid rgba(0, 0, 0, .3)
  border-radius: 10px
  @include single-box-shadow(2px, 2px, 8px, 2px, rgb(100,100,100))

  color: black
  text-shadow: 0 2px 2px rgba(0, 0, 0, .1)

  font-family: 'Open Sans', Arial, sans-serif
  font-size: 5vh
  line-height: 1.1em
  letter-spacing: -1px
  text-align: center

  img
    max-width: 100%
    max-height: 100%

  pre
    font-family: monospace
    text-align: initial
    font-size: 4vh
    line-height: 1em
    code
      border-radius: 10px
      +box-shadow(-2px -2px 8px 2px rgb(140,140,140) inset, 2px 2px 8px 2px rgb(40, 40, 40) inset)

  li
    opacity: 0.5

  @for $i from 1 through 10
    &.current-cue-#{$i}
      code span.cue-#{$i}
        border-radius: 5px
        +box-shadow(-1px -1px 0px 1px rgba(140,140,140,0.5) inset, 1px 1px 0px 1px rgba(40, 40, 40, 0.5) inset)
        background-color: rgba(255,255,255,0.1)

      @for $j from 1 through $i
        li.cue-#{$j}
          opacity: 1

  p
    margin: .4em 0

  q
    display: block
    font-size: 50px
    line-height: 72px

    margin-top: 100px

    strong
      white-space: nowrap