version 4, cleanup the files

fire.css

@@ -3,96 +3,116 @@
     height: 100%;
 }
 
-.firebone {
+.bonefire {
     position: relative;
     background-color: rgb(0, 0, 0);
 }
 
-.firelimits {
+.bone_back {
+    z-index: 0;
     position: absolute;
-    z-index: 2;
     width: 100%;
     height: 100%;
-    min-width: 400px;
-    min-height: 400px;
-
-    background-image: radial-gradient(
-            ellipse 45% 150% at bottom,
-            #5d2e1791 2%,
-            #63512036 15%,
-            #000000 55%
-        ),
-        radial-gradient(
-            ellipse 70% 180% at top,
-            #ffffff09,
-            #4b4b4b1a 55%,
-            #0000000e 60%
-        );
-    background-blend-mode: multiply;
-    mix-blend-mode: darken, soft-light;
+    background-position: 51% bottom;
+    background-image: url(bonfire_black_min.png);
+    background-repeat: no-repeat;
+    background-size: 30%;
+    filter: drop-shadow(0px 10px 15px black);
 }
 
 .fire {
     position: absolute;
     z-index: 1;
     width: 100%;
+    height: 97%;
+    min-width: 400px;
+    min-height: 400px;
+}
+
+.fire_limits {
+    position: absolute;
+    z-index: 2;
+    width: 100%;
     height: 100%;
     min-width: 400px;
     min-height: 400px;
+
+    background-image: radial-gradient(
+                ellipse 21% 157% at 50% 87%,
+                transparent 35%,
+                black 70%
+            )
+            /* limiting the hight of the fire */,
+        radial-gradient(ellipse 79% 131% at 50% 25%, transparent 44%, black 53%)
+            /* limiting the bottom of the fire to not go over the stones */;
 }
 
 .fire.on {
-    background-image: url(noise2.svg), url(noise2.svg), url(noise.svg),
-        url(noise1.svg),
-        linear-gradient(180deg, rgb(0 0 0) 29%, rgba(255, 255, 255, 0) 80%),
-        radial-gradient(
-            ellipse 25% 40% at bottom,
-            #ff7c3a00 2%,
-            #ffc93400 20%,
-            #000000 55%
-        );
-    filter: sepia(1) contrast(5);
+    background-image: linear-gradient(
+                180deg,
+                rgb(0 0 0) 29% /* blending top of the smog */,
+                rgb(86, 86, 86) 80% /* making the central smog gray */,
+                transparent 88% /* ignore the fire */
+            )
+            /* linear gradient for the smog */,
+        url(noise2.svg), url(noise2.svg), url(noise.svg), url(noise1.svg);
 
-    background-blend-mode: color-burn, difference, difference, color-burn,
-        multiply;
-    /* mix-blend-mode: darken, soft-light; */
-    animation: sliding 100s linear infinite;
+    filter: sepia(1);
+    background-blend-mode: color-burn /* smog gradient and noise2 */,
+        color-burn /* noise2 and noise2 */, color-burn /* noise2 and noise */,
+        difference /* noise and noise1 */;
+    mix-blend-mode: hard-light;
+    animation: firing 100s linear infinite;
 }
 
-.bone {
-    z-index: 3;
+.fire_lights {
     position: absolute;
+    z-index: 3;
     width: 100%;
     height: 100%;
-    filter: opacity(0.5);
-    background-position: center bottom;
-    background-image: url(bonfire_black-min.png);
-    background-repeat: no-repeat;
-    background-size: 30%;
-    mix-blend-mode: color-dodge;
+    min-width: 400px;
+    min-height: 400px;
+    background-image: radial-gradient(
+            ellipse 48% 13% at 50% 95%,
+            #ff990033 12% /* center of fire light */,
+            #4040400c 50% /* general light outside bone */,
+            transparent 100% /* no effect outside */
+        ),
+        /* horizontal lights on the ground around bone*/
+            radial-gradient(
+                ellipse 22% 42% at 50% 85%,
+                #ff990033 0% /* center of fire light */,
+                #4040400c 28% /* general light outside bone */,
+                transparent 100% /* no effect outside */
+            )
+            /* vertical lights */;
+    mix-blend-mode: luminosity;
+    /* background-blend-mode: luminosity; */
 }
 
-.bonebackground {
-    z-index: 0;
+.bone_back {
+    z-index: 4;
     position: absolute;
     width: 100%;
     height: 100%;
-    background-position: center bottom;
-    background-image: url(bonfire_black-min.png);
+    filter: drop-shadow(0px 11px 14px black);
+    background-position: 51% bottom;
+    background-image: url(bonfire_black_min.png);
     background-repeat: no-repeat;
     background-size: 30%;
+    mix-blend-mode: overlay;
 }
 
-@keyframes sliding {
+@keyframes firing {
     from {
-        background-position: 512px 7168px /* first noise */,
-            1536px 9216px /* second noise */, 0 7168px /* third noise */,
-            150% 20% /*forth noise */, 0 /* fire color gradient */, 0;
+        background-position: 0 /* smog color gradient */,
+            512px 7168px /* first noise */, 1536px 9216px /* second noise */,
+            0 7168px /* third noise */, 150% 20% /*forth noise */;
     }
     to {
-        background-position: 512px 9216px /* first noise */,
-            512px 0 /* second noise */, 1024px 0 /* thirs noice */,
-            250% 350% /* forth noise */, 0 /* fire color gradient */, 0;
+        background-position: 0 /* smog color gradient */,
+            512px 9216px /* first noise */, 512px 0 /* second noise */,
+            1024px 0 /* thirs noice */, 250% 350% /* forth noise */;
     }
 }
 

index.html

@@ -5,14 +5,13 @@
         <link rel="stylesheet" type="text/css" href="fire.css" />
     </head>
     <body>
-        <div class="firebone">
-            <div class="bonebackground"></div>
+        <div class="bonefire">
+            <div class="bone_back"></div>
             <div id="fire" class="fire"></div>
-            <div class="firelimits"></div>
-            <div class="bone"></div>
-            <button id="startButton" onclick="startSound()">
-                START THE FIRE
-            </button>
+            <div class="fire_limits"></div>
+            <div class="fire_lights"></div>
+            <div class="bone_back"></div>
+            <button id="start" onclick="startSound()">START THE FIRE</button>
         </div>
 
         <audio id="fireSound" loop>
@@ -21,11 +20,11 @@
         <script>
             function startSound() {
                 const fireSound = document.getElementById("fireSound");
-                const startButton = document.getElementById("startButton");
+                const start = document.getElementById("start");
                 const fire = document.getElementById("fire");
 
                 fire.classList.add("on");
-                startButton.style.display = "none";
+                start.style.display = "none";
 
                 fireSound.play();
             }