/* =========================
   LEVEL UP POP
========================= */

@keyframes pop {
  from { transform: translateY(6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes clickEventArrive {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.76);
    filter: saturate(1.24) brightness(1.28);
  }
  48% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
    filter: saturate(1.32) brightness(1.2);
  }
  72% {
    transform: translate(-50%, -50%) scale(0.98);
    filter: saturate(1.12) brightness(1.08);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: saturate(1) brightness(1);
  }
}

@keyframes clickEventSheen {
  0% {
    opacity: 0;
    left: -76%;
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 112%;
  }
}

@keyframes clickEventButtonPulse {
  0% {
    transform: scale(0.92);
    filter: brightness(1.26) saturate(1.22);
    box-shadow: 0 0 0 1px rgba(255, 229, 154, 0.18);
  }
  42% {
    transform: scale(1.12);
    filter: brightness(1.22) saturate(1.2);
    box-shadow:
      0 0 0 3px rgba(255, 229, 154, 0.3),
      0 0 24px rgba(255, 212, 118, 0.32),
      0 10px 20px rgba(0, 0, 0, 0.24);
  }
  70% {
    transform: scale(0.98);
    filter: brightness(1.14) saturate(1.12);
    box-shadow:
      0 0 0 2px rgba(255, 229, 154, 0.24),
      0 0 18px rgba(255, 212, 118, 0.24);
  }
  100% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
    box-shadow: 0 0 0 1px rgba(255, 229, 154, 0.1);
  }
}

@keyframes missedSkillEventPop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
    filter: saturate(1) brightness(1);
  }
  24% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 3px)) rotate(-1deg);
    filter: saturate(1.25) brightness(1.12);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -72%) rotate(3deg);
    filter: saturate(0.6) brightness(0.72);
  }
}

@keyframes missedSpotPop {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.38));
  }
  28% {
    opacity: 1;
    transform: scale(1.34) rotate(-4deg);
    filter: drop-shadow(0 0 14px rgba(221, 72, 54, 0.92)) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.38));
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.35) rotate(8deg);
    filter: drop-shadow(0 0 4px rgba(221, 72, 54, 0.28));
  }
}

@keyframes successSkillEventPop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    filter: saturate(1) brightness(1);
  }
  28% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 3px)) rotate(-3deg) scale(1.13);
    filter: saturate(1.45) brightness(1.28);
  }
  56% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 1px)) rotate(2.5deg) scale(1.04);
    filter: saturate(1.25) brightness(1.16);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -64%) rotate(7deg) scale(0.68);
    filter: saturate(1.05) brightness(1.05);
  }
}

@keyframes successSpotPop {
  0% {
    opacity: 1;
    transform: scale(1.6);
  }
  42% {
    opacity: 1;
    transform: scale(1.95) rotate(2deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.72) rotate(-3deg);
  }
}

@keyframes perfectSpotPop {
  0% {
    opacity: 1;
    transform: scale(1.6);
  }
  32% {
    opacity: 1;
    transform: scale(2.08) rotate(-3deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-14px) scale(0.78) rotate(4deg);
  }
}

/* =========================
   FLOATING TEXT
========================= */

@keyframes dopamineFloat {
  0% {
    opacity: 0;
    transform: translate(0px, 8px);
  }
  15% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(2px, 0px);
  }
  35% {
    transform: translate(-2px, -2px);
  }
  100% {
    opacity: 0;
    transform: translate(0px, -45px);
  }
}

@keyframes questFloatingText {
  0% {
    opacity: 0;
    transform: translate(0px, 8px);
  }
  6% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  10% {
    opacity: 1;
    transform: translate(2px, 0px);
  }
  82% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  100% {
    opacity: 0;
    transform: translate(0px, -24px);
  }
}

/* =========================
   GENERIC FADE IN
========================= */

@keyframes fadeInScale {
  from {
    transform: translateY(4px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes rewardBurstIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(0.65);
    filter: blur(1px);
  }
  12% {
    opacity: 1;
    transform: translate3d(1.8px, -9px, 0) scale(1.18);
    filter: blur(0);
  }
  22% {
    transform: translate3d(-1.4px, 3px, 0) scale(0.93);
  }
  32% {
    transform: translate3d(0.9px, -2px, 0) scale(1.07);
  }
  42% {
    transform: translate3d(-0.6px, 1px, 0) scale(0.97);
  }
  55% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, -7px, 0) scale(1);
  }
}

@keyframes rewardResolve {
  /* Balloon pop / burst – text inflates fast then violently explodes outward */
  0% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(0.92);
    filter: brightness(1.25);
  }
  10% {
    opacity: 1;
    transform: translate3d(0, 3px, 0) scale(1.55);
    filter: brightness(1.6);
  }
  26% {
    opacity: 0.45;
    transform: translate3d(2.5px, -5px, 0) scale(2.25);
    filter: brightness(0.95);
  }
  45% {
    opacity: 0.12;
    transform: translate3d(-2px, -11px, 0) scale(2.9);
    filter: blur(0.8px);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -20px, 0) scale(3.6);
    filter: blur(2px);
  }
}

@keyframes rewardIdleDrift {
  0%, 100% {
    transform: translate3d(-1px, 0, 0) rotate(-0.35deg);
  }
  50% {
    transform: translate3d(1px, -3px, 0) rotate(0.35deg);
  }
}

/* Subtle ongoing pulse for the pure text (colored glow boost) to feel more alive.
   Uses filter so it doesn't fight the entry transform.
*/
@keyframes rewardSoftPulse {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 2px currentColor);
  }
  50% {
    filter: brightness(1.28) drop-shadow(0 0 11px currentColor);
  }
}

@keyframes xpBubbleFly {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.1);
  }
  18% {
    opacity: 1;
    transform: translate3d(var(--burst-x), var(--burst-y), 0) scale(1.25);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--travel-x), var(--travel-y), 0) scale(0.08);
  }
}