From 0e107e16a2cc98fd4717a6e0a135c633308bde18 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 21 May 2019 16:09:26 +1000
Subject: [PATCH] Particle animations with SCSS

---
 WORKLOG.md                               |    6 -
 client/assets/scss/anims.scss            |   59 +
 client/assets/styles/anims.css           | 2217 ++++++++++++++++++++++
 client/assets/styles/game.css            |    2 +-
 client/index.js                          |    1 +
 client/package.json                      |    2 +
 client/src/animations.jsx                |   11 +
 client/src/components/game.component.jsx |    8 +
 client/src/components/game.cryp.jsx      |    8 +
 client/src/constants.jsx                 |    6 +-
 server/src/item.rs                       |    8 +-
 11 files changed, 2314 insertions(+), 14 deletions(-)
 create mode 100644 client/assets/scss/anims.scss
 create mode 100644 client/assets/styles/anims.css
 create mode 100644 client/src/animations.jsx

diff --git a/WORKLOG.md b/WORKLOG.md
index 454076f7..bc9f360b 100644
--- a/WORKLOG.md
+++ b/WORKLOG.md
@@ -49,7 +49,6 @@ var / skill info rpc
 * game
 
 *SERVER*
-Base Items - Buff / Debuff / Stun should be equippable / usable skills
 
 push events
 
@@ -60,11 +59,6 @@ logging
 * vbox drops chances
   * 50% spec, 25% colour etc
 
-* confirm cryp without skill ready
-  * draw big warning !
-  * confirm all (turn timeouts) 10 - 15 seconds
-
-
 * skills
     * private fields for opponents
 
diff --git a/client/assets/scss/anims.scss b/client/assets/scss/anims.scss
new file mode 100644
index 00000000..8828c0d0
--- /dev/null
+++ b/client/assets/scss/anims.scss
@@ -0,0 +1,59 @@
+
+.anim-container {
+    position: absolute;
+    width: 100%;
+    min-height: 100%;
+    transform-style: preserve-3d;
+}
+
+.blast-cast {
+    position: absolute;
+    background: black;
+    opacity: .7;
+    border-radius: 50%;
+}
+
+@for $i from 1 through 100 {
+    @keyframes blast-cast-#{$i} {
+      100% {
+        transform: translate3d(-3em +random(200)/200, 0, 0);
+      }
+    }
+}
+
+@for $i from 1 through 100 {
+  .blast-cast:nth-child(#{$i}){
+     $size: random(30)+px;
+     height: $size;
+     width: $size;
+     transform: translate3d( (random(200) * 1px),  (random(200) * 1px), (random(200) * 1px));
+     background: #15f4ee;
+     animation: blast-cast-#{$i} 0.7s;
+  }
+}
+
+.blast-hit {
+    position: absolute;
+    background: black;
+    opacity: .7;
+    border-radius: 50%;
+}
+
+@for $i from 1 through 100 {
+    @keyframes blast-hit-#{$i} {
+      100% {
+            transform: translate3d((random(200) * 1px),  (random(200) * 1px), (random(200) * 1px));
+      }
+    }
+}
+
+@for $i from 1 through 100 {
+    .blast-hit:nth-child(#{$i}){
+        $size: random(30)+px;
+        height: $size;
+        width: $size;
+        transform: translate3d(-3em +random(200)/200, 0, 0);
+        animation: blast-hit-#{$i} 0.7s infinite;
+        background: #15f4ee;
+     }
+}
diff --git a/client/assets/styles/anims.css b/client/assets/styles/anims.css
new file mode 100644
index 00000000..4af1c7db
--- /dev/null
+++ b/client/assets/styles/anims.css
@@ -0,0 +1,2217 @@
+.anim-container {
+  position: absolute;
+  width: 100%;
+  min-height: 100%;
+  transform-style: preserve-3d; }
+
+.blast-cast {
+  position: absolute;
+  background: black;
+  opacity: .7;
+  border-radius: 50%; }
+
+@keyframes blast-cast-1 {
+  100% {
+    transform: translate3d(-2.69em, 0, 0); } }
+
+@keyframes blast-cast-2 {
+  100% {
+    transform: translate3d(-2.785em, 0, 0); } }
+
+@keyframes blast-cast-3 {
+  100% {
+    transform: translate3d(-2.58em, 0, 0); } }
+
+@keyframes blast-cast-4 {
+  100% {
+    transform: translate3d(-2.42em, 0, 0); } }
+
+@keyframes blast-cast-5 {
+  100% {
+    transform: translate3d(-2.305em, 0, 0); } }
+
+@keyframes blast-cast-6 {
+  100% {
+    transform: translate3d(-2.58em, 0, 0); } }
+
+@keyframes blast-cast-7 {
+  100% {
+    transform: translate3d(-2.805em, 0, 0); } }
+
+@keyframes blast-cast-8 {
+  100% {
+    transform: translate3d(-2.69em, 0, 0); } }
+
+@keyframes blast-cast-9 {
+  100% {
+    transform: translate3d(-2.67em, 0, 0); } }
+
+@keyframes blast-cast-10 {
+  100% {
+    transform: translate3d(-2.79em, 0, 0); } }
+
+@keyframes blast-cast-11 {
+  100% {
+    transform: translate3d(-2.97em, 0, 0); } }
+
+@keyframes blast-cast-12 {
+  100% {
+    transform: translate3d(-2.615em, 0, 0); } }
+
+@keyframes blast-cast-13 {
+  100% {
+    transform: translate3d(-2.905em, 0, 0); } }
+
+@keyframes blast-cast-14 {
+  100% {
+    transform: translate3d(-2.76em, 0, 0); } }
+
+@keyframes blast-cast-15 {
+  100% {
+    transform: translate3d(-2.57em, 0, 0); } }
+
+@keyframes blast-cast-16 {
+  100% {
+    transform: translate3d(-2.4em, 0, 0); } }
+
+@keyframes blast-cast-17 {
+  100% {
+    transform: translate3d(-2.055em, 0, 0); } }
+
+@keyframes blast-cast-18 {
+  100% {
+    transform: translate3d(-2.33em, 0, 0); } }
+
+@keyframes blast-cast-19 {
+  100% {
+    transform: translate3d(-2.455em, 0, 0); } }
+
+@keyframes blast-cast-20 {
+  100% {
+    transform: translate3d(-2.16em, 0, 0); } }
+
+@keyframes blast-cast-21 {
+  100% {
+    transform: translate3d(-2.84em, 0, 0); } }
+
+@keyframes blast-cast-22 {
+  100% {
+    transform: translate3d(-2.45em, 0, 0); } }
+
+@keyframes blast-cast-23 {
+  100% {
+    transform: translate3d(-2.28em, 0, 0); } }
+
+@keyframes blast-cast-24 {
+  100% {
+    transform: translate3d(-2.295em, 0, 0); } }
+
+@keyframes blast-cast-25 {
+  100% {
+    transform: translate3d(-2.89em, 0, 0); } }
+
+@keyframes blast-cast-26 {
+  100% {
+    transform: translate3d(-2.18em, 0, 0); } }
+
+@keyframes blast-cast-27 {
+  100% {
+    transform: translate3d(-2.485em, 0, 0); } }
+
+@keyframes blast-cast-28 {
+  100% {
+    transform: translate3d(-2.88em, 0, 0); } }
+
+@keyframes blast-cast-29 {
+  100% {
+    transform: translate3d(-2.305em, 0, 0); } }
+
+@keyframes blast-cast-30 {
+  100% {
+    transform: translate3d(-2.375em, 0, 0); } }
+
+@keyframes blast-cast-31 {
+  100% {
+    transform: translate3d(-2.11em, 0, 0); } }
+
+@keyframes blast-cast-32 {
+  100% {
+    transform: translate3d(-2em, 0, 0); } }
+
+@keyframes blast-cast-33 {
+  100% {
+    transform: translate3d(-2.43em, 0, 0); } }
+
+@keyframes blast-cast-34 {
+  100% {
+    transform: translate3d(-2.765em, 0, 0); } }
+
+@keyframes blast-cast-35 {
+  100% {
+    transform: translate3d(-2.27em, 0, 0); } }
+
+@keyframes blast-cast-36 {
+  100% {
+    transform: translate3d(-2.015em, 0, 0); } }
+
+@keyframes blast-cast-37 {
+  100% {
+    transform: translate3d(-2.33em, 0, 0); } }
+
+@keyframes blast-cast-38 {
+  100% {
+    transform: translate3d(-2.905em, 0, 0); } }
+
+@keyframes blast-cast-39 {
+  100% {
+    transform: translate3d(-2.76em, 0, 0); } }
+
+@keyframes blast-cast-40 {
+  100% {
+    transform: translate3d(-2.27em, 0, 0); } }
+
+@keyframes blast-cast-41 {
+  100% {
+    transform: translate3d(-2.705em, 0, 0); } }
+
+@keyframes blast-cast-42 {
+  100% {
+    transform: translate3d(-2.89em, 0, 0); } }
+
+@keyframes blast-cast-43 {
+  100% {
+    transform: translate3d(-2.89em, 0, 0); } }
+
+@keyframes blast-cast-44 {
+  100% {
+    transform: translate3d(-2.41em, 0, 0); } }
+
+@keyframes blast-cast-45 {
+  100% {
+    transform: translate3d(-2.705em, 0, 0); } }
+
+@keyframes blast-cast-46 {
+  100% {
+    transform: translate3d(-2.15em, 0, 0); } }
+
+@keyframes blast-cast-47 {
+  100% {
+    transform: translate3d(-2.945em, 0, 0); } }
+
+@keyframes blast-cast-48 {
+  100% {
+    transform: translate3d(-2.51em, 0, 0); } }
+
+@keyframes blast-cast-49 {
+  100% {
+    transform: translate3d(-2.305em, 0, 0); } }
+
+@keyframes blast-cast-50 {
+  100% {
+    transform: translate3d(-2.475em, 0, 0); } }
+
+@keyframes blast-cast-51 {
+  100% {
+    transform: translate3d(-2.725em, 0, 0); } }
+
+@keyframes blast-cast-52 {
+  100% {
+    transform: translate3d(-2.545em, 0, 0); } }
+
+@keyframes blast-cast-53 {
+  100% {
+    transform: translate3d(-2.685em, 0, 0); } }
+
+@keyframes blast-cast-54 {
+  100% {
+    transform: translate3d(-2.36em, 0, 0); } }
+
+@keyframes blast-cast-55 {
+  100% {
+    transform: translate3d(-2.14em, 0, 0); } }
+
+@keyframes blast-cast-56 {
+  100% {
+    transform: translate3d(-2.01em, 0, 0); } }
+
+@keyframes blast-cast-57 {
+  100% {
+    transform: translate3d(-2.615em, 0, 0); } }
+
+@keyframes blast-cast-58 {
+  100% {
+    transform: translate3d(-2.525em, 0, 0); } }
+
+@keyframes blast-cast-59 {
+  100% {
+    transform: translate3d(-2.885em, 0, 0); } }
+
+@keyframes blast-cast-60 {
+  100% {
+    transform: translate3d(-2.165em, 0, 0); } }
+
+@keyframes blast-cast-61 {
+  100% {
+    transform: translate3d(-2.47em, 0, 0); } }
+
+@keyframes blast-cast-62 {
+  100% {
+    transform: translate3d(-2.07em, 0, 0); } }
+
+@keyframes blast-cast-63 {
+  100% {
+    transform: translate3d(-2.8em, 0, 0); } }
+
+@keyframes blast-cast-64 {
+  100% {
+    transform: translate3d(-2.75em, 0, 0); } }
+
+@keyframes blast-cast-65 {
+  100% {
+    transform: translate3d(-2.22em, 0, 0); } }
+
+@keyframes blast-cast-66 {
+  100% {
+    transform: translate3d(-2.285em, 0, 0); } }
+
+@keyframes blast-cast-67 {
+  100% {
+    transform: translate3d(-2.69em, 0, 0); } }
+
+@keyframes blast-cast-68 {
+  100% {
+    transform: translate3d(-2.23em, 0, 0); } }
+
+@keyframes blast-cast-69 {
+  100% {
+    transform: translate3d(-2.545em, 0, 0); } }
+
+@keyframes blast-cast-70 {
+  100% {
+    transform: translate3d(-2.51em, 0, 0); } }
+
+@keyframes blast-cast-71 {
+  100% {
+    transform: translate3d(-2.59em, 0, 0); } }
+
+@keyframes blast-cast-72 {
+  100% {
+    transform: translate3d(-2.52em, 0, 0); } }
+
+@keyframes blast-cast-73 {
+  100% {
+    transform: translate3d(-2.295em, 0, 0); } }
+
+@keyframes blast-cast-74 {
+  100% {
+    transform: translate3d(-2.25em, 0, 0); } }
+
+@keyframes blast-cast-75 {
+  100% {
+    transform: translate3d(-2.595em, 0, 0); } }
+
+@keyframes blast-cast-76 {
+  100% {
+    transform: translate3d(-2.09em, 0, 0); } }
+
+@keyframes blast-cast-77 {
+  100% {
+    transform: translate3d(-2.105em, 0, 0); } }
+
+@keyframes blast-cast-78 {
+  100% {
+    transform: translate3d(-2.5em, 0, 0); } }
+
+@keyframes blast-cast-79 {
+  100% {
+    transform: translate3d(-2.985em, 0, 0); } }
+
+@keyframes blast-cast-80 {
+  100% {
+    transform: translate3d(-2.88em, 0, 0); } }
+
+@keyframes blast-cast-81 {
+  100% {
+    transform: translate3d(-2.045em, 0, 0); } }
+
+@keyframes blast-cast-82 {
+  100% {
+    transform: translate3d(-2.83em, 0, 0); } }
+
+@keyframes blast-cast-83 {
+  100% {
+    transform: translate3d(-2.575em, 0, 0); } }
+
+@keyframes blast-cast-84 {
+  100% {
+    transform: translate3d(-2.11em, 0, 0); } }
+
+@keyframes blast-cast-85 {
+  100% {
+    transform: translate3d(-2.495em, 0, 0); } }
+
+@keyframes blast-cast-86 {
+  100% {
+    transform: translate3d(-2.845em, 0, 0); } }
+
+@keyframes blast-cast-87 {
+  100% {
+    transform: translate3d(-2.3em, 0, 0); } }
+
+@keyframes blast-cast-88 {
+  100% {
+    transform: translate3d(-2.765em, 0, 0); } }
+
+@keyframes blast-cast-89 {
+  100% {
+    transform: translate3d(-2.755em, 0, 0); } }
+
+@keyframes blast-cast-90 {
+  100% {
+    transform: translate3d(-2.425em, 0, 0); } }
+
+@keyframes blast-cast-91 {
+  100% {
+    transform: translate3d(-2.305em, 0, 0); } }
+
+@keyframes blast-cast-92 {
+  100% {
+    transform: translate3d(-2.96em, 0, 0); } }
+
+@keyframes blast-cast-93 {
+  100% {
+    transform: translate3d(-2.105em, 0, 0); } }
+
+@keyframes blast-cast-94 {
+  100% {
+    transform: translate3d(-2.645em, 0, 0); } }
+
+@keyframes blast-cast-95 {
+  100% {
+    transform: translate3d(-2.525em, 0, 0); } }
+
+@keyframes blast-cast-96 {
+  100% {
+    transform: translate3d(-2.22em, 0, 0); } }
+
+@keyframes blast-cast-97 {
+  100% {
+    transform: translate3d(-2.275em, 0, 0); } }
+
+@keyframes blast-cast-98 {
+  100% {
+    transform: translate3d(-2.13em, 0, 0); } }
+
+@keyframes blast-cast-99 {
+  100% {
+    transform: translate3d(-2.16em, 0, 0); } }
+
+@keyframes blast-cast-100 {
+  100% {
+    transform: translate3d(-2.265em, 0, 0); } }
+
+.blast-cast:nth-child(1) {
+  height: 13px;
+  width: 13px;
+  transform: translate3d(197px, 177px, 109px);
+  background: #15f4ee;
+  animation: blast-cast-1 0.7s; }
+
+.blast-cast:nth-child(2) {
+  height: 22px;
+  width: 22px;
+  transform: translate3d(98px, 148px, 190px);
+  background: #15f4ee;
+  animation: blast-cast-2 0.7s; }
+
+.blast-cast:nth-child(3) {
+  height: 6px;
+  width: 6px;
+  transform: translate3d(10px, 92px, 12px);
+  background: #15f4ee;
+  animation: blast-cast-3 0.7s; }
+
+.blast-cast:nth-child(4) {
+  height: 22px;
+  width: 22px;
+  transform: translate3d(83px, 107px, 66px);
+  background: #15f4ee;
+  animation: blast-cast-4 0.7s; }
+
+.blast-cast:nth-child(5) {
+  height: 12px;
+  width: 12px;
+  transform: translate3d(9px, 145px, 109px);
+  background: #15f4ee;
+  animation: blast-cast-5 0.7s; }
+
+.blast-cast:nth-child(6) {
+  height: 1px;
+  width: 1px;
+  transform: translate3d(57px, 135px, 200px);
+  background: #15f4ee;
+  animation: blast-cast-6 0.7s; }
+
+.blast-cast:nth-child(7) {
+  height: 12px;
+  width: 12px;
+  transform: translate3d(103px, 83px, 12px);
+  background: #15f4ee;
+  animation: blast-cast-7 0.7s; }
+
+.blast-cast:nth-child(8) {
+  height: 8px;
+  width: 8px;
+  transform: translate3d(62px, 54px, 86px);
+  background: #15f4ee;
+  animation: blast-cast-8 0.7s; }
+
+.blast-cast:nth-child(9) {
+  height: 25px;
+  width: 25px;
+  transform: translate3d(17px, 25px, 13px);
+  background: #15f4ee;
+  animation: blast-cast-9 0.7s; }
+
+.blast-cast:nth-child(10) {
+  height: 28px;
+  width: 28px;
+  transform: translate3d(181px, 81px, 38px);
+  background: #15f4ee;
+  animation: blast-cast-10 0.7s; }
+
+.blast-cast:nth-child(11) {
+  height: 10px;
+  width: 10px;
+  transform: translate3d(190px, 173px, 2px);
+  background: #15f4ee;
+  animation: blast-cast-11 0.7s; }
+
+.blast-cast:nth-child(12) {
+  height: 2px;
+  width: 2px;
+  transform: translate3d(134px, 95px, 87px);
+  background: #15f4ee;
+  animation: blast-cast-12 0.7s; }
+
+.blast-cast:nth-child(13) {
+  height: 12px;
+  width: 12px;
+  transform: translate3d(163px, 189px, 92px);
+  background: #15f4ee;
+  animation: blast-cast-13 0.7s; }
+
+.blast-cast:nth-child(14) {
+  height: 26px;
+  width: 26px;
+  transform: translate3d(60px, 69px, 183px);
+  background: #15f4ee;
+  animation: blast-cast-14 0.7s; }
+
+.blast-cast:nth-child(15) {
+  height: 13px;
+  width: 13px;
+  transform: translate3d(44px, 132px, 185px);
+  background: #15f4ee;
+  animation: blast-cast-15 0.7s; }
+
+.blast-cast:nth-child(16) {
+  height: 5px;
+  width: 5px;
+  transform: translate3d(77px, 60px, 43px);
+  background: #15f4ee;
+  animation: blast-cast-16 0.7s; }
+
+.blast-cast:nth-child(17) {
+  height: 12px;
+  width: 12px;
+  transform: translate3d(158px, 31px, 177px);
+  background: #15f4ee;
+  animation: blast-cast-17 0.7s; }
+
+.blast-cast:nth-child(18) {
+  height: 22px;
+  width: 22px;
+  transform: translate3d(46px, 103px, 13px);
+  background: #15f4ee;
+  animation: blast-cast-18 0.7s; }
+
+.blast-cast:nth-child(19) {
+  height: 11px;
+  width: 11px;
+  transform: translate3d(92px, 25px, 49px);
+  background: #15f4ee;
+  animation: blast-cast-19 0.7s; }
+
+.blast-cast:nth-child(20) {
+  height: 24px;
+  width: 24px;
+  transform: translate3d(102px, 71px, 95px);
+  background: #15f4ee;
+  animation: blast-cast-20 0.7s; }
+
+.blast-cast:nth-child(21) {
+  height: 27px;
+  width: 27px;
+  transform: translate3d(130px, 71px, 94px);
+  background: #15f4ee;
+  animation: blast-cast-21 0.7s; }
+
+.blast-cast:nth-child(22) {
+  height: 14px;
+  width: 14px;
+  transform: translate3d(117px, 6px, 21px);
+  background: #15f4ee;
+  animation: blast-cast-22 0.7s; }
+
+.blast-cast:nth-child(23) {
+  height: 16px;
+  width: 16px;
+  transform: translate3d(39px, 165px, 116px);
+  background: #15f4ee;
+  animation: blast-cast-23 0.7s; }
+
+.blast-cast:nth-child(24) {
+  height: 30px;
+  width: 30px;
+  transform: translate3d(155px, 67px, 168px);
+  background: #15f4ee;
+  animation: blast-cast-24 0.7s; }
+
+.blast-cast:nth-child(25) {
+  height: 24px;
+  width: 24px;
+  transform: translate3d(181px, 137px, 65px);
+  background: #15f4ee;
+  animation: blast-cast-25 0.7s; }
+
+.blast-cast:nth-child(26) {
+  height: 13px;
+  width: 13px;
+  transform: translate3d(180px, 39px, 125px);
+  background: #15f4ee;
+  animation: blast-cast-26 0.7s; }
+
+.blast-cast:nth-child(27) {
+  height: 24px;
+  width: 24px;
+  transform: translate3d(98px, 199px, 120px);
+  background: #15f4ee;
+  animation: blast-cast-27 0.7s; }
+
+.blast-cast:nth-child(28) {
+  height: 14px;
+  width: 14px;
+  transform: translate3d(63px, 82px, 153px);
+  background: #15f4ee;
+  animation: blast-cast-28 0.7s; }
+
+.blast-cast:nth-child(29) {
+  height: 18px;
+  width: 18px;
+  transform: translate3d(54px, 3px, 42px);
+  background: #15f4ee;
+  animation: blast-cast-29 0.7s; }
+
+.blast-cast:nth-child(30) {
+  height: 24px;
+  width: 24px;
+  transform: translate3d(184px, 94px, 117px);
+  background: #15f4ee;
+  animation: blast-cast-30 0.7s; }
+
+.blast-cast:nth-child(31) {
+  height: 21px;
+  width: 21px;
+  transform: translate3d(148px, 178px, 17px);
+  background: #15f4ee;
+  animation: blast-cast-31 0.7s; }
+
+.blast-cast:nth-child(32) {
+  height: 27px;
+  width: 27px;
+  transform: translate3d(67px, 24px, 172px);
+  background: #15f4ee;
+  animation: blast-cast-32 0.7s; }
+
+.blast-cast:nth-child(33) {
+  height: 3px;
+  width: 3px;
+  transform: translate3d(53px, 5px, 10px);
+  background: #15f4ee;
+  animation: blast-cast-33 0.7s; }
+
+.blast-cast:nth-child(34) {
+  height: 9px;
+  width: 9px;
+  transform: translate3d(29px, 68px, 98px);
+  background: #15f4ee;
+  animation: blast-cast-34 0.7s; }
+
+.blast-cast:nth-child(35) {
+  height: 10px;
+  width: 10px;
+  transform: translate3d(15px, 37px, 5px);
+  background: #15f4ee;
+  animation: blast-cast-35 0.7s; }
+
+.blast-cast:nth-child(36) {
+  height: 14px;
+  width: 14px;
+  transform: translate3d(1px, 144px, 161px);
+  background: #15f4ee;
+  animation: blast-cast-36 0.7s; }
+
+.blast-cast:nth-child(37) {
+  height: 28px;
+  width: 28px;
+  transform: translate3d(194px, 16px, 159px);
+  background: #15f4ee;
+  animation: blast-cast-37 0.7s; }
+
+.blast-cast:nth-child(38) {
+  height: 13px;
+  width: 13px;
+  transform: translate3d(191px, 174px, 171px);
+  background: #15f4ee;
+  animation: blast-cast-38 0.7s; }
+
+.blast-cast:nth-child(39) {
+  height: 7px;
+  width: 7px;
+  transform: translate3d(7px, 136px, 190px);
+  background: #15f4ee;
+  animation: blast-cast-39 0.7s; }
+
+.blast-cast:nth-child(40) {
+  height: 26px;
+  width: 26px;
+  transform: translate3d(23px, 8px, 62px);
+  background: #15f4ee;
+  animation: blast-cast-40 0.7s; }
+
+.blast-cast:nth-child(41) {
+  height: 29px;
+  width: 29px;
+  transform: translate3d(87px, 171px, 182px);
+  background: #15f4ee;
+  animation: blast-cast-41 0.7s; }
+
+.blast-cast:nth-child(42) {
+  height: 23px;
+  width: 23px;
+  transform: translate3d(100px, 103px, 80px);
+  background: #15f4ee;
+  animation: blast-cast-42 0.7s; }
+
+.blast-cast:nth-child(43) {
+  height: 25px;
+  width: 25px;
+  transform: translate3d(102px, 76px, 103px);
+  background: #15f4ee;
+  animation: blast-cast-43 0.7s; }
+
+.blast-cast:nth-child(44) {
+  height: 13px;
+  width: 13px;
+  transform: translate3d(92px, 45px, 172px);
+  background: #15f4ee;
+  animation: blast-cast-44 0.7s; }
+
+.blast-cast:nth-child(45) {
+  height: 15px;
+  width: 15px;
+  transform: translate3d(168px, 52px, 141px);
+  background: #15f4ee;
+  animation: blast-cast-45 0.7s; }
+
+.blast-cast:nth-child(46) {
+  height: 21px;
+  width: 21px;
+  transform: translate3d(117px, 7px, 113px);
+  background: #15f4ee;
+  animation: blast-cast-46 0.7s; }
+
+.blast-cast:nth-child(47) {
+  height: 22px;
+  width: 22px;
+  transform: translate3d(50px, 154px, 37px);
+  background: #15f4ee;
+  animation: blast-cast-47 0.7s; }
+
+.blast-cast:nth-child(48) {
+  height: 11px;
+  width: 11px;
+  transform: translate3d(14px, 86px, 161px);
+  background: #15f4ee;
+  animation: blast-cast-48 0.7s; }
+
+.blast-cast:nth-child(49) {
+  height: 12px;
+  width: 12px;
+  transform: translate3d(177px, 164px, 59px);
+  background: #15f4ee;
+  animation: blast-cast-49 0.7s; }
+
+.blast-cast:nth-child(50) {
+  height: 18px;
+  width: 18px;
+  transform: translate3d(28px, 1px, 12px);
+  background: #15f4ee;
+  animation: blast-cast-50 0.7s; }
+
+.blast-cast:nth-child(51) {
+  height: 25px;
+  width: 25px;
+  transform: translate3d(4px, 36px, 84px);
+  background: #15f4ee;
+  animation: blast-cast-51 0.7s; }
+
+.blast-cast:nth-child(52) {
+  height: 4px;
+  width: 4px;
+  transform: translate3d(78px, 88px, 199px);
+  background: #15f4ee;
+  animation: blast-cast-52 0.7s; }
+
+.blast-cast:nth-child(53) {
+  height: 18px;
+  width: 18px;
+  transform: translate3d(194px, 153px, 186px);
+  background: #15f4ee;
+  animation: blast-cast-53 0.7s; }
+
+.blast-cast:nth-child(54) {
+  height: 5px;
+  width: 5px;
+  transform: translate3d(69px, 200px, 118px);
+  background: #15f4ee;
+  animation: blast-cast-54 0.7s; }
+
+.blast-cast:nth-child(55) {
+  height: 13px;
+  width: 13px;
+  transform: translate3d(199px, 153px, 132px);
+  background: #15f4ee;
+  animation: blast-cast-55 0.7s; }
+
+.blast-cast:nth-child(56) {
+  height: 16px;
+  width: 16px;
+  transform: translate3d(152px, 96px, 116px);
+  background: #15f4ee;
+  animation: blast-cast-56 0.7s; }
+
+.blast-cast:nth-child(57) {
+  height: 12px;
+  width: 12px;
+  transform: translate3d(179px, 45px, 162px);
+  background: #15f4ee;
+  animation: blast-cast-57 0.7s; }
+
+.blast-cast:nth-child(58) {
+  height: 9px;
+  width: 9px;
+  transform: translate3d(8px, 6px, 187px);
+  background: #15f4ee;
+  animation: blast-cast-58 0.7s; }
+
+.blast-cast:nth-child(59) {
+  height: 18px;
+  width: 18px;
+  transform: translate3d(84px, 43px, 89px);
+  background: #15f4ee;
+  animation: blast-cast-59 0.7s; }
+
+.blast-cast:nth-child(60) {
+  height: 27px;
+  width: 27px;
+  transform: translate3d(167px, 200px, 144px);
+  background: #15f4ee;
+  animation: blast-cast-60 0.7s; }
+
+.blast-cast:nth-child(61) {
+  height: 4px;
+  width: 4px;
+  transform: translate3d(113px, 93px, 2px);
+  background: #15f4ee;
+  animation: blast-cast-61 0.7s; }
+
+.blast-cast:nth-child(62) {
+  height: 17px;
+  width: 17px;
+  transform: translate3d(2px, 94px, 188px);
+  background: #15f4ee;
+  animation: blast-cast-62 0.7s; }
+
+.blast-cast:nth-child(63) {
+  height: 17px;
+  width: 17px;
+  transform: translate3d(33px, 169px, 100px);
+  background: #15f4ee;
+  animation: blast-cast-63 0.7s; }
+
+.blast-cast:nth-child(64) {
+  height: 19px;
+  width: 19px;
+  transform: translate3d(52px, 127px, 6px);
+  background: #15f4ee;
+  animation: blast-cast-64 0.7s; }
+
+.blast-cast:nth-child(65) {
+  height: 22px;
+  width: 22px;
+  transform: translate3d(22px, 68px, 134px);
+  background: #15f4ee;
+  animation: blast-cast-65 0.7s; }
+
+.blast-cast:nth-child(66) {
+  height: 27px;
+  width: 27px;
+  transform: translate3d(157px, 2px, 42px);
+  background: #15f4ee;
+  animation: blast-cast-66 0.7s; }
+
+.blast-cast:nth-child(67) {
+  height: 30px;
+  width: 30px;
+  transform: translate3d(200px, 128px, 72px);
+  background: #15f4ee;
+  animation: blast-cast-67 0.7s; }
+
+.blast-cast:nth-child(68) {
+  height: 1px;
+  width: 1px;
+  transform: translate3d(23px, 54px, 2px);
+  background: #15f4ee;
+  animation: blast-cast-68 0.7s; }
+
+.blast-cast:nth-child(69) {
+  height: 25px;
+  width: 25px;
+  transform: translate3d(43px, 156px, 198px);
+  background: #15f4ee;
+  animation: blast-cast-69 0.7s; }
+
+.blast-cast:nth-child(70) {
+  height: 28px;
+  width: 28px;
+  transform: translate3d(62px, 2px, 158px);
+  background: #15f4ee;
+  animation: blast-cast-70 0.7s; }
+
+.blast-cast:nth-child(71) {
+  height: 1px;
+  width: 1px;
+  transform: translate3d(42px, 114px, 197px);
+  background: #15f4ee;
+  animation: blast-cast-71 0.7s; }
+
+.blast-cast:nth-child(72) {
+  height: 27px;
+  width: 27px;
+  transform: translate3d(82px, 105px, 175px);
+  background: #15f4ee;
+  animation: blast-cast-72 0.7s; }
+
+.blast-cast:nth-child(73) {
+  height: 17px;
+  width: 17px;
+  transform: translate3d(174px, 46px, 149px);
+  background: #15f4ee;
+  animation: blast-cast-73 0.7s; }
+
+.blast-cast:nth-child(74) {
+  height: 12px;
+  width: 12px;
+  transform: translate3d(160px, 103px, 141px);
+  background: #15f4ee;
+  animation: blast-cast-74 0.7s; }
+
+.blast-cast:nth-child(75) {
+  height: 27px;
+  width: 27px;
+  transform: translate3d(101px, 76px, 68px);
+  background: #15f4ee;
+  animation: blast-cast-75 0.7s; }
+
+.blast-cast:nth-child(76) {
+  height: 18px;
+  width: 18px;
+  transform: translate3d(186px, 199px, 80px);
+  background: #15f4ee;
+  animation: blast-cast-76 0.7s; }
+
+.blast-cast:nth-child(77) {
+  height: 27px;
+  width: 27px;
+  transform: translate3d(116px, 17px, 31px);
+  background: #15f4ee;
+  animation: blast-cast-77 0.7s; }
+
+.blast-cast:nth-child(78) {
+  height: 23px;
+  width: 23px;
+  transform: translate3d(52px, 80px, 130px);
+  background: #15f4ee;
+  animation: blast-cast-78 0.7s; }
+
+.blast-cast:nth-child(79) {
+  height: 13px;
+  width: 13px;
+  transform: translate3d(162px, 150px, 129px);
+  background: #15f4ee;
+  animation: blast-cast-79 0.7s; }
+
+.blast-cast:nth-child(80) {
+  height: 24px;
+  width: 24px;
+  transform: translate3d(144px, 57px, 55px);
+  background: #15f4ee;
+  animation: blast-cast-80 0.7s; }
+
+.blast-cast:nth-child(81) {
+  height: 3px;
+  width: 3px;
+  transform: translate3d(77px, 59px, 63px);
+  background: #15f4ee;
+  animation: blast-cast-81 0.7s; }
+
+.blast-cast:nth-child(82) {
+  height: 2px;
+  width: 2px;
+  transform: translate3d(79px, 89px, 72px);
+  background: #15f4ee;
+  animation: blast-cast-82 0.7s; }
+
+.blast-cast:nth-child(83) {
+  height: 7px;
+  width: 7px;
+  transform: translate3d(44px, 46px, 134px);
+  background: #15f4ee;
+  animation: blast-cast-83 0.7s; }
+
+.blast-cast:nth-child(84) {
+  height: 1px;
+  width: 1px;
+  transform: translate3d(127px, 31px, 110px);
+  background: #15f4ee;
+  animation: blast-cast-84 0.7s; }
+
+.blast-cast:nth-child(85) {
+  height: 26px;
+  width: 26px;
+  transform: translate3d(164px, 181px, 170px);
+  background: #15f4ee;
+  animation: blast-cast-85 0.7s; }
+
+.blast-cast:nth-child(86) {
+  height: 10px;
+  width: 10px;
+  transform: translate3d(54px, 42px, 176px);
+  background: #15f4ee;
+  animation: blast-cast-86 0.7s; }
+
+.blast-cast:nth-child(87) {
+  height: 8px;
+  width: 8px;
+  transform: translate3d(61px, 59px, 43px);
+  background: #15f4ee;
+  animation: blast-cast-87 0.7s; }
+
+.blast-cast:nth-child(88) {
+  height: 2px;
+  width: 2px;
+  transform: translate3d(177px, 17px, 151px);
+  background: #15f4ee;
+  animation: blast-cast-88 0.7s; }
+
+.blast-cast:nth-child(89) {
+  height: 24px;
+  width: 24px;
+  transform: translate3d(10px, 47px, 45px);
+  background: #15f4ee;
+  animation: blast-cast-89 0.7s; }
+
+.blast-cast:nth-child(90) {
+  height: 30px;
+  width: 30px;
+  transform: translate3d(175px, 147px, 8px);
+  background: #15f4ee;
+  animation: blast-cast-90 0.7s; }
+
+.blast-cast:nth-child(91) {
+  height: 5px;
+  width: 5px;
+  transform: translate3d(102px, 19px, 195px);
+  background: #15f4ee;
+  animation: blast-cast-91 0.7s; }
+
+.blast-cast:nth-child(92) {
+  height: 10px;
+  width: 10px;
+  transform: translate3d(14px, 136px, 21px);
+  background: #15f4ee;
+  animation: blast-cast-92 0.7s; }
+
+.blast-cast:nth-child(93) {
+  height: 4px;
+  width: 4px;
+  transform: translate3d(5px, 75px, 4px);
+  background: #15f4ee;
+  animation: blast-cast-93 0.7s; }
+
+.blast-cast:nth-child(94) {
+  height: 3px;
+  width: 3px;
+  transform: translate3d(24px, 4px, 41px);
+  background: #15f4ee;
+  animation: blast-cast-94 0.7s; }
+
+.blast-cast:nth-child(95) {
+  height: 6px;
+  width: 6px;
+  transform: translate3d(94px, 60px, 12px);
+  background: #15f4ee;
+  animation: blast-cast-95 0.7s; }
+
+.blast-cast:nth-child(96) {
+  height: 27px;
+  width: 27px;
+  transform: translate3d(30px, 70px, 158px);
+  background: #15f4ee;
+  animation: blast-cast-96 0.7s; }
+
+.blast-cast:nth-child(97) {
+  height: 20px;
+  width: 20px;
+  transform: translate3d(195px, 160px, 8px);
+  background: #15f4ee;
+  animation: blast-cast-97 0.7s; }
+
+.blast-cast:nth-child(98) {
+  height: 4px;
+  width: 4px;
+  transform: translate3d(149px, 41px, 92px);
+  background: #15f4ee;
+  animation: blast-cast-98 0.7s; }
+
+.blast-cast:nth-child(99) {
+  height: 9px;
+  width: 9px;
+  transform: translate3d(6px, 64px, 152px);
+  background: #15f4ee;
+  animation: blast-cast-99 0.7s; }
+
+.blast-cast:nth-child(100) {
+  height: 30px;
+  width: 30px;
+  transform: translate3d(84px, 129px, 147px);
+  background: #15f4ee;
+  animation: blast-cast-100 0.7s; }
+
+.blast-hit {
+  position: absolute;
+  background: black;
+  opacity: .7;
+  border-radius: 50%; }
+
+@keyframes blast-hit-1 {
+  100% {
+    transform: translate3d(194px, 21px, 15px); } }
+
+@keyframes blast-hit-2 {
+  100% {
+    transform: translate3d(59px, 59px, 125px); } }
+
+@keyframes blast-hit-3 {
+  100% {
+    transform: translate3d(98px, 112px, 36px); } }
+
+@keyframes blast-hit-4 {
+  100% {
+    transform: translate3d(53px, 187px, 105px); } }
+
+@keyframes blast-hit-5 {
+  100% {
+    transform: translate3d(53px, 5px, 174px); } }
+
+@keyframes blast-hit-6 {
+  100% {
+    transform: translate3d(52px, 47px, 4px); } }
+
+@keyframes blast-hit-7 {
+  100% {
+    transform: translate3d(29px, 44px, 161px); } }
+
+@keyframes blast-hit-8 {
+  100% {
+    transform: translate3d(192px, 123px, 192px); } }
+
+@keyframes blast-hit-9 {
+  100% {
+    transform: translate3d(172px, 173px, 36px); } }
+
+@keyframes blast-hit-10 {
+  100% {
+    transform: translate3d(200px, 16px, 169px); } }
+
+@keyframes blast-hit-11 {
+  100% {
+    transform: translate3d(85px, 102px, 131px); } }
+
+@keyframes blast-hit-12 {
+  100% {
+    transform: translate3d(26px, 40px, 192px); } }
+
+@keyframes blast-hit-13 {
+  100% {
+    transform: translate3d(40px, 186px, 81px); } }
+
+@keyframes blast-hit-14 {
+  100% {
+    transform: translate3d(122px, 166px, 80px); } }
+
+@keyframes blast-hit-15 {
+  100% {
+    transform: translate3d(198px, 58px, 76px); } }
+
+@keyframes blast-hit-16 {
+  100% {
+    transform: translate3d(152px, 78px, 121px); } }
+
+@keyframes blast-hit-17 {
+  100% {
+    transform: translate3d(97px, 138px, 80px); } }
+
+@keyframes blast-hit-18 {
+  100% {
+    transform: translate3d(78px, 48px, 122px); } }
+
+@keyframes blast-hit-19 {
+  100% {
+    transform: translate3d(122px, 49px, 199px); } }
+
+@keyframes blast-hit-20 {
+  100% {
+    transform: translate3d(177px, 103px, 31px); } }
+
+@keyframes blast-hit-21 {
+  100% {
+    transform: translate3d(52px, 136px, 194px); } }
+
+@keyframes blast-hit-22 {
+  100% {
+    transform: translate3d(34px, 30px, 116px); } }
+
+@keyframes blast-hit-23 {
+  100% {
+    transform: translate3d(127px, 174px, 110px); } }
+
+@keyframes blast-hit-24 {
+  100% {
+    transform: translate3d(183px, 111px, 53px); } }
+
+@keyframes blast-hit-25 {
+  100% {
+    transform: translate3d(120px, 102px, 139px); } }
+
+@keyframes blast-hit-26 {
+  100% {
+    transform: translate3d(126px, 137px, 148px); } }
+
+@keyframes blast-hit-27 {
+  100% {
+    transform: translate3d(164px, 2px, 67px); } }
+
+@keyframes blast-hit-28 {
+  100% {
+    transform: translate3d(41px, 77px, 7px); } }
+
+@keyframes blast-hit-29 {
+  100% {
+    transform: translate3d(77px, 112px, 56px); } }
+
+@keyframes blast-hit-30 {
+  100% {
+    transform: translate3d(14px, 114px, 28px); } }
+
+@keyframes blast-hit-31 {
+  100% {
+    transform: translate3d(66px, 39px, 141px); } }
+
+@keyframes blast-hit-32 {
+  100% {
+    transform: translate3d(34px, 64px, 143px); } }
+
+@keyframes blast-hit-33 {
+  100% {
+    transform: translate3d(101px, 137px, 127px); } }
+
+@keyframes blast-hit-34 {
+  100% {
+    transform: translate3d(171px, 140px, 29px); } }
+
+@keyframes blast-hit-35 {
+  100% {
+    transform: translate3d(64px, 150px, 20px); } }
+
+@keyframes blast-hit-36 {
+  100% {
+    transform: translate3d(76px, 58px, 114px); } }
+
+@keyframes blast-hit-37 {
+  100% {
+    transform: translate3d(68px, 105px, 44px); } }
+
+@keyframes blast-hit-38 {
+  100% {
+    transform: translate3d(32px, 6px, 140px); } }
+
+@keyframes blast-hit-39 {
+  100% {
+    transform: translate3d(127px, 88px, 41px); } }
+
+@keyframes blast-hit-40 {
+  100% {
+    transform: translate3d(156px, 91px, 4px); } }
+
+@keyframes blast-hit-41 {
+  100% {
+    transform: translate3d(89px, 3px, 70px); } }
+
+@keyframes blast-hit-42 {
+  100% {
+    transform: translate3d(105px, 51px, 146px); } }
+
+@keyframes blast-hit-43 {
+  100% {
+    transform: translate3d(171px, 141px, 151px); } }
+
+@keyframes blast-hit-44 {
+  100% {
+    transform: translate3d(73px, 155px, 195px); } }
+
+@keyframes blast-hit-45 {
+  100% {
+    transform: translate3d(50px, 123px, 161px); } }
+
+@keyframes blast-hit-46 {
+  100% {
+    transform: translate3d(149px, 59px, 81px); } }
+
+@keyframes blast-hit-47 {
+  100% {
+    transform: translate3d(6px, 24px, 194px); } }
+
+@keyframes blast-hit-48 {
+  100% {
+    transform: translate3d(93px, 109px, 25px); } }
+
+@keyframes blast-hit-49 {
+  100% {
+    transform: translate3d(32px, 73px, 153px); } }
+
+@keyframes blast-hit-50 {
+  100% {
+    transform: translate3d(81px, 186px, 114px); } }
+
+@keyframes blast-hit-51 {
+  100% {
+    transform: translate3d(109px, 124px, 130px); } }
+
+@keyframes blast-hit-52 {
+  100% {
+    transform: translate3d(179px, 35px, 30px); } }
+
+@keyframes blast-hit-53 {
+  100% {
+    transform: translate3d(156px, 160px, 92px); } }
+
+@keyframes blast-hit-54 {
+  100% {
+    transform: translate3d(1px, 28px, 21px); } }
+
+@keyframes blast-hit-55 {
+  100% {
+    transform: translate3d(13px, 55px, 183px); } }
+
+@keyframes blast-hit-56 {
+  100% {
+    transform: translate3d(71px, 71px, 36px); } }
+
+@keyframes blast-hit-57 {
+  100% {
+    transform: translate3d(125px, 76px, 4px); } }
+
+@keyframes blast-hit-58 {
+  100% {
+    transform: translate3d(9px, 116px, 162px); } }
+
+@keyframes blast-hit-59 {
+  100% {
+    transform: translate3d(166px, 70px, 36px); } }
+
+@keyframes blast-hit-60 {
+  100% {
+    transform: translate3d(190px, 47px, 113px); } }
+
+@keyframes blast-hit-61 {
+  100% {
+    transform: translate3d(14px, 29px, 110px); } }
+
+@keyframes blast-hit-62 {
+  100% {
+    transform: translate3d(16px, 61px, 154px); } }
+
+@keyframes blast-hit-63 {
+  100% {
+    transform: translate3d(107px, 94px, 177px); } }
+
+@keyframes blast-hit-64 {
+  100% {
+    transform: translate3d(116px, 196px, 141px); } }
+
+@keyframes blast-hit-65 {
+  100% {
+    transform: translate3d(79px, 95px, 172px); } }
+
+@keyframes blast-hit-66 {
+  100% {
+    transform: translate3d(64px, 9px, 157px); } }
+
+@keyframes blast-hit-67 {
+  100% {
+    transform: translate3d(43px, 32px, 7px); } }
+
+@keyframes blast-hit-68 {
+  100% {
+    transform: translate3d(194px, 70px, 37px); } }
+
+@keyframes blast-hit-69 {
+  100% {
+    transform: translate3d(18px, 131px, 110px); } }
+
+@keyframes blast-hit-70 {
+  100% {
+    transform: translate3d(183px, 34px, 137px); } }
+
+@keyframes blast-hit-71 {
+  100% {
+    transform: translate3d(104px, 193px, 137px); } }
+
+@keyframes blast-hit-72 {
+  100% {
+    transform: translate3d(168px, 106px, 74px); } }
+
+@keyframes blast-hit-73 {
+  100% {
+    transform: translate3d(84px, 127px, 76px); } }
+
+@keyframes blast-hit-74 {
+  100% {
+    transform: translate3d(172px, 155px, 32px); } }
+
+@keyframes blast-hit-75 {
+  100% {
+    transform: translate3d(17px, 65px, 19px); } }
+
+@keyframes blast-hit-76 {
+  100% {
+    transform: translate3d(44px, 155px, 193px); } }
+
+@keyframes blast-hit-77 {
+  100% {
+    transform: translate3d(164px, 84px, 12px); } }
+
+@keyframes blast-hit-78 {
+  100% {
+    transform: translate3d(77px, 157px, 190px); } }
+
+@keyframes blast-hit-79 {
+  100% {
+    transform: translate3d(35px, 150px, 154px); } }
+
+@keyframes blast-hit-80 {
+  100% {
+    transform: translate3d(117px, 66px, 77px); } }
+
+@keyframes blast-hit-81 {
+  100% {
+    transform: translate3d(6px, 91px, 1px); } }
+
+@keyframes blast-hit-82 {
+  100% {
+    transform: translate3d(160px, 145px, 17px); } }
+
+@keyframes blast-hit-83 {
+  100% {
+    transform: translate3d(180px, 171px, 74px); } }
+
+@keyframes blast-hit-84 {
+  100% {
+    transform: translate3d(21px, 174px, 69px); } }
+
+@keyframes blast-hit-85 {
+  100% {
+    transform: translate3d(84px, 14px, 157px); } }
+
+@keyframes blast-hit-86 {
+  100% {
+    transform: translate3d(48px, 60px, 40px); } }
+
+@keyframes blast-hit-87 {
+  100% {
+    transform: translate3d(90px, 42px, 25px); } }
+
+@keyframes blast-hit-88 {
+  100% {
+    transform: translate3d(95px, 46px, 35px); } }
+
+@keyframes blast-hit-89 {
+  100% {
+    transform: translate3d(38px, 177px, 45px); } }
+
+@keyframes blast-hit-90 {
+  100% {
+    transform: translate3d(197px, 23px, 162px); } }
+
+@keyframes blast-hit-91 {
+  100% {
+    transform: translate3d(79px, 32px, 196px); } }
+
+@keyframes blast-hit-92 {
+  100% {
+    transform: translate3d(108px, 86px, 153px); } }
+
+@keyframes blast-hit-93 {
+  100% {
+    transform: translate3d(3px, 9px, 165px); } }
+
+@keyframes blast-hit-94 {
+  100% {
+    transform: translate3d(161px, 73px, 131px); } }
+
+@keyframes blast-hit-95 {
+  100% {
+    transform: translate3d(186px, 28px, 119px); } }
+
+@keyframes blast-hit-96 {
+  100% {
+    transform: translate3d(180px, 80px, 119px); } }
+
+@keyframes blast-hit-97 {
+  100% {
+    transform: translate3d(98px, 36px, 136px); } }
+
+@keyframes blast-hit-98 {
+  100% {
+    transform: translate3d(186px, 62px, 69px); } }
+
+@keyframes blast-hit-99 {
+  100% {
+    transform: translate3d(103px, 135px, 124px); } }
+
+@keyframes blast-hit-100 {
+  100% {
+    transform: translate3d(8px, 38px, 144px); } }
+
+.blast-hit:nth-child(1) {
+  height: 11px;
+  width: 11px;
+  transform: translate3d(-2.7em, 0, 0);
+  animation: blast-hit-1 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(2) {
+  height: 19px;
+  width: 19px;
+  transform: translate3d(-2.455em, 0, 0);
+  animation: blast-hit-2 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(3) {
+  height: 29px;
+  width: 29px;
+  transform: translate3d(-2.575em, 0, 0);
+  animation: blast-hit-3 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(4) {
+  height: 5px;
+  width: 5px;
+  transform: translate3d(-2.645em, 0, 0);
+  animation: blast-hit-4 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(5) {
+  height: 21px;
+  width: 21px;
+  transform: translate3d(-2.29em, 0, 0);
+  animation: blast-hit-5 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(6) {
+  height: 25px;
+  width: 25px;
+  transform: translate3d(-2.38em, 0, 0);
+  animation: blast-hit-6 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(7) {
+  height: 2px;
+  width: 2px;
+  transform: translate3d(-2.14em, 0, 0);
+  animation: blast-hit-7 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(8) {
+  height: 4px;
+  width: 4px;
+  transform: translate3d(-2.12em, 0, 0);
+  animation: blast-hit-8 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(9) {
+  height: 29px;
+  width: 29px;
+  transform: translate3d(-2.68em, 0, 0);
+  animation: blast-hit-9 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(10) {
+  height: 30px;
+  width: 30px;
+  transform: translate3d(-2.81em, 0, 0);
+  animation: blast-hit-10 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(11) {
+  height: 6px;
+  width: 6px;
+  transform: translate3d(-2.48em, 0, 0);
+  animation: blast-hit-11 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(12) {
+  height: 4px;
+  width: 4px;
+  transform: translate3d(-2.74em, 0, 0);
+  animation: blast-hit-12 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(13) {
+  height: 20px;
+  width: 20px;
+  transform: translate3d(-2.76em, 0, 0);
+  animation: blast-hit-13 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(14) {
+  height: 4px;
+  width: 4px;
+  transform: translate3d(-2.885em, 0, 0);
+  animation: blast-hit-14 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(15) {
+  height: 12px;
+  width: 12px;
+  transform: translate3d(-2.325em, 0, 0);
+  animation: blast-hit-15 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(16) {
+  height: 20px;
+  width: 20px;
+  transform: translate3d(-2.8em, 0, 0);
+  animation: blast-hit-16 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(17) {
+  height: 14px;
+  width: 14px;
+  transform: translate3d(-2.02em, 0, 0);
+  animation: blast-hit-17 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(18) {
+  height: 8px;
+  width: 8px;
+  transform: translate3d(-2.965em, 0, 0);
+  animation: blast-hit-18 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(19) {
+  height: 18px;
+  width: 18px;
+  transform: translate3d(-2.975em, 0, 0);
+  animation: blast-hit-19 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(20) {
+  height: 7px;
+  width: 7px;
+  transform: translate3d(-2.455em, 0, 0);
+  animation: blast-hit-20 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(21) {
+  height: 24px;
+  width: 24px;
+  transform: translate3d(-2.69em, 0, 0);
+  animation: blast-hit-21 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(22) {
+  height: 18px;
+  width: 18px;
+  transform: translate3d(-2.535em, 0, 0);
+  animation: blast-hit-22 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(23) {
+  height: 16px;
+  width: 16px;
+  transform: translate3d(-2.925em, 0, 0);
+  animation: blast-hit-23 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(24) {
+  height: 9px;
+  width: 9px;
+  transform: translate3d(-2.835em, 0, 0);
+  animation: blast-hit-24 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(25) {
+  height: 8px;
+  width: 8px;
+  transform: translate3d(-2.5em, 0, 0);
+  animation: blast-hit-25 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(26) {
+  height: 13px;
+  width: 13px;
+  transform: translate3d(-2.095em, 0, 0);
+  animation: blast-hit-26 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(27) {
+  height: 28px;
+  width: 28px;
+  transform: translate3d(-2.86em, 0, 0);
+  animation: blast-hit-27 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(28) {
+  height: 28px;
+  width: 28px;
+  transform: translate3d(-2.095em, 0, 0);
+  animation: blast-hit-28 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(29) {
+  height: 18px;
+  width: 18px;
+  transform: translate3d(-2.155em, 0, 0);
+  animation: blast-hit-29 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(30) {
+  height: 22px;
+  width: 22px;
+  transform: translate3d(-2.81em, 0, 0);
+  animation: blast-hit-30 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(31) {
+  height: 17px;
+  width: 17px;
+  transform: translate3d(-2.5em, 0, 0);
+  animation: blast-hit-31 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(32) {
+  height: 23px;
+  width: 23px;
+  transform: translate3d(-2.725em, 0, 0);
+  animation: blast-hit-32 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(33) {
+  height: 24px;
+  width: 24px;
+  transform: translate3d(-2.255em, 0, 0);
+  animation: blast-hit-33 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(34) {
+  height: 4px;
+  width: 4px;
+  transform: translate3d(-2.285em, 0, 0);
+  animation: blast-hit-34 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(35) {
+  height: 14px;
+  width: 14px;
+  transform: translate3d(-2.985em, 0, 0);
+  animation: blast-hit-35 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(36) {
+  height: 3px;
+  width: 3px;
+  transform: translate3d(-2.65em, 0, 0);
+  animation: blast-hit-36 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(37) {
+  height: 11px;
+  width: 11px;
+  transform: translate3d(-2.405em, 0, 0);
+  animation: blast-hit-37 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(38) {
+  height: 3px;
+  width: 3px;
+  transform: translate3d(-2.46em, 0, 0);
+  animation: blast-hit-38 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(39) {
+  height: 3px;
+  width: 3px;
+  transform: translate3d(-2.11em, 0, 0);
+  animation: blast-hit-39 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(40) {
+  height: 29px;
+  width: 29px;
+  transform: translate3d(-2.18em, 0, 0);
+  animation: blast-hit-40 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(41) {
+  height: 1px;
+  width: 1px;
+  transform: translate3d(-2.7em, 0, 0);
+  animation: blast-hit-41 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(42) {
+  height: 4px;
+  width: 4px;
+  transform: translate3d(-2.6em, 0, 0);
+  animation: blast-hit-42 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(43) {
+  height: 12px;
+  width: 12px;
+  transform: translate3d(-2.69em, 0, 0);
+  animation: blast-hit-43 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(44) {
+  height: 8px;
+  width: 8px;
+  transform: translate3d(-2.655em, 0, 0);
+  animation: blast-hit-44 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(45) {
+  height: 14px;
+  width: 14px;
+  transform: translate3d(-2.965em, 0, 0);
+  animation: blast-hit-45 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(46) {
+  height: 21px;
+  width: 21px;
+  transform: translate3d(-2.93em, 0, 0);
+  animation: blast-hit-46 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(47) {
+  height: 3px;
+  width: 3px;
+  transform: translate3d(-2.31em, 0, 0);
+  animation: blast-hit-47 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(48) {
+  height: 29px;
+  width: 29px;
+  transform: translate3d(-2.17em, 0, 0);
+  animation: blast-hit-48 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(49) {
+  height: 13px;
+  width: 13px;
+  transform: translate3d(-2.545em, 0, 0);
+  animation: blast-hit-49 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(50) {
+  height: 7px;
+  width: 7px;
+  transform: translate3d(-2.705em, 0, 0);
+  animation: blast-hit-50 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(51) {
+  height: 23px;
+  width: 23px;
+  transform: translate3d(-2.915em, 0, 0);
+  animation: blast-hit-51 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(52) {
+  height: 15px;
+  width: 15px;
+  transform: translate3d(-2.77em, 0, 0);
+  animation: blast-hit-52 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(53) {
+  height: 26px;
+  width: 26px;
+  transform: translate3d(-2.695em, 0, 0);
+  animation: blast-hit-53 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(54) {
+  height: 7px;
+  width: 7px;
+  transform: translate3d(-2.155em, 0, 0);
+  animation: blast-hit-54 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(55) {
+  height: 16px;
+  width: 16px;
+  transform: translate3d(-2.17em, 0, 0);
+  animation: blast-hit-55 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(56) {
+  height: 28px;
+  width: 28px;
+  transform: translate3d(-2.235em, 0, 0);
+  animation: blast-hit-56 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(57) {
+  height: 19px;
+  width: 19px;
+  transform: translate3d(-2.085em, 0, 0);
+  animation: blast-hit-57 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(58) {
+  height: 25px;
+  width: 25px;
+  transform: translate3d(-2.025em, 0, 0);
+  animation: blast-hit-58 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(59) {
+  height: 16px;
+  width: 16px;
+  transform: translate3d(-2.46em, 0, 0);
+  animation: blast-hit-59 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(60) {
+  height: 24px;
+  width: 24px;
+  transform: translate3d(-2.33em, 0, 0);
+  animation: blast-hit-60 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(61) {
+  height: 3px;
+  width: 3px;
+  transform: translate3d(-2.83em, 0, 0);
+  animation: blast-hit-61 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(62) {
+  height: 14px;
+  width: 14px;
+  transform: translate3d(-2.73em, 0, 0);
+  animation: blast-hit-62 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(63) {
+  height: 23px;
+  width: 23px;
+  transform: translate3d(-2.265em, 0, 0);
+  animation: blast-hit-63 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(64) {
+  height: 26px;
+  width: 26px;
+  transform: translate3d(-2.815em, 0, 0);
+  animation: blast-hit-64 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(65) {
+  height: 3px;
+  width: 3px;
+  transform: translate3d(-2.555em, 0, 0);
+  animation: blast-hit-65 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(66) {
+  height: 27px;
+  width: 27px;
+  transform: translate3d(-2.23em, 0, 0);
+  animation: blast-hit-66 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(67) {
+  height: 2px;
+  width: 2px;
+  transform: translate3d(-2.22em, 0, 0);
+  animation: blast-hit-67 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(68) {
+  height: 20px;
+  width: 20px;
+  transform: translate3d(-2.215em, 0, 0);
+  animation: blast-hit-68 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(69) {
+  height: 7px;
+  width: 7px;
+  transform: translate3d(-2.17em, 0, 0);
+  animation: blast-hit-69 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(70) {
+  height: 7px;
+  width: 7px;
+  transform: translate3d(-2.96em, 0, 0);
+  animation: blast-hit-70 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(71) {
+  height: 2px;
+  width: 2px;
+  transform: translate3d(-2.885em, 0, 0);
+  animation: blast-hit-71 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(72) {
+  height: 23px;
+  width: 23px;
+  transform: translate3d(-2.49em, 0, 0);
+  animation: blast-hit-72 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(73) {
+  height: 17px;
+  width: 17px;
+  transform: translate3d(-2.575em, 0, 0);
+  animation: blast-hit-73 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(74) {
+  height: 18px;
+  width: 18px;
+  transform: translate3d(-2.81em, 0, 0);
+  animation: blast-hit-74 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(75) {
+  height: 24px;
+  width: 24px;
+  transform: translate3d(-2.95em, 0, 0);
+  animation: blast-hit-75 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(76) {
+  height: 23px;
+  width: 23px;
+  transform: translate3d(-2.62em, 0, 0);
+  animation: blast-hit-76 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(77) {
+  height: 23px;
+  width: 23px;
+  transform: translate3d(-2.6em, 0, 0);
+  animation: blast-hit-77 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(78) {
+  height: 4px;
+  width: 4px;
+  transform: translate3d(-2.77em, 0, 0);
+  animation: blast-hit-78 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(79) {
+  height: 25px;
+  width: 25px;
+  transform: translate3d(-2.75em, 0, 0);
+  animation: blast-hit-79 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(80) {
+  height: 28px;
+  width: 28px;
+  transform: translate3d(-2.23em, 0, 0);
+  animation: blast-hit-80 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(81) {
+  height: 20px;
+  width: 20px;
+  transform: translate3d(-2.21em, 0, 0);
+  animation: blast-hit-81 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(82) {
+  height: 14px;
+  width: 14px;
+  transform: translate3d(-2.375em, 0, 0);
+  animation: blast-hit-82 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(83) {
+  height: 11px;
+  width: 11px;
+  transform: translate3d(-2.035em, 0, 0);
+  animation: blast-hit-83 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(84) {
+  height: 6px;
+  width: 6px;
+  transform: translate3d(-2.48em, 0, 0);
+  animation: blast-hit-84 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(85) {
+  height: 8px;
+  width: 8px;
+  transform: translate3d(-2.16em, 0, 0);
+  animation: blast-hit-85 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(86) {
+  height: 10px;
+  width: 10px;
+  transform: translate3d(-2.18em, 0, 0);
+  animation: blast-hit-86 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(87) {
+  height: 30px;
+  width: 30px;
+  transform: translate3d(-2.55em, 0, 0);
+  animation: blast-hit-87 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(88) {
+  height: 1px;
+  width: 1px;
+  transform: translate3d(-2.945em, 0, 0);
+  animation: blast-hit-88 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(89) {
+  height: 15px;
+  width: 15px;
+  transform: translate3d(-2.675em, 0, 0);
+  animation: blast-hit-89 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(90) {
+  height: 5px;
+  width: 5px;
+  transform: translate3d(-2.73em, 0, 0);
+  animation: blast-hit-90 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(91) {
+  height: 13px;
+  width: 13px;
+  transform: translate3d(-2.26em, 0, 0);
+  animation: blast-hit-91 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(92) {
+  height: 17px;
+  width: 17px;
+  transform: translate3d(-2.385em, 0, 0);
+  animation: blast-hit-92 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(93) {
+  height: 17px;
+  width: 17px;
+  transform: translate3d(-2.135em, 0, 0);
+  animation: blast-hit-93 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(94) {
+  height: 6px;
+  width: 6px;
+  transform: translate3d(-2.295em, 0, 0);
+  animation: blast-hit-94 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(95) {
+  height: 1px;
+  width: 1px;
+  transform: translate3d(-2.865em, 0, 0);
+  animation: blast-hit-95 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(96) {
+  height: 9px;
+  width: 9px;
+  transform: translate3d(-2.65em, 0, 0);
+  animation: blast-hit-96 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(97) {
+  height: 3px;
+  width: 3px;
+  transform: translate3d(-2.91em, 0, 0);
+  animation: blast-hit-97 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(98) {
+  height: 17px;
+  width: 17px;
+  transform: translate3d(-2.56em, 0, 0);
+  animation: blast-hit-98 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(99) {
+  height: 25px;
+  width: 25px;
+  transform: translate3d(-2.81em, 0, 0);
+  animation: blast-hit-99 0.7s infinite;
+  background: #15f4ee; }
+
+.blast-hit:nth-child(100) {
+  height: 19px;
+  width: 19px;
+  transform: translate3d(-2.69em, 0, 0);
+  animation: blast-hit-100 0.7s infinite;
+  background: #15f4ee; }
diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css
index 2b911195..78a10d8a 100644
--- a/client/assets/styles/game.css
+++ b/client/assets/styles/game.css
@@ -311,7 +311,6 @@ CRYP DAMAGE
     display: none;
 }
 
-
 /*
     COMBAT ANIMATIONS
 */
@@ -321,6 +320,7 @@ CRYP DAMAGE
  * w: http://animista.net, t: @cssanimista
  * ---------------------------------------------- */
 
+
 .attack-cast {
     -webkit-animation: attack-cast 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
             animation: attack-cast 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
diff --git a/client/index.js b/client/index.js
index 8f409800..2a5c1f0f 100644
--- a/client/index.js
+++ b/client/index.js
@@ -3,6 +3,7 @@ require('./assets/styles/styles.mobile.css');
 require('./assets/styles/instance.css');
 require('./assets/styles/instance.mobile.css');
 require('./assets/styles/game.css');
+require('./assets/styles/anims.css');
 
 // kick it off
 require('./src/app');
diff --git a/client/package.json b/client/package.json
index 6ef0299f..7f7d5730 100644
--- a/client/package.json
+++ b/client/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "start": "parcel index.html --host 0.0.0.0 --port 40080 --no-source-maps",
     "build": "rm -rf dist && parcel build index.html && cp -r assets/molecules/ dist/",
+    "scss": "node-sass --watch assets/scss -o assets/styles",
     "lint": "eslint --fix --ext .jsx src/",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -23,6 +24,7 @@
     "key": "^0.1.11",
     "keymaster": "^1.6.2",
     "lodash": "^4.17.11",
+    "node-sass": "^4.12.0",
     "parcel": "^1.12.3",
     "particles.js": "^2.0.0",
     "phaser": "^3.15.1",
diff --git a/client/src/animations.jsx b/client/src/animations.jsx
new file mode 100644
index 00000000..c94b47d0
--- /dev/null
+++ b/client/src/animations.jsx
@@ -0,0 +1,11 @@
+const preact = require('preact');
+
+function animationDivs(classes) {
+    switch (classes) {
+        case 'blast-cast': return Array.from({ length: 100 }).map(j => <div key={j} className="blast-cast"></div>);
+        case 'blast-hit': return Array.from({ length: 100 }).map(j => <div key={j} className="blast-hit"></div>);
+        default: return <div>&nbsp;</div>;
+    }
+}
+
+module.exports = { animationDivs };
diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index 132abe99..fcd345e5 100644
--- a/client/src/components/game.component.jsx
+++ b/client/src/components/game.component.jsx
@@ -1,5 +1,6 @@
 const preact = require('preact');
 const { STATS, eventClasses, getCombatText, crypAvatar } = require('../utils');
+const { animationDivs } = require('../animations');
 const GameCryp = require('./game.cryp');
 
 function GamePanel(props) {
@@ -142,6 +143,12 @@ function GamePanel(props) {
             .filter(s => playerTeamIds.includes(s.source_cryp_id) && s.target_cryp_id === cryp.id)
             .map((s, i) => <h3 key={i}>{`< ${s.skill}`}</h3>);
 
+        const anim = (
+            <div className="anim-container">
+                {animationDivs(combatClass)}
+            </div>
+        );
+
         return (
             <div
                 key={i}
@@ -157,6 +164,7 @@ function GamePanel(props) {
                     onClick={() => selectSkillTarget(cryp.id)} >
                     {crypAvatar(cryp.name)}
                     {combatTextEl}
+                    {anim}
                 </figure>
             </div>
         );
diff --git a/client/src/components/game.cryp.jsx b/client/src/components/game.cryp.jsx
index d5d73fb3..7c6293aa 100644
--- a/client/src/components/game.cryp.jsx
+++ b/client/src/components/game.cryp.jsx
@@ -4,6 +4,7 @@ const range = require('lodash/range');
 
 const actions = require('../actions');
 const { STATS, eventClasses, getCombatText, crypAvatar } = require('../utils');
+const { animationDivs } = require('../animations');
 
 const SkillBtn = require('./skill.btn');
 
@@ -83,6 +84,12 @@ function GameCryp(props) {
         .filter(s => playerTeamIds.includes(s.source_cryp_id) && s.target_cryp_id === cryp.id)
         .map((s, i) => <h3 key={i}>{`< ${s.skill}`}</h3>);
 
+    const anim = (
+        <div className="anim-container">
+            {animationDivs(combatClass)}
+        </div>
+    );
+
     return (
         <div
             style={ activeSkill ? { cursor: 'pointer' } : {}}
@@ -101,6 +108,7 @@ function GameCryp(props) {
                 onClick={() => selectSkillTarget(cryp.id)} >
                 {crypAvatar(cryp.name)}
                 {combatTextEl}
+                {anim}
             </figure>
             <div className="effects">
                 {effects}
diff --git a/client/src/constants.jsx b/client/src/constants.jsx
index f6b5f8df..06f26a32 100644
--- a/client/src/constants.jsx
+++ b/client/src/constants.jsx
@@ -1,9 +1,9 @@
 module.exports = {
     TIMES: {
         RESOLUTION_TIME_MS: 1000,
-        START_SKILL: 500,
-        END_SKILL: 500,
-        POST_SKILL: 500,
+        START_SKILL: 700,
+        END_SKILL: 700,
+        POST_SKILL: 1000,
     },
 
     INFO: {
diff --git a/server/src/item.rs b/server/src/item.rs
index 2831eaab..4fed0e2c 100644
--- a/server/src/item.rs
+++ b/server/src/item.rs
@@ -399,17 +399,17 @@ impl Item {
                 self.into_skill().unwrap().duration()),
 
             Item::Strike => format!(
-                "Hits at maximum speeding dealing red damage {:?}% red power", 
+                "Hits at maximum speed dealing red damage {:?}% red power", 
                 self.into_skill().unwrap().multiplier()),
             Item::StrikeII => format!(
-                "Hits at maximum speeding dealing red damage {:?}% red power", 
+                "Hits at maximum speed dealing red damage {:?}% red power", 
                 self.into_skill().unwrap().multiplier()),
             Item::StrikeIII => format!(
-                "Hits at maximum speeding dealing red damage {:?}% red power", 
+                "Hits at maximum speed dealing red damage {:?}% red power", 
                 self.into_skill().unwrap().multiplier()),
 
             Item::Siphon => format!(
-                "Deals blue damage {:?}% blue power each turn and heals caster based on damage dealt . Lasts {:?}T",
+                "Deals blue damage {:?}% blue power each turn and heals caster based on damage dealt. Lasts {:?}T",
                 self.into_skill().unwrap().multiplier(),
                 self.into_skill().unwrap().duration()),