/* Container spans full viewport, doesn't block interactions */
#leaves-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

/* Base leaf style */
.leaf {
  position: absolute;
  top: -10vh; /* start slightly above the top */
  font-size: 18px; /* overridden per-leaf for variety */
  will-change: transform, opacity;
  opacity: 0.9;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
}

/* Falling animation: vertical drop + slight fade */
@keyframes fall {
  0% {
    transform: translate(var(--start-x, 0), -10vh) rotate(0deg);
    opacity: 0.9;
  }
  100% {
    transform: translate(var(--end-x, 0), 110vh) rotate(360deg);
    opacity: 0.0;
  }
}

/* Horizontal sway (applied to a wrapper for organic motion) */
@keyframes sway {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-10px); }
  50%  { transform: translateX(6px); }
  75%  { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

/* Optional: different spin styles for variety */
@keyframes spinY {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.leaf-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  animation: sway var(--sway-duration, 3s) ease-in-out infinite;
}