/*
 * autumn.css — tumbling falling leaves
 * Usage: <img class="leaf" src="leaf.svg" alt="">
 */

@keyframes tumble {
  0%   { transform: translateY(-10vh) translateX(0)           rotate(0deg)   scaleX(1);    opacity: 0; }
  10%  { opacity: 1; }
  30%  { transform: translateY(28vh)  translateX(var(--gust))  rotate(120deg) scaleX(-1); }
  60%  { transform: translateY(62vh)  translateX(0)            rotate(240deg) scaleX(1);  }
  90%  { opacity: 1; }
  100% { transform: translateY(108vh) translateX(var(--gust))  rotate(400deg) scaleX(-1);  opacity: 0; }
}

.leaf {
  position: fixed;
  top: 0;
  pointer-events: none;
  user-select: none;
  animation: tumble var(--duration) var(--delay) ease-in-out infinite;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  opacity: 0;
}

.leaf:nth-child(1)  { --x: 5%;   --size: 1.6em;  --duration: 8s;  --delay:  0s;   --gust:  50px; }
.leaf:nth-child(2)  { --x: 15%;  --size: 1.1em;  --duration: 10s; --delay: -3s;   --gust: -70px; }
.leaf:nth-child(3)  { --x: 25%;  --size: 1.4em;  --duration: 7s;  --delay: -1s;   --gust:  60px; }
.leaf:nth-child(4)  { --x: 35%;  --size: 1.8em;  --duration: 11s; --delay: -7s;   --gust: -45px; }
.leaf:nth-child(5)  { --x: 45%;  --size: 1.2em;  --duration: 9s;  --delay: -4s;   --gust:  80px; }
.leaf:nth-child(6)  { --x: 55%;  --size: 1.5em;  --duration: 8s;  --delay: -9s;   --gust: -65px; }
.leaf:nth-child(7)  { --x: 63%;  --size: 1em;    --duration: 12s; --delay: -2s;   --gust:  55px; }
.leaf:nth-child(8)  { --x: 72%;  --size: 1.7em;  --duration: 7s;  --delay: -6s;   --gust: -75px; }
.leaf:nth-child(9)  { --x: 80%;  --size: 1.3em;  --duration: 10s; --delay: -11s;  --gust:  40px; }
.leaf:nth-child(10) { --x: 88%;  --size: 1.1em;  --duration: 9s;  --delay: -5s;   --gust: -50px; }
.leaf:nth-child(11) { --x: 92%;  --size: 1.6em;  --duration: 8s;  --delay: -8s;   --gust:  70px; }
.leaf:nth-child(12) { --x: 50%;  --size: 1.2em;  --duration: 11s; --delay: -13s;  --gust: -60px; }

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