.lottie-btn-wrapper {
    position: relative;
    display: inline-block;
  }
  
  .lottie-hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 160px;
    height: 160px;
    opacity: 0;
    transform-origin: center;
    transition: transform 0.3s ease;
  }
  
  .lottie-btn-wrapper:hover .lottie-hover {
    transform: translate(-50%, -50%) scale(1.2);
  }
  

/* vanila animation */
.falling-icons {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 99;
}
.popcorn-icon {
  position: absolute;
  top: -100px;
  opacity: 0;
  animation-name: realisticFall;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}


@keyframes popcornFall {
  0% {
    transform: translateY(-100px) translateX(0) scale(0.8) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translateY(50vh) translateX(30px) scale(1.2) rotate(15deg);
  }
  70% {
    transform: translateY(70vh) translateX(-20px) scale(1) rotate(-10deg);
  }
  100% {
    transform: translateY(110vh) translateX(10px) scale(0.9) rotate(0deg);
    opacity: 0;
  }
}
@keyframes realisticFall {
  0% {
    transform: translateY(-100px) translateX(0px) rotate(0deg) scale(0.8);
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  30% {
    transform: translateY(30vh) translateX(-10px) rotate(45deg) scale(1);
  }
  60% {
    transform: translateY(60vh) translateX(10px) rotate(-30deg) scale(1.1);
  }
  100% {
    transform: translateY(110vh) translateX(-20px) rotate(60deg) scale(0.9);
    opacity: 1;
  }
}