@display-height: 70vh; 
@blink-time: 500ms;
@keyframes blink {
  0%,49% { border-right-color: transparent }
  50%,100% { border-right-color: currentColor }
}

@keyframes scan {
  0% { background-position: 0 -100vh; }
  35%,100% { background-position: 0 100vh; }
}

html {
  background-color: black;
  padding: 1em;
}

output {
  border-radius: 1em;
  background-color: #131;
  background-image: 
    radial-gradient(ellipse 500% 100% at 50% 90%, transparent, #121);
  //background-size: 500% 100%;
  background-position: center;
  display: block;
  height: @display-height;
  padding: 2em;
  box-shadow: inset 0 0 10em 1em rgba(0,0,0,0.5);
  overflow: auto;

  font-family: monospace;
  color: rgba(128,255,128,0.8);
  
  position: relative;
  
  .layer() {
    position: absolute;
    content: "";
    display: block;
    top:0; left: 0; right: 0; bottom: 0;
    pointer-events:none;
  }
  
  // Scan
  &::before {
    .layer();
    background-image: linear-gradient(0deg,
      transparent 0%,
      rgba(32,128,32,0.2) 2%,
      rgba(32,128,32,0.8) 3%,
      rgba(32,128,32,0.2) 3%,
      transparent 100%);
    background-repeat: no-repeat;
    animation: scan 7.5s linear 0s infinite;
  }
  
  &::after {
    .layer();
    background-image:
      // Glare
      radial-gradient(ellipse 50% 15% at 50% 15%, rgba(255,255,255,0.05), transparent),
      radial-gradient(ellipse 50% 10% at 50% 12%, rgba(255,255,255,0.1), transparent),
      radial-gradient(ellipse 50% 5% at 50% 10%, rgba(255,255,255,0.1), transparent),
      radial-gradient(ellipse 50% 3% at 50% 9%, rgba(255,255,255,0.1), transparent),
      // Shadow
      radial-gradient(ellipse 200% 20% at 50% 0%, rgba(0,0,0,0.5), transparent),      
      // Scanlines
      linear-gradient(0deg, rgba(0,0,0,0.2) 50%, transparent 50%);
    background-size: 100%, 100%, 100%, 100%, 100%, 100% 0.25ch;
  }
  
  q {
    border-right: 0 solid currentColor;
    animation: blink @blink-time linear 0s infinite;
    text-shadow: 0 0 1ex #3f3, 0 0 2px rgba(255,255,255,0.8);
    margin-bottom: 1em;
    line-height: 150%;
    
    &::before {
      content: "> ";
    }
    
    &:last-child {
      border-right-width: 1ch;
    }
  }
}

var bind = Function.prototype.bind,
    $append = bind.call(Element.prototype.appendChild, document.querySelector("output")),
    $new = bind.call(Document.prototype.createElement, document),
    $text = bind.call(Document.prototype.createTextNode, document),
    $rnd = function() { return (Math.random() * 125 + 0)|0; }, 
    $promise = function(thenFn) {
      var args, promise, wait, slice=Array.prototype.slice, isResolved = false;
      var promise = {
        wait: function(ms) {
          wait = ms;
          return promise;
        },
        then: function() {
          args = slice.call(arguments);
          return promise = $promise(thenFn);
        },
        resolve: function() {
          isResolved = true;
          if(args) {
            var next = Function.prototype.bind.apply(thenFn, [undefined].concat(args).concat([promise]));
            wait ? setTimeout(next, wait) : next();
          }

        }
      };
      return promise;
    };

var process = function(target, chars, promise) {
  var first = chars[0], rest = chars.slice(1);
  if(!first) {
    promise.resolve();
    return;
  }
  target.appendChild(first);
  setTimeout(process.bind(undefined, target, rest, promise), $rnd());
}

var type = function(text, promise) {
  var chars = text.split("").map($text);
  promise = promise || $promise(type);
  $append($new("br"));
  process($append($new("q")), chars, promise);
  return promise;
};

type("Testing....")
  .wait(500)
  .then("This is just a test...")
  .then("This is *only* a test...")
  .wait(1500)
  .then("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae tellus aliquet, eleifend mi id, malesuada massa. Nam sit amet nunc ut nulla elementum tempor eu ut ipsum. Suspendisse eget augue sollicitudin, adipiscing dui sed, blandit nulla. Donec tempor vehicula nisi at molestie. Vestibulum interdum sem arcu, vitae sodales libero gravida et. Suspendisse pretium consectetur augue at lacinia. Ut urna lectus, tincidunt ut elit vitae, egestas egestas ipsum. Maecenas gravida tortor eget metus pulvinar sodales. Cras vitae nisi nec felis varius auctor. Donec semper aliquam mollis.");