<link href='https://fonts.googleapis.com/css?family=Bungee' rel='stylesheet' type='text/css'>

#root
  #text{:"data-text" => "Dali Atomicus"}
    Dali Atomicus
    

@mixin animation($animate...) {
    $max: length($animate);
    $animations: '';

    @for $i from 1 through $max {
        $animations: #{$animations + nth($animate, $i)};

        @if $i < $max {
            $animations: #{$animations + ", "};
        }
    }
    -webkit-animation: $animations;
    -moz-animation:    $animations;
    -o-animation:      $animations;
    animation:         $animations;
}

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}

@mixin transform($value){
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}

@mixin opacity($value) {
  $IEValue: $value*100;
  opacity: $value;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
  filter: alpha(opacity=$IEValue);
}

$offset: 6px;
$bgcolor: #111;

*{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
body{
  background: $bgcolor;
  font-family: 'Bungee', cursive;
  text-transform: uppercase;
  font-size: 80px;
  font-weight: bold;
  margin: 0;
}
#root{
  position: absolute;
  top: 50%;
  @include transform(translateY(-50%) translateX(-50%));
  left: 50%;
}
#text{
  top: 0;
  left: -$offset;
  color: red;
  mix-blend-mode: screen;
  position: relative;
  white-space: nowrap;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
   filter: blur(1px);
  @include animation('skew 2s infinite', 'flash .04s infinite');
  
  &:after, &:before{
    content: attr(data-text);
    position: absolute;
    mix-blend-mode: screen;
  }
  &:after{
    top: 0;
    left: $offset;
    color: blue;
    @include animation('move 1.5s infinite');
  }
  &:before{
    top: -0.4*$offset;
    left: 0.6*$offset;
    color: limegreen;
  }
}

.line{
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: blue;
  mix-blend-mode: screen;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  filter: blur(1px);
  &:after, &:before{
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    mix-blend-mode: screen;
  }
  &:after{
    top: 2px;
    background: red;
  }
  &:before{
    top: -2px;
    background: limegreen;
  }
}
  


@include keyframes(skew){
  0%    { @include transform(none) }
  30%   { @include transform(none) }
  30.2% { @include transform(skewX(50deg)) }
  30.4% { @include transform(skewX(-50deg)) }
  31%   { @include transform(none) }
}
@include keyframes(move){
  0%   { @include transform(none); }
  30%  { @include transform(none); }
  31%  { @include transform(translateX(-$offset)) }
  33%  { @include transform(none); }
  98%  { @include transform(none); }
  100% { @include transform(translateX($offset)) }
}
@include keyframes(flash){
  0%   { @include opacity(1) }
  50%  { @include opacity(0.5) }
}
@include keyframes(lines){
  0%   { @include opacity(0.1) }
  50%  { @include opacity(1) }
}

drawLines();

function getHeight(){
  return window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
}

function drawLines(){
  const lines = document.getElementsByClassName('line');
  if(lines.length) {
    for (let i = 0; i < lines.length; i++) {
        document.body.removeChild(lines[i]);
    }
  }
  
  for(i = 0; i < getHeight()/10; i++){
    const line = document.createElement("div");  
    line.className = `line line-${i}`;
    line.style.top = `${i * 10}px`;
    const time = Math.random() * 5;
    line.style.animation = `lines ${time}s infinite`;
    document.body.appendChild(line) ;
  }
}

window.onresize = function(event) {
  drawLines();
};