/* 点を降らせるエリア */
[data-falling-dots] {
  position: relative;
  overflow: hidden;
}

/* エリア全体にかぶさるレイヤー */
.falling-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 999; /* 必要に応じて変更 */
}

/* 1粒の点 */
.falling-dots__dot {
  position: absolute;
  top: -20px; /* エリアの少し上から開始 */
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  background: #FFFFFF; /* 点の色 */
  opacity: var(--opacity, 1.0);
  animation: falling-dot var(--duration, 15s) linear var(--delay, 0s) infinite;
  will-change: transform;
}

/* 上→下へ落ちるアニメーション */
@keyframes falling-dot {
  from {
    transform: translate3d(0, -100px, 0);
  }
  to {
    transform: translate3d(0, 20000px, 0);
  }
}

/* 動きが苦手なユーザー用 */
@media (prefers-reduced-motion: reduce) {
  .falling-dots {
    display: none;
  }
}