// -webkit- only animation, because css filter.
// hover for something extra. just because.
// inspired by http://dribbble.com/shots/471972-Film-Slide

body,html{width:100%;height:100%;margin:0;background:linear-gradient(135deg, #160C23, #7B6762)}


// resizable, as usual
$s : 15;
$cols : 7;
$rows : 7;

.heart{
position:absolute;
left:50%;
top:50%;
width:$cols*$s+px;
height:$rows*$s+px;
margin:(-$rows/2)*$s+px 0 0 (-$cols/2)*$s+px;}

.heart:hover::before{-webkit-animation-play-state:paused;border-radius:100%;opacity:0}

.heart::before{
content:'';
display:block;
transition:all 400ms;
-webkit-animation:pulse 1.2s steps(1) infinite;
width:$s+px;
height:$s+px;
margin:(-$s+px) 0 0 (-$s+px);
box-shadow:2*$s+px 1*$s+px #8e1a19,3*$s+px 1*$s+px #ac0500,5*$s+px 1*$s+px #f73f0c,6*$s+px 1*$s+px #fa5f27,1*$s+px 2*$s+px #740100,2*$s+px 2*$s+px #8e0500,3*$s+px 2*$s+px #8e1918,4*$s+px 2*$s+px #ca1300,5*$s+px 2*$s+px #f34f2b,6*$s+px 2*$s+px #df351f,7*$s+px 2*$s+px #f77c2a,1*$s+px 3*$s+px #4b0000,2*$s+px 3*$s+px #690100,3*$s+px 3*$s+px #8e0f0b,4*$s+px 3*$s+px #bf1000,5*$s+px 3*$s+px #f84010,6*$s+px 3*$s+px #f04222,7*$s+px 3*$s+px #fa5724,1*$s+px 4*$s+px #451312,2*$s+px 4*$s+px #5a0100,3*$s+px 4*$s+px #840e0c,4*$s+px 4*$s+px #a51d1a,5*$s+px 4*$s+px #ed2805,6*$s+px 4*$s+px #d9321e,7*$s+px 4*$s+px #f44622,2*$s+px 5*$s+px #3b0000,3*$s+px 5*$s+px #5d1a1b,4*$s+px 5*$s+px #8e1a19,5*$s+px 5*$s+px #a80700,6*$s+px 5*$s+px #b90a00,3*$s+px 6*$s+px #3d0000,4*$s+px 6*$s+px #551415,5*$s+px 6*$s+px #670100,4*$s+px 7*$s+px #340000;
}

@-webkit-keyframes pulse{
  50%{
    -webkit-filter:blur(1.4px);
    -webkit-transform:translate(-2px, 2px);
  }
}