/* 汎用「降る」エフェクト — 見た目の微調整は js/falling-effect.js の FALLING_EFFECT_CONFIG を編集 */

.falling-particle {
  position: fixed;
  top: -10px;
  left: 0;
  color: #e6f3ff;
  user-select: none;
  pointer-events: none;
  z-index: 1000;
  font-size: 1.6em;
  animation-name: falling-motion;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

/**
 * キーフレームは JS から渡す CSS 変数に依存する。
 * --fall-y-start : 落下開始の translateY（例: -100px）
 * --fall-x-mid   : 中間の translateX（揺れオフ時は 0px）
 * --fall-r0, --fall-r1, --fall-r2 : 0% / 50% / 100% の rotate
 * --fall-opacity-start, --fall-opacity-mid : 任意
 */
@keyframes falling-motion {
  0% {
    transform: translateY(var(--fall-y-start, -100px)) translateX(0) rotate(var(--fall-r0, 0deg));
    opacity: var(--fall-opacity-start, 1);
  }
  50% {
    transform: translateY(50vh) translateX(var(--fall-x-mid, 0px)) rotate(var(--fall-r1, 0deg));
    opacity: var(--fall-opacity-mid, 0.85);
  }
  100% {
    transform: translateY(100vh) translateX(0) rotate(var(--fall-r2, 360deg));
    opacity: 0;
  }
}