/* The overlay is purely decorative and cannot affect layout or pointer input. */
#alo-leaves-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  overflow: hidden;
  pointer-events: none !important;
  user-select: none;
  contain: strict;
}

#alo-leaves-overlay .alo-leaf {
  position: absolute;
  top: -12vh;
  left: var(--alo-x);
  width: var(--alo-size);
  height: calc(var(--alo-size) * 1.18);
  opacity: 0;
  color: var(--alo-color);
  transform-origin: center;
  animation: alo-fall var(--alo-duration) linear var(--alo-delay) infinite;
  will-change: transform, opacity;
}

#alo-leaves-overlay .alo-leaf svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1px rgb(40 25 10 / 15%));
}

@keyframes alo-fall {
  0% { opacity: 0; transform: translate3d(0, -5vh, 0) rotate(0deg); }
  8% { opacity: var(--alo-opacity); }
  50% { transform: translate3d(var(--alo-drift), 52vh, 0) rotate(360deg); }
  92% { opacity: var(--alo-opacity); }
  100% { opacity: 0; transform: translate3d(calc(var(--alo-drift) * -0.35), 112vh, 0) rotate(720deg); }
}

@media (prefers-reduced-motion: reduce) {
  #alo-leaves-overlay { display: none !important; }
}