/* Hanya yang tidak bisa dibuat dengan class Tailwind: keyframe angin + pemakaiannya.
   Yang beranimasi adalah potongan baris semak dan tiap rumpun rumput. Nilai keyframe
   literal tanpa var()/calc() supaya bisa dijalankan di compositor/GPU. */

@keyframes sway-1 {
  0%,
  100% {
    transform: rotate(-0.7deg) skewX(-0.9deg);
  }
  38% {
    transform: rotate(1.4deg) skewX(1.8deg);
  }
  62% {
    transform: rotate(0.5deg) skewX(0.7deg);
  }
  80% {
    transform: rotate(1deg) skewX(1.3deg);
  }
}

@keyframes sway-2 {
  0%,
  100% {
    transform: rotate(-1deg) skewX(-1.3deg);
  }
  38% {
    transform: rotate(2deg) skewX(2.6deg);
  }
  62% {
    transform: rotate(0.7deg) skewX(0.9deg);
  }
  80% {
    transform: rotate(1.5deg) skewX(1.9deg);
  }
}

@keyframes sway-3 {
  0%,
  100% {
    transform: rotate(-1.3deg) skewX(-1.7deg);
  }
  38% {
    transform: rotate(2.6deg) skewX(3.4deg);
  }
  62% {
    transform: rotate(0.9deg) skewX(1.2deg);
  }
  80% {
    transform: rotate(1.9deg) skewX(2.5deg);
  }
}

/* Rumput lebih lentur dan tinggi: goyangannya lebih besar dan sedikit lebih lambat. */
@keyframes grass-sway {
  0%,
  100% {
    transform: rotate(-1.6deg) skewX(-2.2deg);
  }
  35% {
    transform: rotate(3.4deg) skewX(4.4deg);
  }
  60% {
    transform: rotate(1deg) skewX(1.4deg);
  }
  80% {
    transform: rotate(2.4deg) skewX(3.2deg);
  }
}

.bush-sway-1,
.bush-sway-2,
.bush-sway-3,
.grass-sway {
  animation-duration: var(--dur, 6s);
  animation-delay: var(--delay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.bush-sway-1 {
  animation-name: sway-1;
}
.bush-sway-2 {
  animation-name: sway-2;
}
.bush-sway-3 {
  animation-name: sway-3;
}
.grass-sway {
  animation-name: grass-sway;
}