/* The ground boundary */
.field {
  position: relative;
  width: 100vw;
  height: 200px;
  top:95%;
  background: #275613; /* Soil/Deep grass baseline color */
  border-top: 15px solid #3b7a24; 
  z-index: -1; /* Ensures the field is behind other elements */
}

/* Individual grass blade configuration */
.blade {
  position: absolute;
  bottom: 100%; /* Anchor to the top edge of the field */
  left: var(--left, 50%);
  width: 10px;
  height: var(--height, 120px);
  
  /* Creates a natural grass color gradient from root to tip */
  background: linear-gradient(to top, #3b7a24 20%, #5ba93c 70%, #a1db58 100%);
  
  /* Asymmetrical border-radius makes the blade taper to a sharp point */
  border-radius: 100% 0% 0% 0% / 100% 0% 0% 0%;
  
  /* Sets the anchor point to the very bottom center for realistic swaying */
  transform-origin: bottom center;
  
  /* Applies wind animation with varied delays so blades don't move in a block */
  animation: sway 4s ease-in-out infinite alternate;
  animation-delay: calc(var(--index) * -0.25s);
}

/* Alternate blade shape for organic variation */
.blade:nth-child(even) {
  border-radius: 0% 100% 0% 0% / 0% 100% 0% 0%;
  background: linear-gradient(to top, #2f631c 20%, #4c8f30 70%, #8bc34a 100%);
}

/* Wind swaying physics */
@keyframes sway {
  0% {
    transform: rotate(-3deg) skewX(-2deg);
  }
  50% {
    transform: rotate(2deg) skewX(1deg);
  }
  100% {
    transform: rotate(12deg) skewX(8deg);
  }
}