%input.focus#focusDrops{:type => "radio", :name=>"focus"}
%label{:for => "focusDrops"} Focus on the raindrops

%input.focus#focusBG{:type => "radio", :name=>"focus"}
%label{:for => "focusBG"} Focus on the background 

%input.focus#focusBoth{:type => "radio", :name=>"focus", :checked => "checked"} 
%label{:for => "focusBoth"} Focus on both
.disclaimer 
  This demo works best on Webkit and IE 11 (due to  CSS filter support) <br /> <br /> 
  %a{:href => "https://codepen.io/lbebber/"} By Lucas Bebber

.container
  .window <!-- As in a physical window, not a computer window-->
  .raindrops
    .borders  
      - (1..250).each do
        .border
    .drops
      - (1..250).each do
        .raindrop

@import "compass/css3";

@import "compass/css3";
//Only uses this image
$image:'https://i.imgur.com/afNu00o.jpg';
$width:800px;
$height:530px;
$raindrops:250;  
body{
  background:#111;
  font-family:Helvetica, Arial, sans-serif;
  font-size:0;
}
a{
  color:inherit;
}
.container{
  width:$width;
  height:$height;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  overflow:hidden;
  transform:rotateY(0);
}
.window{
  background:url($image);
  width:800px;
  height:530px;
  transform:rotateY(0);
  transition:-webkit-filter 600ms;
}
.raindrops{
  width:$width;
  height:$height;
  //background:transparentize(white,0.9);
  position:absolute;
  top:0;
  left:0;
  transform:rotateY(0); 
  transition:-webkit-filter 600ms;
}
.borders{
  position:absolute;
  
}
@keyframes raindrop-fall{
  0% {
    opacity:0;
    transform:rotate(180deg) scale(2.5,2.3) rotateY(0);
  }
  100% {
    opacity:1;
    transform:rotate(180deg) scale(1,1) rotateY(0); 
  }
}
$raindrop-fall-transition:100ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
.raindrop{
  background:black;
  background-image:url($image);
  background-size:1000%; 
  position:absolute;
  border-radius:100%;
  transform:rotate(180deg) rotateY(0);
  transition:background-size 1s;
  opacity:0;
  animation:raindrop-fall $raindrop-fall-transition;
  animation-fill-mode:forwards;
}

.raindrop:hover{
  background-size:600%;
}
.border{
  position:absolute;
  box-shadow:0 0 0px 2px rgba(0,0,0,1);
  border-radius:100%;
  opacity:0;
  animation:raindrop-fall $raindrop-fall-transition;
  animation-fill-mode:forwards;
}
@for $i from 1 through $raindrops+1{
  $x:random();
  $y:random();
  $size:4+random(8); 
  $stretch:random(20)/100;
  $drop-height:$size*(1+$stretch);
  $delay:(random())*30s;
  $transition:300ms;
  .raindrop:nth-child(#{$i}){
    left:$x*$width;
    top:$y*$height;
    width:$size+px;
    height:$drop-height+px;
    background-position:#{($x*100)+"%"} #{($y*100)+"%"}; 
    animation-delay:$delay; 
  }
  .border:nth-child(#{$i}){
    left:($x*$width)+2;
    top:($y*$height)+1;
    $shadow-size:(($size*0.3) - 1px);
    width:($size - ($shadow-size*2));
    height:($drop-height - 0)+px;
    box-shadow:0 0 0 $shadow-size rgba(0,0,0,0.6);
    animation-delay:$delay;
  }
}
.focus{
  display:none;
}
.focus+label{
  position:relative;
  z-index:2;
  display:inline-block;
  background:#fff;
  text-transform:uppercase;
  font-size:10pt;
  height:30px;
  line-height:30px;
  padding-left:20px;
  padding-right:20px;
  cursor:pointer;
  font-weight:bold;
  transition:color 100ms;
  border-right:1px solid #ccc; 
}
label:hover{
  color:#36518f;
}
.focus:last-child+label{
  border-bottom-right-radius:5px;
}
.focus:checked+label{
  color:#0088ff
}
#focusDrops:checked~.container .raindrops{
  @include filter(blur(0px) brightness(1.3));
}
#focusDrops:checked~.container .window{
  @include filter(blur(8px));
}

#focusBG:checked~.container .raindrops{
  @include filter(blur(2px) brightness(1.3));
}
#focusBG:checked~.container .window{
  @include filter(blur(0));
}


#focusBoth:checked~.container .raindrops{
  @include filter(blur(1px) brightness(1.3)); 
}
#focusBoth:checked~.container .window{
  @include filter(blur(4px));
}
.disclaimer{
  color:white;
  font-size:10pt;
  padding-left:20px;
  z-index:2;
  position:relative;
}

// CSS Raindrops by Lucas Bebber