section.section-modal
  .profile
    img(src="http://www.fillmurray.com/130/130")
    .text
      .name Bill Murray
      .meta Click me!

  .overlay
    .modal
      .title You clicked a Murray!
      .body
        .img(style="background-image: url(http://www.fillmurray.com/180/180)")
        .text 
          p Bill Murray loves you, and sends his most sincere regards.
          p He also asks that you simply keep on hacking.
      

@import 'nib'

flex(n)
  display: n

padd(a, b)
  padding: a b
  
font()
  font-family 'Fira Mono',sans-serif

body
  font()
  font-smoothing antialiased
  height 100vh
  
section
  background #eee
  height 100vh
  margin 0 auto
  flex(flex)
  justify-content center
  align-items center

.section-modal
  relative()
  overflow hidden
  
  .profile
    flex(flex)
    align-items center
    background #eee
    background white
    padd(10px, 30px)
    border-radius 4px
    box-shadow 0px 23px 30px -20px rgba(black, .2)
    transition all .2s ease-in-out
    
    &:hover
      cursor pointer
      transform translateY(-4px)
      box-shadow 0px 27px 30px -20px rgba(black, .3)
      
    .name
      font-size 24px
      margin-bottom 8px
      font-weight 600
      line-height 20px
      
    .meta
      color rgba(black, .4)
      font()
      
    img
      width 80px
      height @width
      border-radius 50%
      margin-right 20px
      border 5px solid #eee
    
  .overlay
    absolute top 0 right 0 bottom 0 left 0
    //background darken(#16263d, 20%)
    flex(flex)
    justify-content center
    align-items center
    flex(none)
    
    .modal
      width 450px
      box-shadow 0px 23px 30px -20px rgba(black, .4)
      .title
        background #0c8eff
        border-radius 4px 4px 0 0
        font-weight 700
        text-align center
        line-height 48px

      .body
        background white
        border-radius 0 0 4px 4px
        line-height 20px
        flex(flex)
        align-items stretch
        
        .text
          padding 30px
          
          p
            margin-bottom 20px
            
        .img
          height 180px
          width @height - 40px
          flex-shrink 0
          background-size cover
          background-position center
          
    &.is-active
      flex(flex)
      //animation over 5s ease-in-out forwards
      
      .modal
        animation modal 5s ease-in-out forwards
      
@keyframes modal
  0%
    transform translateX(-200%) rotate(-90deg)
    opacity 0
  15%, 85%
    transform translateX(0%) rotate(0deg)
    opacity 1
  100%
    transform translateX(200%) rotate(90deg)

  
  
  

$('.section-modal .profile').click(function(){
  $('.overlay').addClass('is-active');
  setTimeout(function(){
    $('.overlay').removeClass('is-active');
  }, 5000);
});