/* Fixed overlay container (doesn't block clicks) */
#sh-popcorn-overlay{
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none; /* allow page interaction */
}

/* Each popcorn piece is clickable/hoverable */
#sh-popcorn-overlay .sh-pop{
  position: fixed;
  top: -60px;
  left: 0;
  pointer-events: auto; /* so hover works */
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.25));
  will-change: transform, opacity;
  animation:
    sh-fall var(--fall, 1s) linear var(--delay, 0s) forwards,
    sh-sway var(--sway, 0.55s) ease-in-out var(--delay, 0s) infinite;
}

/* Fall: top -> below viewport */
@keyframes sh-fall{
  to{
    transform: translate3d(var(--dx, 0px), 120vh, 0) rotate(var(--rot2, 360deg));
    opacity: 1;
  }
}

/* extra chaos */
@keyframes sh-sway{
  0%,100%{ transform: translate3d(calc(var(--dx, 0px) - 10px), 0, 0) rotate(var(--rot1, 0deg)); }
  50%    { transform: translate3d(calc(var(--dx, 0px) + 10px), 0, 0) rotate(calc(var(--rot1, 0deg) + 10deg)); }
}

@media (prefers-reduced-motion: reduce){
  #sh-popcorn-overlay .sh-pop{ animation: none !important; }
}