.firebox {
  display: block;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.fireanim {
  height: 500px;
  width: 450px;
  transform: scale(0.6);
  background: url('../img/anim/fire_sheet.png') left center;
  animation: burnFire 1.2s steps(36) infinite;
}
@keyframes burnFire {
  from { background-position: 0px;}
  to { background-position: -16200px; }
}

.heartbox {
  display: block;
  position: absolute;
  top: -100px;
  z-index: -1;
  width: 450px;
  height: 250px;
  top: -450px;
  right: 20%;
  animation: dropHeart 0.5s 2s forwards;
}
.heartanim {
  width: 889px;
  height: 500px;
  transform: scale(0.5);
  background: url('../img/anim/heart_sheet.png') left center;
  animation:  loopHeartStart 1s steps(10) 2,
              playHeartFull 3s 2s steps(90) 1,
              loopHeartEnd 0.15s 5s steps(3) infinite;
}
@keyframes loopHeartStart {
  from { background-position: 0px;}
  to { background-position: -8890px; }
}

@keyframes playHeartFull {
   from { background-position:    0px; }
   to { background-position: -80010px; }
}
@keyframes loopHeartEnd {
  from{ background-position: -77343px;}
  to { background-position:  -80010px;}
}

@keyframes dropHeart {
  0% { transform:rotate(79deg); top: -1550px;right:20%;}
  80% { transform: rotate(0deg); top: calc(40% - 250px); right: calc( 50% - 50px); }
  81% { top: calc(40% - 250px);}
  82% { top: calc(40% - 265px);}
  86% { top: calc(40% - 250px);}
  100% { top: calc(40% - 250px); right: calc(50% - 60px);}
}


.moonbox {
  display: block;
  position: absolute;
  top: -100px;
  right: 200px;
  z-index: -1;
  width: 200px;
  height: 280px;
}
.moonanim {
  width: 500px;
  height: 700px;
  transform: scale(0.4);
  background: url('../img/anim/moon_sheet.png') left center;
  animation:  playMoon 6s steps(90) infinite;
}

@keyframes playMoon {
  from { background-position: 0px;}
  to { background-position: -45000px; }
}



/* TRIPPY TEXT FILTERZZ */

@keyframes squiggly-anim{
  0%{
    filter: url('../svgfilters.svg#squiggly-0');}

  25%{
    filter: url('../svgfilters.svg#squiggly-1');}

  50%{
    filter: url('../svgfilters.svg#squiggly-2');}

  75%{
    filter: url('../svgfilters.svg#squiggly-3');}

  100%{
    filter: url('../svgfilters.svg#squiggly-4');}
 }

.tutkey {
  animation: squiggly-anim 0.35s linear infinite;
  text-align: center;
}