$font-size: 5rem;
$line-height: $font-size * 1.2;
$blur-amount: 5px;

html,
body {
  height: 100%;
}

body {
  text-align: center;
  background: linear-gradient(transparent 50%, #f1f1f1 50%);
}

.split {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: $line-height / -2;
  display: inline-block;
  height: $line-height;
  width: 100%;
  
  &::before,
  &::after {
    content: attr(data-text);
    font-size: $font-size;
    text-transform: uppercase;
    line-height: $line-height;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  &::before {
    clip: rect(auto, auto, #{$line-height * 0.5}, auto); 
  }

  &::after {
    clip: rect(#{$line-height * 0.5}, auto, auto, auto); 
    -webkit-filter: blur($blur-amount);
  }

}