@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light|Shadows+Into+Light+Two|Give+You+Glory);

body {
  background: blue;
  overflow: hidden;
/*  font: 5vw/100vh "Give You Glory"; */
  text-align: center;
  color: transparent;
  backface-visibility: hidden;
  background: black;
}

span {
  font: 7vw/100vh "Shadows Into Light Two"; 
  display: inline-block;
  text-shadow: 0 0 0 grey;
  animation: smoky 7s 2s both;
  animation-timing-function: ease-out;
}

span:nth-child(even){
  font: 7vw/100vh "Shadows Into Light Two"; 
  animation-name: smoky-mirror;
}

@keyframes smoky {
  70% {
    text-shadow: 0 0 40px grey;
  }
  from {
    transform:
      translate3d(15rem,-8rem,0)
      rotate(-40deg)
      skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px grey;
    opacity: 0;
  }
}

@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px grey; }
  from {
    transform:
      translate3d(18rem,-8rem,0)
      rotate(-50deg) 
      skewX(-70deg)
      scale(2.5);
     text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@for $item from 1 through 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{(3 + ($item/10))}s; 
  }
} 

div#impressum {
    position:absolute;
    right:50px;
    top:10px;
    font-family: 'Verdana';
    font-size: 20px;
    color: #ff4500;
    text-shadow: 0 0 7px rgba(128,128,128, .7); 
    animation: impressum 10s ease-out;
}

@keyframes impressum {
  0% {transform: scaleX(1) }
  50% {transform: scaleX(1) }
  from {
     transform: 
       translate(-300px, -300px) 
       rotate3d(25,35,5,180deg) 
       scale(2.5); 
       opacity: 0; 
       transform-origin: 50% 100%;
  }
}