#snow-container {
  z-index: 2000;
  position: fixed;
  inset: 0;
  overflow: hidden;
  contain: strict;
  transition: opacity 500ms;
  user-select: none;
  background: #19197060;

  display: none;
}

#snow-container.__show {
  display: block;
}

#snow-container svg {
  z-index: 1;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 200px;
  width: 100%;
  pointer-events: none;
  contain: strict;
  pointer-events: none;
}

.plow {
  position: absolute;
  bottom: 0;
  height: 372px;
  left: 100%;
  pointer-events: none;
}

.plow.sweep {
  animation: sweep 3s linear 0s 1 forwards;
}

@keyframes sweep {
  0% {
    left: 0;
    transform: translateX(-100%);
  }

  70% {
    left: 100%;
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

.snow {
  /*
    animation-name: myAnimation;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  */
  /* animation: fall linear infinite, sway ease-in-out infinite var(--sway-delay),
    spin ease-in-out infinite var(--spin-delay); */
  animation: fall var(--fall-dur, 0ms) linear 1 var(--fall-delay, 0ms),
    sway var(--fall-dur, 0ms) ease-in-out infinite var(--sway-delay, 0ms),
    spin var(--fall-dur, 0ms) ease-in-out infinite var(--spin-delay, 0ms);
  /* animation-fill-mode: both; */
  color: white;
  position: absolute;
  line-height: 1em;
  bottom: 100%;

  pointer-events: none;
  contain: content;
  transform: translate(-50%, 0);
}

@keyframes spin {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }

  10% {
    transform: rotate3d(1, 0, 1, 30deg);
  }

  20% {
    transform: rotate3d(1, 1, 0, -45deg);
  }

  30% {
    transform: rotate3d(0, 1, 1, 60deg);
  }

  40% {
    transform: rotate3d(1, 1, 1, 0deg);
  }

  50% {
    transform: rotate3d(1, 0, 1, 30deg);
  }

  60% {
    transform: rotate3d(1, 1, 0, -45deg);
  }

  70% {
    transform: rotate3d(0, 1, 1, 60deg);
  }

  80% {
    transform: rotate3d(1, 1, 1, 0deg);
  }

  90% {
    transform: rotate3d(1, 0, 1, 30deg);
  }

  100% {
    transform: rotate3d(1, 1, 0, 0deg);
  }
}

@keyframes fall {
  0% {
    /* opacity: 0; */
    bottom: 100%;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes sway {
  0% {
    margin-left: 0;
  }

  25% {
    margin-left: 50px;
  }

  50% {
    margin-left: -50px;
  }

  75% {
    margin-left: 50px;
  }

  100% {
    margin-left: 0;
  }
}