<svg id="stars-container"  preserveAspectRatio="none">

  <g id="stars" >
    <path id="star27"  d="M432 147.7c.1.6.8.9 1.1 1.5-.9.2-2.3-.6-2.3-1.2"/>
    <path id="star26"  d="M720.8 392.6c.5 1.3-1 1.2-1.8 2.4.3-1.5-.4-2.5.9-2.9"/>
    <path id="star25"  d="M346 14.6c0 .6-.4.9-1.1.9-.5-.1-.9-.4-.9-.9"/>
    <path id="star24"  d="M0 233.1c.5 0 .9.3.9.8s-.3.8-.8.9"/>
    <path id="star23"  d="M562.6 202.3c-.4-.1-.7-.4-.7-.8 0-.6.3-.9.9-.9"/>
    <path id="star22"  d="M996.2 351.6c0 .5-.3.9-.8 1-.6.1-.9-.3-.9-.8"/>
    <path id="star21"  d="M716.7 90c.6.1.9.4.8 1-.1.5-.5.9-1.1.7"/>
    <path id="star20"  d="M982.9 456.4c-.5 0-.9-.3-.9-.9 0-.5.4-.8 1-.8"/>
    <path id="start19"  d="M898.4 230.9c.6.1.9.5.8 1-.1.5-.6.8-1.1.6"/>
    <path id="star18"  d="M1028.7 2c-.1 0-.3 0-.4.1-.6-.5-.8-1.1-.1-1.7"/>
    <path id="star17"  d="M1109.5 152.3c0 .4-.2.8-.7.8-.6.1-1-.2-1-.8"/>
    <path id="start16"  d="M665.6 159.4c-.1-.5.2-.9.8-1 .6 0 1 .2 1 .8"/>
    <path id="star15"  d="M57.6 91.2c-.6.2-.9-.2-.9-.8 0-.5.4-.8.9-.9"/>
    <path id="star14"  d="M890.2 51.1c0-.4.3-.7.7-.7.5 0 .7.3.8.7"/>
    <path id="star13"  d="M1042.3 8.2c-.5.1-1 0-1.1-.6-.1-.4.1-.7.6-.8"/>
    <path id="star12"  d="M808.4 447.5c-.1.4-.4.6-.8.6-.6 0-.8-.5-.7-1"/>
    <path id="star11"  d="M416.4 256.3c0-.5.3-.9.9-.8.4 0 .8.2.8.7"/>
    <path id="star10"  d="M997.6 28.8c.2 0 .5.3.6.5.1.4-.1.7-.6.8"/>
    <path id="star9"  d="M103.8 432c-.1 0-.3 0-.4.1-.6-.5-.8-1.1-.1-1.7"/>
    <path id="star8"  d="M370.6 201.4c.1.4-.2.7-.7.7-.2 0-.5-.3-.5-.5"/>
    <path id="star7"  d="M334.5 50.6c0 .4-.2.8-.6.8-.6.1-1-.1-1.1-.6"/>
    <path id="star6"  d="M166.3 409.9c.6.1.9.5.8 1-.1.5-.6.8-1.1.6"/>
    <path id="star5"  d="M292.7 298.3c-.2.5-.6.8-1.1.6-.5-.1-.8-.6-.6-1.1"/>
    <path id="star4"  d="M987 131.8c.6.1.9.4.8.9-.2.6-.6.9-1.1.7"/>
    <path id="star3"  d="M647.6 396.4c-.8.4-1.1.7-1.3.6-.2 0-.3-.4-.5-.6"/>
    <path id="star2"  d="M635.3 384c-.2-.5 0-.9.6-1.1.6-.1.9.2 1.1.7"/>
    <path id="star1_1_"  d="M74.1 171.6c0 .6-.3 1.1-1.1 1-.6-.1-.8-.5-.8-1"/>
  </g>
</svg>
<div class="fog-container">

  <div id="sky">
    <div id="mtn1"></div>
        <div id="mtn2"></div>
    <div class="fog" id="top-fog"></div>
  </div>
  <div id="water">
    <div class="fog" id="reflection-fog"></div>
  </div>

</div>
<svg width="0" height="0">
<filter id="cloudy-filter">
<feTurbulence id="turbwave"
        type="fractalNoise"
         baseFrequency="0.01"
              seed="54"
        numOctaves="3"
    />
    <feDisplacementMap
        in="SourceGraphic" 
        scale="50" 
    />
</filter>
  <filter id="mtn-filter">
<feTurbulence id="turbwave"
        type="fractalNoise"
         baseFrequency="0.01"
        numOctaves="3"
    />
    <feDisplacementMap
        in="SourceGraphic" 
        scale="50" 
    />
</filter>
  </svg>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  overflow: hidden;
  background: #000;
  position: relative;
}
svg#stars-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;  
}
svg g path {
  stroke-width: 1px;
  stroke: #fff;
}
.fog-container {
  width: 100vw;
  height: 100vh;

  background: -webkit-radial-gradient(
    110% 90%,
    150vw 55vh,
    #c78239 0%,
    #10263d 55%,
  rgba(8, 28, 54, 0.3) 125%,
    transparent 150%
  );

  overflow: hidden;
  position: absolute;
}
.fog {
  z-index: 6;
  transform: skew(30deg, 0deg);
  background: transparent;
  position: absolute;
  width: 130vw;
  left: -15vw;
  height: 90px;
  filter: url(#cloudy-filter);
/*   box-shadow: 0px 200px 20px 0px rgba(255, 255, 255, 0.4); */
}
#sky {
  background: transparent;
  width: 100vw;
  height: 80vh;
  position: absolute;
  top: 0;
  overflow: hidden;
}
#top-fog {
  /*     background: coral; */
  bottom: 140px;
  box-shadow: 0px 200px 20px 0px rgba(192, 194, 197, 0.9);
}
/* 050f1c 202329 */
#water {
  background: linear-gradient(0deg, #071528 20%, rgba(32, 35, 41, 0.8) 120%);
  width: 100vw;
  height: 20vh;
  position: absolute;
  bottom: 0;
  overflow: hidden;

}

#reflection-fog {
  height: 85px;
  transform-origin: 50% 50%;
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1) rotate(180deg) skew(30deg, 0deg);
  background: transparent;
  top: 150px;
  box-shadow: 0px 210px 20px 0px rgba(255, 255, 255, 0.3);
}

#mtn1 {
  height: 40vh;
  width: 130vw;
  border: 1px solid rgba(255, 220, 188, 0.4);
  transform: rotate(-10deg);
  filter: url(#mtn-filter) blur(0.5px);
  bottom: -30vh;
  left: 10vw;
  position: absolute;
  background: linear-gradient(0deg, #202329 90%, #503e3e 100%);
  z-index: 5;
}
#mtn2 {
  height: 80vh;
  width: 100vw;
  transform: rotate(19deg);
  filter: url(#mtn-filter) blur(0.5px);
  bottom: -60vh;
  left: -35vw;
  position: absolute;
  background: linear-gradient(0deg,#12181e 88%, #141313 100%);

}

var tl = new TimelineMax({ delay: 5, repeat: -1});

tl.to("#turbwave", 90, {
  attr: { baseFrequency: 0.013 },
  ease: Power1.easeInOut,
  repeat: -1,
  yoyo: true
},"-=10");