add smog limits

fire.css

@@ -29,7 +29,7 @@ body {
 
     mix-blend-mode: exclusion;
 
-    animation: flickeringBone 5s ease-in-out infinite;
+    animation: flickeringBone 4s ease-in-out infinite;
 }
 
 .fire {
@@ -39,7 +39,7 @@ body {
     height: 100vh;
     bottom: 0;
 
-    mix-blend-mode: hard-light;
+    mix-blend-mode: plus-lighter; /* making sure that flickering is making the fire ligther */
 }
 
 .fire.on {
@@ -53,30 +53,57 @@ body {
     animation: firing 10s linear infinite;
 }
 
-.fire_limits {
+.smog_limits {
     position: absolute;
     z-index: 2;
     width: 100vw;
+    height: 100vh;
+    bottom: 0;
+
+    background-image: url(noiseSmall.svg),
+        radial-gradient(
+            ellipse 50vmax 90vmax at 33% 65%,
+            #000000 30%,
+            #ffffff 52%
+        ),
+        radial-gradient(
+            ellipse 50vmax 90vmax at 67% 65%,
+            #000000 30%,
+            white 52%
+        );
+    background-size: 50vmin 50vmin, 100%, 100%;
+    background-blend-mode: difference;
+
+    filter: grayscale(1) contrast(1.5) invert(1);
+
+    mix-blend-mode: multiply;
+
+    animation: smog 20s linear infinite;
+}
+
+.fire_limits {
+    position: absolute;
+    z-index: 3;
+    width: 100vw;
     height: 100vmax;
     bottom: 0;
 
     background-image: radial-gradient(
-                ellipse 21% 24% at 50% 81%,
-                #cb8f8f 30%,
-                black 52%
-            )
-            /* limiting the hight of the fire */,
-        radial-gradient(ellipse 20% 68% at 50% 62%, white 38%, black 52%),
-        radial-gradient(ellipse 45% 92% at 50% 77%, #a16d22 13%, black 52%);
+            ellipse 25% 58% at 50% 62%,
+            white 38%,
+            black 52%
+        ),
+        radial-gradient(ellipse 24% 24% at 50% 81%, #ffffff00 30%, black 52%),
+        radial-gradient(ellipse 69% 87% at 50% 77%, #ffffffa3 13%, black 95%);
     background-size: contain;
-    background-blend-mode: soft-light;
+    background-blend-mode: overlay;
 
     mix-blend-mode: multiply;
 }
 
 .fire_lights {
     position: absolute;
-    z-index: 3;
+    z-index: 4;
     width: 100vw;
     height: calc(100vw / var(--aspect-ratio));
     bottom: 0;
@@ -99,12 +126,12 @@ body {
     background-size: contain;
     background-blend-mode: color-burn;
 
-    animation: flickeringLights 5s ease-in-out infinite;
+    /* animation: flickeringLights 4s ease-in-out infinite; */
 }
 
 .bon_front {
     position: absolute;
-    z-index: 4;
+    z-index: 5;
     width: 30vw;
     height: calc(30vw / var(--aspect-ratio));
     bottom: 0;
@@ -115,14 +142,13 @@ body {
     background-position: 51% 100%;
     background-repeat: no-repeat;
     background-size: contain;
-    background-blend-mode: color-burn;
 
     mix-blend-mode: color-dodge;
 }
 
 button {
     position: absolute;
-    z-index: 5;
+    z-index: 6;
     width: 100%;
     height: 100%;
     top: 0;
@@ -136,6 +162,15 @@ button {
     cursor: pointer;
 }
 
+@keyframes smog {
+    from {
+        background-position: 0 100vmin, 0, 0;
+    }
+    to {
+        background-position: 0 -100vmin, 0, 0;
+    }
+}
+
 @keyframes firing {
     from {
         background-position: -25vmin 100vmin, 25vmin 100vmin, 0 100vh, 0;
@@ -150,7 +185,7 @@ button {
         filter: brightness(1);
     }
     50% {
-        filter: brightness(10);
+        filter: brightness(7);
     }
     100% {
         filter: brightness(1);
@@ -161,7 +196,7 @@ button {
         filter: blur(7px) opacity(0.91);
     }
     50% {
-        filter: blur(10px) opacity(0.95);
+        filter: blur(10px) opacity(0.99);
     }
     100% {
         filter: blur(7px) opacity(0.91);

index.html

@@ -8,6 +8,7 @@
         <div class="bonfire">
             <div class="bon_back"></div>
             <div id="fire" class="fire"></div>
+            <div class="smog_limits"></div>
             <div class="fire_limits"></div>
             <div class="fire_lights"></div>
             <div class="bon_front"></div>