#outer
#wrap
 .tile
  %b 1
 .tile
  %b 2
 .tile
  %b 3
 %h1{"data-splitting" => "words"} Proin pretium leo
 %h1{"data-splitting" => "words"} Aenean leo ligula
 %h1{"data-splitting" => "words"} Duis arcu tortor
 %p{"data-splitting" => "words"} Morbi ac felis. Donec posuere vulputate arcu. Praesent adipiscing. Praesent porttitor, nulla vitae.
 %p{"data-splitting" => "words"} Curabitur turpis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Donec posuere vulputate arcu. 
 %p{"data-splitting" => "words"} Nunc nulla. Vestibulum fringilla pede sit amet augue. Aliquam erat volutpat. Donec elitlibero. Praesent nec nisl.

$bg: #ededec;
$r: #f8423e;
$b: #1A1612;
$w: #fff;
$g: #5a5651;
$bl: #0abbbb;
$transition: cubic-bezier(1, 0, 0, 1);

body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  background:$bg;
  font-family:'Futura';
  #outer{
    min-width:600px;
    height:375px;
    position:absolute;
    box-shadow:0 0 0 10px $bg, inset 0 0 0 5px $bg;
    &.active{
      &:before, &:after{
        transform:scale(1);
        transition-delay:800ms;
      }
      &:after{
        transition-delay:1000ms;
      }
    }
    &:before{
      content:'';
      position:absolute;
      width:50px;
      height:100px;
      bottom:-14px;
      left:-14px;
      background:$b;
      z-index:-1;
      transform-origin:bottom left;
      transition:transform 600ms $transition;
      transform:scale(0);
    }
    &:after{
      content:'';
      position:absolute;
      width:100px;
      height:75px;
      top:-14px;
      right:-14px;
      background:$b;
      z-index:-1;
      transform-origin:top right;
      transition:transform 400ms $transition;
      transform:scale(0);
    }
  }
  #wrap{
    min-width:600px;
    height:375px;
    position:relative;
    display:inline-block;
    -webkit-clip-path: polygon(0 -150%, 100% -150%, 100% 100%, 0% 100%);
clip-path: polygon(0 -150%, 100% -150%, 100% 100%, 0% 100%);
    background:$w;
    h1{
      position:absolute;
      margin:0;
      top:55%;
      right:0;
      width:100%;
      text-align:center;
      color:$b;
      pointer-events:none;
      font-family: 'Libre Baskerville', serif;
      font-weight:900;
      z-index:0;
      span.word{
        display:inline-block;
        transform:translateY(200px);
        transition:transform 600ms $transition;
        transition-delay:0s;
      }
    }
    p{
      position:absolute;
      bottom:10px;
      width:calc(50% - 25px);
      right:12.5px;
      color:$b;
      font-size:18px;
      line-height:24px;
      span.word{
        display:inline-block;
        transform:translateY(200px) rotate(45deg);
        transition:transform 600ms $transition;
        transition-delay:0s;
      }
    }
    .tile{
      background:$w;
      position:absolute;
      height:105%;
      width:35%;
      top:-2.5%;
      transition:400ms $transition;
      transition-delay:0s, 0s;
      will-change:transform;
      overflow:hidden;
      z-index:1;
      &:hover{
        b{
          &:before{
            box-shadow:0 0 0 9px transparent, 0 0 0 10px $w;
          }
        }
      }
      b{
        position:absolute;
        left:50%;
        top:50%;
        font-size:60px;
        margin:0;
        transform:translateX(-50%) translateY(-50%);
        color:$w;
        mix-blend-mode:exclusion;
        transition:0.4s $transition;
        &:after{
          content:'X';
          position:absolute;
          z-index:3;
          color:$b;
          left:50%;
          top:50%;
          transform:translateX(-50%) translateY(-50%);
          opacity:0;
          transition:0.4s $transition;
        }
        &:before{
          content:'';
          position:absolute;
          width:90px;
          height:90px;
          border-radius:100%;
          box-shadow:0 0 0 0px transparent, 0 0 0 1px $w;
          left:50%;
          top:50%;
          transform:translateX(-50%) translateY(-50%);
          transition:0.4s $transition;
        }
      }
      &:not(.active){
        &:hover{
          &:before{
            transform:scale(1.05);
          }
        }
      }
      &:before, &:after{
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        background-image:url("https://puu.sh/BpEGd/073052b7db.jpg");
        background-size:cover;
        background-position:center;
        transition:0.2s ease-in-out;
        will-change:width;
      }
      &:before{
        filter:saturate(0) contrast(2);
        opacity:0.25;
      }
      &:after{
        background:$r;
        mix-blend-mode:darken;
      }
      &:nth-of-type(2){
        &:before{
          background-image:url("https://puu.sh/BpEOe/5e7a6761de.jpg");
        }
      }
      &:nth-of-type(3){
        &:before{
          background-image:url("https://puu.sh/BpEP0/febf13c337.jpg");
        }
      }
      @for $i from 1 through 3{
        &:nth-of-type(#{$i}){
          left:#{($i - 1.015) * 33%};
          transition-delay:#{($i/12) + 0.15}s;
          transform:scale(0.95);
          &.active{
            &~h1{
              &:nth-of-type(#{$i}){
                z-index:2;
                span.word{
                  display:inline-block;
                  transform:translateY(0px);
                  color:$b;
                  @for $j from 1 through 5{
                    &:nth-of-type(#{$j}){
                      transition-delay:#{400 + ($j * 20)}ms;
                    }
                  }
                }
              }
            }
            &~p{
              &:nth-of-type(#{$i}){
                z-index:2;
                span.word{
                  display:inline-block;
                  transform:translateY(0px);
                  color:$b;
                  @for $j from 1 through 40{
                    &:nth-of-type(#{$j}){
                      transition-delay:#{400 + ($j * 10)}ms;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    &.active{
      .tile{
        transform:translateY(200%);
        opacity:0;
        &.active{
          width:75%;
          height:75%;
          box-shadow:0 10px 20px -5px rgba(0,0,0,0.15);
          transform:translateX(-50%);
          top:-25%;
          left:50%;
          grid-column-start: 2;
          opacity:1;
          b{
            opacity:1;
            color:transparent;
            mix-blend-mode:hard-light;
            transform:translateX(0) translateY(0) scale(0.35);
            left:5px;
            top:-10px;
            z-index:3;
            &:hover{
              &:before{
                box-shadow:inset 0 0 0 50px $b, 0 0 0 10px $w;
                transition-delay:0s;
              }
              &:after{
                color:$w;
                transition-delay:0s;
              }
            }
            &:after{
              opacity:1;
            }
            &:before{
              box-shadow:inset 0 0 0 50px $bl, 0 0 0 10px $b;
            }
          }
          &:before{
            filter:saturate(1) contrast(1);
            opacity:1;
          }
          &:after{
            opacity:0;
          }
        }
      }
      &:before{
        transform:scaleX(0.5);
      }
    }
    &:before{
      content:'';
      position:absolute;
      width:100%;
      height:100%;
      left:0;
      top:0;
      background:$r;
      transition:all 600ms $transition;
      transform-origin:left;
      z-index:1;
    }
  }
}

$('.tile').click(function(){
  $('#wrap, #outer').toggleClass('active');
  $(this).toggleClass('active');
});


Splitting();