/* Tunables (global CSS variables for the component) */
:root {
  --bucket-size: 24px;   /* end-user emoji size (per instance via data-size) */
  --wisp-rate-ms: 420;   /* average delay between steam wisps */
  --max-wisps: 64;       /* soft cap to avoid DOM growth */
}

/* Component layout */
.popcorn {
  position: relative;
  display: inline-block;
  width: calc(var(--bucket-size) * 1.05);
  height: var(--bucket-size);
  vertical-align: middle;
  isolation: isolate;
}

.popcorn .bucket {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  font-size: var(--bucket-size);
  line-height: 1;
  animation: none;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.06));
  z-index: 1;
}

/* Emitter: top rim area where steam originates */
.popcorn .emitter {
  position: absolute;
  left: 50%;
  bottom: 58%;               /* approx. top rim of the 🍿 */
  width: 70%;
  height: 2px;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

/* The steam wisp */
.popcorn .wisp {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--w);
  height: var(--h);
  transform: translateX(-50%); /* base centering before our animated translate */
  opacity: 0;
  /* soft, layered “steam” look */
  background:
    radial-gradient(closest-side at 50% 80%, rgba(255,255,255,.85) 0 55%, rgba(255,255,255,0) 60%),
    radial-gradient(closest-side at 32% 40%, rgba(255,255,255,.70) 0 52%, rgba(255,255,255,0) 60%),
    radial-gradient(closest-side at 72% 28%, rgba(255,255,255,.55) 0 48%, rgba(255,255,255,0) 60%),
    radial-gradient(closest-side at 50% 40%, rgba(255,246,220,.28) 0 25%, rgba(255,255,255,0) 40%);
  border-radius: 60% 40% 55% 45% / 55% 60% 45% 50%;
  filter: blur(var(--blur));
  will-change: transform, opacity, filter;
  animation: wisp-rise var(--dur) ease-out forwards;
  mix-blend-mode: normal;
}

/* subtle bucket life */
@keyframes bucket-wiggle {
  0%,100% { transform: translateY(0) rotate(0); }
  20%     { transform: translateY(.4px) rotate(-.3deg); }
  40%     { transform: translateY(-.6px) rotate(.35deg); }
  60%     { transform: translateY(.3px) rotate(-.25deg); }
  80%     { transform: translateY(-.2px) rotate(.2deg); }
}

/* single animation using variables for the path */
@keyframes wisp-rise {
  0%{
    opacity: 0;
    transform:
      translate(calc(-50% + var(--x0)), 0)
      scale(var(--s0))
      rotate(var(--r0));
    filter: blur(calc(var(--blur) + .6px));
  }
  15%{
    opacity: var(--op);
  }
  50%{
    opacity: var(--op);
    transform:
      translate(calc(-50% + var(--x1)), var(--y1))
      scale(var(--s1))
      rotate(calc(var(--r0) + var(--rD) * .5));
  }
  100%{
    opacity: 0;
    transform:
      translate(calc(-50% + var(--x2)), var(--y2))
      scale(var(--s2))
      rotate(calc(var(--r0) + var(--rD)));
    filter: blur(calc(var(--blur) + 1px));
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .popcorn .bucket { animation: none !important; }
  .popcorn .emitter { display: none !important; }
  .popcorn .wisp { animation: none !important; }
}