/* === ANIMATIONS: Keyframes, Falling Leaves === */

/* FALLING LEAVES */
.leaves-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.leaf {
  position: absolute;
  top: -60px;
  font-size: 24px;
  opacity: 0;
  animation: leafFall linear forwards;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

@keyframes leafFall {
  0% {
    opacity: 0;
    transform: translateX(0) rotate(0deg) scale(0.7);
  }
  10% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateX(var(--drift)) rotate(var(--spin)) scale(1);
    top: 110vh;
  }
}

/* FADE IN */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.anim { animation: fadeIn 0.25s ease-out forwards; }

/* SPINNER */
.spin { animation: sp 0.6s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }