/* ============================================================
   Jugnu Jar — animations
   ============================================================ */

@keyframes float-bg {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -22px, 0) scale(1.04); }
}

@keyframes pop-in {
  0%   { transform: scale(.6) translateY(14px); opacity: 0; }
  70%  { transform: scale(1.06) translateY(0); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop-in .34s cubic-bezier(.2, 1.3, .4, 1) both; }

@keyframes slide-up {
  from { transform: translateY(22px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.screen { animation: slide-up .28s ease both; }

@keyframes wiggle {
  0%, 100% { transform: translateX(0) rotate(0); }
  20%      { transform: translateX(-9px) rotate(-4deg); }
  40%      { transform: translateX(9px) rotate(4deg); }
  60%      { transform: translateX(-6px) rotate(-2deg); }
  80%      { transform: translateX(6px) rotate(2deg); }
}
.wiggle { animation: wiggle .45s ease; }

@keyframes bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}
.bump { animation: bump .32s ease; }

@keyframes flip-in {
  0%   { transform: rotateY(78deg) scale(.86); opacity: 0; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}
.flip-in { animation: flip-in .34s ease both; }

@keyframes star-pop {
  0%   { transform: scale(0) rotate(-140deg); opacity: 0; }
  65%  { transform: scale(1.35) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.star-pop { animation: star-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255, 176, 46, .75); }
  70%  { box-shadow: 0 0 0 26px rgba(255, 176, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 176, 46, 0); }
}
.pulse { animation: pulse-ring 1.6s ease-out infinite; }

@keyframes speaking {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
.speaking { animation: speaking .5s ease-in-out infinite; }

@keyframes fly-away {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(.3) translateY(-26px); opacity: 0; }
}

@keyframes toast-in {
  from { transform: translate(-50%, 26px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
.toast { animation: toast-in .26s ease both; }

@keyframes hand-hint {
  0%   { opacity: 0; }
  15%  { opacity: .85; }
  85%  { opacity: .85; }
  100% { opacity: 0; }
}
.hand-hint { animation: hand-hint 2.4s ease-in-out; }

/* a firefly blinking its way up out of the jar */
@keyframes spark-drift {
  0%, 100% { opacity: 0; transform: translateY(5px) scale(.6); }
  45%      { opacity: 1; transform: translateY(-4px) scale(1); }
  70%      { opacity: .7; transform: translateY(-8px) scale(.9); }
}

/* staggered entrance for grids */
.stagger > * { animation: pop-in .34s cubic-bezier(.2, 1.3, .4, 1) both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .07s; }
.stagger > *:nth-child(3) { animation-delay: .12s; }
.stagger > *:nth-child(4) { animation-delay: .17s; }
.stagger > *:nth-child(5) { animation-delay: .22s; }
.stagger > *:nth-child(6) { animation-delay: .27s; }
.stagger > *:nth-child(7) { animation-delay: .32s; }
.stagger > *:nth-child(8) { animation-delay: .37s; }