/* ==========================================================
   FALL SEASONAL ANIMATION
   ========================================================== */

#fallLeaves {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 9998;
}

.fall-leaf {
  position: absolute;
  top: -70px;
  opacity: 0.9;
  user-select: none;
  pointer-events: auto;
  cursor: pointer;

  animation-name: fallLeaf;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes fallLeaf {
  0% {
    transform: translateY(-70px) translateX(0) rotate(0deg);
    opacity: 0;
  }

  5% {
    opacity: 0.9;
  }

  25% {
    transform: translateY(25vh) translateX(30px) rotate(90deg);
  }

  50% {
    transform: translateY(50vh) translateX(-30px) rotate(180deg);
  }

  75% {
    transform: translateY(75vh) translateX(25px) rotate(270deg);
  }

  100% {
    transform: translateY(calc(100vh + 100px))
               translateX(-20px)
               rotate(360deg);
    opacity: 0.9;
  }
}

/* Leaf clicked */

.fall-leaf.leaf-caught {
  animation: leafPop 250ms ease-out forwards !important;
}

@keyframes leafPop {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }

  50% {
    transform: scale(1.4) rotate(90deg);
    opacity: 0.7;
  }

  100% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  #fallLeaves {
    display: none;
  }
}