/* Container to hold the leaves safely behind or over text */
.leaf-container {
  position: fixed;
  top: -50px; /* Start slightly off-screen */
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Set to 9999 if you want leaves over your content */
  pointer-events: none; /* Prevents leaves from blocking clicks */
  overflow: hidden;
}

/* Base leaf styling using CSS gradients */
.leaf {
  position: absolute;
  display: block;
  width: 40px;
  height: 25px;
  background: linear-gradient(to bottom right, #d46a11, #aa3c00); /* Autumn Orange */
  border-radius: 0 70% 0 70%; /* Gives the element a leaf shape */
  animation: fall 10s linear infinite;
}

/* The falling and swaying animation loop */
@keyframes fall {
  0% {
    top: -50px;
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  20% {
    transform: translateX(30px) rotate(45deg);
  }
  40% {
    transform: translateX(-30px) rotate(90deg);
  }
  60% {
    transform: translateX(30px) rotate(135deg);
  }
  80% {
    transform: translateX(-20px) rotate(180deg);
    opacity: 1;
  }
  100% {
    top: 110vh; /* Fall past the viewport bottom */
    transform: translateX(30px) rotate(225deg);
    opacity: 0; /* Fade out right at the end */
  }
}

/* Randomize horizontal positions, speeds, colors, and sizes using nth-child */
.leaf:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; scale: 0.8; }
.leaf:nth-child(2) { left: 25%; animation-delay: 2s; animation-duration: 9s; background: linear-gradient(to bottom right, #bda11c, #8a7304); } /* Yellow */
.leaf:nth-child(3) { left: 40%; animation-delay: 5s; animation-duration: 14s; scale: 1.2; }
.leaf:nth-child(4) { left: 55%; animation-delay: 1s; animation-duration: 10s; background: linear-gradient(to bottom right, #a22c19, #691307); } /* Red */
.leaf:nth-child(5) { left: 70%; animation-delay: 7s; animation-duration: 11s; scale: 0.7; }
.leaf:nth-child(6) { left: 85%; animation-delay: 3s; animation-duration: 13s; }
.leaf:nth-child(7) { left: 15%; animation-delay: 4s; animation-duration: 8s; background: linear-gradient(to bottom right, #8da01e, #536104); } /* Green/Brown */
.leaf:nth-child(8) { left: 95%; animation-delay: 6s; animation-duration: 15s; scale: 1.1; }