.container
  .item.item--square
    h1.title( data-title="Square" ) Square
    .preview( data-preview="Square shape preview" )
  .item.item--circle
    h1.title( data-title="Circle" ) Circle
    .preview( data-preview="Circle shape preview" )
  .item.item--triangle
    h1.title( data-title="Triangle" ) Triangle
    .preview( data-preview="Triangle shape preview" )
  .item.item--arrow
    h1.title( data-title="Arrow" ) Arrow
    .preview( data-preview="Arrow shape preview" )

body
  background #292929
  margin 0
  padding 0
  width 100vw
  height 100vh
  position relative
  overflow hidden

  .container
    position absolute
    top 50%
    left 50%
    transform translate( -50%, -50% )

  .item
    position relative

    &:not( :last-child )
      margin-bottom 2vh
      border-bottom solid 1px #ECF0F1

  .title
    font-size 8vh
    text-transform uppercase
    color #95A5A6
    margin 0

    &:before
      content attr( data-title )
      color #ECF0F1

  .preview
    width: 100%
    height: 8vh

    &:before
      content ''
      background #ECF0F1

    &:after
      color #ECF0F1
      content attr( data-preview )
      font-size 1.3vh
      line-height 8vh

  .title,
  .preview
    text-align center
    text-transform uppercase
    position relative

    &:before,
    &:after
      width 100%
      height 100%
      display block
      position absolute
      top 0
      left 0
      transition clip-path 0.5s cubic-bezier( 0.455, 0.030, 0.515, 0.955 )

  .item--square
    .title,
    .preview
      &:before
        clip-path polygon( 0 0, 0 0, -50px 100%, 0 100% )

      &:hover
        &:before
          clip-path polygon( 0 0, calc( 100% + 50px ) 0, 100% 100%, 0 100% )

  .item--circle
    .title,
    .preview
      &:before
        clip-path circle(0% at 0% 50%)

      &:hover
        &:before
          clip-path circle(150% at 0% 50%)

  .item--triangle
    .title,
    .preview
      &:before
        clip-path polygon( 50% 100%, 0% calc( 100% + 50px ), 0% 200%, 100% 200%, 100% calc( 100% + 50px ) )
        transition-duration 0.4s

      &:hover
        &:before
          clip-path polygon( 50% -50px, 0% 0%, 0% 100%, 100% 100%, 100% 0% )

  .item--arrow
    .title,
    .preview
      &:before
        clip-path polygon( -20px 0%, 0px 50%, -20px 100%, -60px 100%, -40px 50%, -60px 0% )
        transition-duration 0.0s

      &:hover
        &:before
          clip-path polygon( calc( 100% + 40px ) 0%, calc( 100% + 60px ) 50%,  calc( 100% + 40px ) 100%, 100% 100%, calc( 100% + 20px ) 50%, 100% 0% )
          transition-duration 0.8s