@charset "UTF-8";

#snow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  top: -20px; /* 少し開始位置を上げる */
  color: rgb(255, 255, 255, .5);
  font-size: 1em;
  opacity: 0.8;
  user-select: none;
  /* アニメーション名を sway-fall に変更 */
  animation: sway-fall linear forwards;
}

/* ゆらゆら落ちるアニメーション */
@keyframes sway-fall {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    /* 右に少し揺れる */
    transform: translate(30px, 25vh) rotate(90deg);
  }
  50% {
    /* 左に少し揺れる */
    transform: translate(-30px, 50vh) rotate(180deg);
  }
  75% {
    /* また右に少し揺れる */
    transform: translate(30px, 75vh) rotate(270deg);
  }
  100% {
    /* 最終的に画面下へ。左右の位置と回転角度はJSのランダム変数を使用 */
    transform: translate(var(--end-x, 0px), 110vh) rotate(var(--end-rotate, 360deg));
  }
}