/* ===== Dollar rain container ===== */
.dollar-rain{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:-1;
}

/* ===== 1st level — vertical fall ===== */
.dollar-wrapper{
  position:absolute;
  top:-10vh;                 /* start just above the viewport */
  animation:dollar-fall var(--fall-duration) linear var(--fall-delay) forwards;
  will-change:transform;
}

/* ===== 2nd level — gentle side-to-side sway ===== */
.dollar-sway{
  animation:dollar-sway 4s ease-in-out infinite;
}

/* ===== 3rd level — actual glyph ===== */
.dollar-char{
  color:#28a745;
  text-shadow:0 0 3px rgba(40,167,69,.4);
  font-size:var(--font-size);
  opacity:.22;              /* constant = no popping */
  animation:dollar-spin 6s linear infinite;
}

/* ===== Keyframes ===== */
@keyframes dollar-fall{
  to{ transform:translateY(120vh) translateZ(0); }
}
@keyframes dollar-sway{
  0%,100%{ transform:translateX(0); }
  50%   { transform:translateX(var(--sway-distance)); }
}
@keyframes dollar-spin{
  to{ transform:rotate(360deg); }
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce){
  .dollar-rain{ display:none; }
}