/* Plantas animadas que envuelven el hero */
.plants {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.plants__layer {
  position: absolute;
  display: flex;
  gap: min(8vmax, 6rem);
  align-items: flex-end;
  filter: drop-shadow(0 22px 35px rgba(43, 102, 72, 0.18));
}

.plants__layer--left {
  bottom: -9vmax;
  left: -12vmax;
}

.plants__layer--right {
  bottom: -11vmax;
  right: -14vmax;
  transform: scaleX(-1);
}

.plants__layer--center {
  bottom: -12vmax;
  left: 50%;
  transform: translateX(-50%);
}

.leaf {
  --leaf-hue: var(--color-primary);
  --leaf-highlight: var(--color-primary-light);
  --leaf-shadow: var(--color-primary-dark);
  display: block;
  width: 32vmax;
  aspect-ratio: 2 / 3;
  background: linear-gradient(150deg, var(--leaf-highlight) 5%, var(--leaf-hue) 45%, var(--leaf-shadow) 100%);
  clip-path: polygon(50% 0%, 68% 8%, 82% 26%, 90% 48%, 82% 72%, 66% 100%, 34% 100%, 18% 72%, 10% 48%, 18% 26%, 32% 8%);
  opacity: 0.9;
  transform-origin: 50% 100%;
  animation: sway var(--sway-duration, 16s) ease-in-out infinite;
  position: relative;
}

.leaf::after {
  content: "";
  position: absolute;
  inset: 12% 50% 2% 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 80%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  opacity: 0.55;
}

.leaf--xl {
  width: 36vmax;
  --sway-duration: 18s;
  animation-delay: -3s;
}

.leaf--lg {
  width: 30vmax;
  --sway-duration: 20s;
  animation-delay: -6s;
}

.leaf--md {
  width: 22vmax;
  --sway-duration: 14s;
  animation-delay: -9s;
  opacity: 0.75;
}

.leaf--sm {
  width: 16vmax;
  --sway-duration: 11s;
  animation-delay: -1s;
  opacity: 0.6;
}

.leaf--tall {
  width: 18vmax;
  --sway-duration: 17s;
  animation-delay: -12s;
  opacity: 0.7;
}

.leaf--offset {
  transform: translateX(6vmax);
  opacity: 0.5;
  animation-duration: 21s;
}

@keyframes sway {
  /* Balanceo suave de las hojas */
  0%,
  100% {
    transform: rotate(-3deg);
  }

  50% {
    transform: rotate(4deg);
  }
}

@media (max-width: 720px) {
  .plants__layer--left,
  .plants__layer--right {
    bottom: -6vmax;
  }

  .leaf {
    width: clamp(14rem, 40vw, 22rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .leaf {
    animation: none;
  }
}