/* Falling Leaves Animation */
.falling-leaves-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0; /* Above background/border but below content */
  transform: translateZ(0); /* Force hardware acceleration */
  -webkit-perspective: 1000px; /* Enable 3D context */
  perspective: 1000px; /* Enable 3D context */
}

.falling-leaf {
  position: absolute;
  width: 65px; /* Larger leaves - increased from 50px */
  height: auto;
  opacity: 0.6;
  pointer-events: none;
  will-change: transform, opacity; /* Optimize for animations */
  backface-visibility: hidden; /* Improve performance */
  transform-style: preserve-3d; /* Smoother transforms */
  image-rendering: -webkit-optimize-contrast; /* Sharper images on webkit */
  image-rendering: crisp-edges; /* Prevent blur on transforms */
  -webkit-font-smoothing: antialiased; /* Better text rendering */
  -moz-osx-font-smoothing: grayscale; /* Better text rendering on Mac */
  transform: translateZ(0); /* Force hardware acceleration */
}

/* Different leaf types with varying sizes */
.falling-leaf.beech {
  width: 60px; /* Larger beech leaves - increased from 45px */
}

.falling-leaf.maple {
  width: 75px; /* Larger maple leaves - increased from 60px */
}

.falling-leaf.oak {
  width: 70px; /* Larger oak leaves - increased from 55px */
}

/* Falling animation with swaying motion */
@keyframes fall {
  0% {
    transform: translateY(-150px) translateX(0px) rotate(0deg) scale(0.6) scaleX(1.0);
    opacity: 0.7;
  }
  10% {
    opacity: 0.7;
    transform: translateY(-50px) translateX(8px) rotate(36deg) scale(0.8) scaleX(0.9);
  }
  20% {
    opacity: 0.7;
    transform: translateY(10vh) translateX(-12px) rotate(72deg) scale(1.0) scaleX(1.1);
  }
  30% {
    opacity: 0.7;
    transform: translateY(25vh) translateX(15px) rotate(108deg) scale(1.1) scaleX(0.8);
  }
  40% {
    opacity: 0.7;
    transform: translateY(40vh) translateX(-8px) rotate(144deg) scale(1.0) scaleX(1.0);
  }
  50% {
    opacity: 0.7;
    transform: translateY(55vh) translateX(18px) rotate(180deg) scale(1.0) scaleX(0.9);
  }
  60% {
    opacity: 0.7;
    transform: translateY(70vh) translateX(-10px) rotate(216deg) scale(1.0) scaleX(1.1);
  }
  70% {
    opacity: 0.7;
    transform: translateY(80vh) translateX(12px) rotate(252deg) scale(0.9) scaleX(0.9);
  }
  80% {
    opacity: 0.7;
    transform: translateY(90vh) translateX(-6px) rotate(288deg) scale(0.8) scaleX(1.0);
  }
  90% {
    opacity: 0.7;
    transform: translateY(95vh) translateX(4px) rotate(324deg) scale(0.7) scaleX(0.9);
  }
  100% {
    transform: translateY(calc(100vh + 50px)) translateX(0px) rotate(360deg) scale(0.6) scaleX(1.0);
    opacity: 0.7;
  }
}

/* Different animation durations and delays for variety */
.falling-leaf.speed-1 {
  animation: fall 8s linear forwards;
  animation-delay: 0s;
}

.falling-leaf.speed-2 {
  animation: fall 10s linear forwards;
  animation-delay: 1s;
}

.falling-leaf.speed-3 {
  animation: fall 12s linear forwards;
  animation-delay: 2s;
}

.falling-leaf.speed-4 {
  animation: fall 14s linear forwards;
  animation-delay: 3s;
}

.falling-leaf.speed-5 {
  animation: fall 16s linear forwards;
  animation-delay: 4s;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .falling-leaf {
    width: 45px; /* Larger on mobile too - increased from 35px */
  }
  
  .falling-leaf.beech {
    width: 42px; /* Increased from 32px */
  }
  
  .falling-leaf.maple {
    width: 55px; /* Increased from 42px */
  }
  
  .falling-leaf.oak {
    width: 50px; /* Increased from 38px */
  }
}