Falling Snow Background Animation

.bga-11, .bga-11 *, .bga-11 *::before, .bga-11 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-11 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-11__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #1b2a4a 0%, #2c3e6b 50%, #3a4f8a 100%);
}

/* Three snow layers via box-shadow for parallax depth */
.bga-11__snow, .bga-11__snow2, .bga-11__snow3 {
  position: absolute;
  top: -10px; left: 0;
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
}

.bga-11__snow {
  box-shadow:
    60px 0 #fff, 240px 0 #fff, 460px 0 #fff, 700px 0 #fff, 980px 0 #fff,
    1180px 0 #fff, 1420px 0 #fff, 1600px 0 #fff, 380px 0 #fff, 860px 0 #fff;
  animation: bga-11-fall1 8s linear infinite, bga-11-sway 3s ease-in-out infinite alternate;
}
.bga-11__snow2 {
  width: 4px; height: 4px; opacity: 0.8;
  box-shadow:
    140px 0 #fff, 320px 0 #fff, 560px 0 #fff, 820px 0 #fff, 1080px 0 #fff,
    1300px 0 #fff, 1520px 0 #fff, 200px 0 #fff, 640px 0 #fff, 1000px 0 #fff;
  animation: bga-11-fall2 12s linear infinite, bga-11-sway 4s ease-in-out infinite alternate-reverse;
}
.bga-11__snow3 {
  width: 9px; height: 9px; opacity: 0.55; filter: blur(1px);
  box-shadow:
    100px 0 #fff, 420px 0 #fff, 760px 0 #fff, 1120px 0 #fff, 1480px 0 #fff,
    300px 0 #fff, 900px 0 #fff;
  animation: bga-11-fall3 16s linear infinite, bga-11-sway 5s ease-in-out infinite alternate;
}

@keyframes bga-11-fall1 { to { transform: translateY(105vh); } }
@keyframes bga-11-fall2 { to { transform: translateY(105vh); } }
@keyframes bga-11-fall3 { to { transform: translateY(105vh); } }
@keyframes bga-11-sway {
  from { margin-left: -15px; }
  to   { margin-left: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .bga-11__snow,
  .bga-11__snow2,
  .bga-11__snow3 {
    animation: none !important;
  }
}

.bga-11, .bga-11 *, .bga-11 *::before, .bga-11 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-11 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-11__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #1b2a4a 0%, #2c3e6b 50%, #3a4f8a 100%);
}

/* Three snow layers via box-shadow for parallax depth */
.bga-11__snow, .bga-11__snow2, .bga-11__snow3 {
  position: absolute;
  top: -10px; left: 0;
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
}

.bga-11__snow {
  box-shadow:
    60px 0 #fff, 240px 0 #fff, 460px 0 #fff, 700px 0 #fff, 980px 0 #fff,
    1180px 0 #fff, 1420px 0 #fff, 1600px 0 #fff, 380px 0 #fff, 860px 0 #fff;
  animation: bga-11-fall1 8s linear infinite, bga-11-sway 3s ease-in-out infinite alternate;
}
.bga-11__snow2 {
  width: 4px; height: 4px; opacity: 0.8;
  box-shadow:
    140px 0 #fff, 320px 0 #fff, 560px 0 #fff, 820px 0 #fff, 1080px 0 #fff,
    1300px 0 #fff, 1520px 0 #fff, 200px 0 #fff, 640px 0 #fff, 1000px 0 #fff;
  animation: bga-11-fall2 12s linear infinite, bga-11-sway 4s ease-in-out infinite alternate-reverse;
}
.bga-11__snow3 {
  width: 9px; height: 9px; opacity: 0.55; filter: blur(1px);
  box-shadow:
    100px 0 #fff, 420px 0 #fff, 760px 0 #fff, 1120px 0 #fff, 1480px 0 #fff,
    300px 0 #fff, 900px 0 #fff;
  animation: bga-11-fall3 16s linear infinite, bga-11-sway 5s ease-in-out infinite alternate;
}

@keyframes bga-11-fall1 { to { transform: translateY(105vh); } }
@keyframes bga-11-fall2 { to { transform: translateY(105vh); } }
@keyframes bga-11-fall3 { to { transform: translateY(105vh); } }
@keyframes bga-11-sway {
  from { margin-left: -15px; }
  to   { margin-left: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .bga-11__snow,
  .bga-11__snow2,
  .bga-11__snow3 {
    animation: none !important;
  }
}