phateio/kiris

@import mixins

#portal
  z-index: 9401
  position: fixed
  top: 0px
  left: 0px
  width: 100%
  height: 100%
  background-size: cover
  background-repeat: no-repeat
  background-position: 50% 30%
  background-color: #000000
  h3
    position: absolute
    font-size: 4em
    text-align: center
    word-break: normal
  .central-text
    width: 100%
    top: 40%
    color: transparent
  .title-text
    width: 100%
    top: 5%
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9)
  .subtitle-text
    bottom: 5%
    right: 5%
    font-size: large
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9)
  .enter-button
    width: 100%
    bottom: 10%
    background-color: rgba(0, 0, 0, 0.8)
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9)
    a
      color: #FFFFFF
  .background
    z-index: -1
    position: fixed
    top: 0px
    left: 0px
    width: 100%
    height: 100%
    background-size: cover
    background-repeat: no-repeat
    background-position: 50% 30%
    background-color: #000000
    background-image: url(http://i.imgur.com/BRR48rH.jpg)
  .frame-1
    +vendor-prefix-property(animation, blurFadeInOut 5s ease-in backwards)
    +vendor-prefix-property(animation-delay, 0s)
  .frame-2
    +vendor-prefix-property(animation, blurFadeInOut 5s ease-in backwards)
    +vendor-prefix-property(animation-delay, 5s)
  .frame-3
    +vendor-prefix-property(animation, blurFadeIn 1s ease-in backwards)
    +vendor-prefix-property(animation-delay, 10s)
  .frame-4
    +vendor-prefix-property(animation, blurFadeIn 1s ease-in backwards)
    +vendor-prefix-property(animation-delay, 11s)
  .frame-5
    +vendor-prefix-property(animation, blurFadeIn 1s ease-in backwards)
    +vendor-prefix-property(animation-delay, 14s)
  .frame-6
    +vendor-prefix-property(animation, fadeInBack 2s linear backwards)
    +vendor-prefix-property(animation-delay, 12s)

+keyframes(blurFadeInOut)
  0%
    opacity: 0
    text-shadow: 0px 0px 40px #FFFFFF
    +vendor-prefix-property(transform, scale(1.3))
  10%,80%
    opacity: 1
    text-shadow: 0px 0px 1px #FFFFFF
    +vendor-prefix-property(transform, scale(1))
  100%
    opacity: 0
    text-shadow: 0px 0px 50px #FFFFFF
    +vendor-prefix-property(transform, scale(0))


+keyframes(blurFadeIn)
  0%
    opacity: 0
    text-shadow: 0px 0px 40px #FFFFFF
    +vendor-prefix-property(transform, scale(1.3))
  100%
    opacity: 1
    text-shadow: 0px 0px 1px #FFFFFF
    +vendor-prefix-property(transform, scale(1))


+keyframes(fadeInBack)
  0%
    opacity: 0
    +vendor-prefix-property(transform, scale(0))
  100%
    opacity: 1
    +vendor-prefix-property(transform, scale(1))