%svg{:version => "1.1", :xmlns => "http://www.w3.org/2000/svg"}
    %filter#blur
        %fegaussianblur{:stddeviation => "10"}
.h
    %h1 Purple Haze
    %h2 Css only smoke effect
    -(1..60).each do
        .c
        

@import url(https://fonts.googleapis.com/css?family=Lato:400,300);

body{
    background: #332B33;
}

.h{
    %title{
        position:absolute;
        z-index:3;
        text-transform:uppercase;
        text-shadow:0px 10px rgba(0,0,0,.15);
        left:0;
        right:0;
        margin:auto;
        transform:translateY(-50%);
        font-family:lato;
        font-weight:300;
        color:white;
    }
    h1{
        @extend %title !optional;
        letter-spacing:28px;
        font-size:14px;
        top:50%;
    }
    h2{
        @extend %title !optional;
        letter-spacing:10px;
        font-size:10px;
        top:60%;
    }
    text-align:center;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/overlay.png");
    width:500px;
    height:500px;
    overflow:hidden;
    position:absolute;
    border:4px solid white;
    left:0;
    right:0;
    margin:auto;
    top:50%;
    transform:translateY(-50%);
    .c{
        border:2px solid rgba(255,255,255,.1);
        border-radius:400px;
        position:absolute;
        margin:auto;
        @for $i from 1 through 60{
            &:nth-of-type(#{$i}){
                box-shadow: 3px 0px rgba(255,255,255, - ($i/40)),6px -5px rgba(10, 0, 0,  - ($i/40));
                width:($i * 6) + 0px;
                height:($i * 1) + 0px;
                right:($i * 10) + 0px;
                bottom:($i * 10) + 0px;
                //-webkit-filter:blur($i/3 + 8px);
                -webkit-filter: blur($i/3 + 8px);
                -moz-filter: blur($i/3 + 8px);
                -o-filter: blur($i/3 + 8px);
                -ms-filter: blur($i/3 + 8px);
                //filter: url(#blur);
                transform-origin: ($i * 4) + 0px ($i * 2) + 0px;
                animation: spin 3s ($i/10) + 0s linear infinite;
                background:rgba(90 + ($i*3),33 + ($i*1) ,205,1 - ($i/80));
            }
        }
    }
}

@keyframes spin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

// No!