.fire-particles {
     z-index: -1;
 }

 .glow-particle-2 {
     transition: opacity 3s;
     width: 5px;
     height: 5px;
     border-radius: 50%;
     z-index: 10;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: calc(100% + 5px);
 }

 .glow-particle-2:before {
     box-shadow: 0 0 10px 5px rgb(255 167 59 / 80%);
     border-radius: 50%;
     position: absolute;
     top: 0;
     content: "";
     display: block;
     width: 100%;
     height: 100%;
 }

 .glow-particle-2:after {
     background-color: #e98d44;
     position: absolute;
     top: 0;
     content: "";
     display: block;
     width: 100%;
     height: 100%;
     border-radius: 500px;
 }

 .glow-particle-1 {
     transition: opacity 3s;
     width: 5px;
     height: 5px;
     border-radius: 50%;
     z-index: 10;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: calc(100% + 5px);
 }

 .glow-particle-1:before {
     box-shadow: 0 0 70px 35px rgb(230 120 52 / 40%), 10px -20px 70px 35px rgb(230 120 52 / 20%), 20px -40px 70px 35px rgb(230 120 52 / 20%), 0 0 10px 5px rgb(230 120 52 / 80%);
     border-radius: 50%;
     position: absolute;
     top: 0;
     content: "";
     display: block;
     width: 100%;
     height: 100%;
 }

 .glow-particle-1:after {
     background-color: #f3cd73;
     position: absolute;
     top: 0;
     content: "";
     display: block;
     width: 100%;
     height: 100%;
     border-radius: 500px;
 }

 .glow-particle-3 {
     transition: opacity 3s;
     width: 5px;
     height: 5px;
     border-radius: 50%;
     z-index: 10;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: calc(100% + 5px);
 }

 .glow-particle-3:before {
     box-shadow: 0 0 20px 10px rgb(239 180 96 / 50%), 0 0 3px 4px rgb(239 180 96 / 50%);
     border-radius: 50%;
     position: absolute;
     top: 0;
     content: "";
     display: block;
     width: 100%;
     height: 100%;
 }

 .glow-particle-3:after {
     background-color: #efb460;
     position: absolute;
     top: 0;
     content: "";
     display: block;
     width: 100%;
     height: 100%;
     border-radius: 500px;
 }

 .glow-particle-4 {
     transition: opacity 3s;
     width: 5px;
     height: 5px;
     border-radius: 50%;
     z-index: 10;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: calc(100% + 5px);
     opacity: .7;
     background-color: #e98d44;
     box-shadow: 0 0 160px 80px rgb(230 120 52 / 40%), 0 0 5px 3px rgb(233 141 68 / 40%);
     filter: blur(3px);
 }

 .particle-pulse {
     animation: particlePulse 5s ease-in-out infinite alternate;
     transform: scale(3.4);
     z-index: 0;
 }

 .particle-swing {
     animation: particleSwingSide 1s ease-in-out infinite alternate;
 }

 .particle-rise {
     opacity: 0;
     animation: particleRaise 50s ease-out infinite;
     position: absolute !important
 }

 @keyframes particlePulse {
     0% {
         opacity: 1;
     }

     50% {
         opacity: 0.8;
     }

     100% {
         opacity: 1;
     }
 }

 @keyframes particleSwingSide {
     0% {
         transform: translateX(-40px);
     }

     100% {
         transform: translateX(40px);
     }
 }

 @keyframes particleRaise {
     0% {
         opacity: 0;
         transform: translateY(2202px) scale(1)
     }

     15% {
         opacity: 1;
     }

     97% {
         opacity: 1;
     }

     100% {
         opacity: 0;
         transform: translateY(0) scale(.75);
     }
 }

 .particles-hide {
     background: #fff;
     position: relative;
     background-size: cover;
     background-position: center;
 }

 .particles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url("https://transparenttextures.com/patterns/green-dust-and-scratches.png");
     /* Subtle dust texture */
     pointer-events: none;
     animation: drift 30s linear infinite;
     opacity: 0.3;
     z-index: 1;
     -webkit-mask-image: linear-gradient(to top, transparent 5%, black 40%);
     mask-image: linear-gradient(to top, transparent 5%, black 40%);
 }

 .particles-2 {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url("https://transparenttextures.com/patterns/stardust.png");
     /* Subtle dust texture */
     pointer-events: none;
     animation: drift-2 30s linear infinite;
     opacity: 0.3;
     z-index: 2;
     -webkit-mask-image: linear-gradient(to top, transparent 5%, black 40%);
     mask-image: linear-gradient(to top, transparent 5%, black 40%);
 }


 @keyframes drift {
     from {
         background-position: 0 0;
     }

     to {
         background-position: 500px 1000px;
     }
 }

 @keyframes drift-2 {
     from {
         background-position: 0 0;
     }

     to {
         background-position: 500px 1500px;
     }
 }