/**
 * animations.css
 * Keyframe animations for button interactions, reaction cards, modals, and confetti.
 * Respects user prefers-reduced-motion settings.
 */

/* ==========================================================================
   IDLE BUTTON PULSE
   ========================================================================== */
@keyframes gentlePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

.giant-red-button.pulse-idle {
  animation: gentlePulse 2.8s ease-in-out infinite;
}

.giant-red-button.pulse-idle:hover,
.giant-red-button.pulse-idle:active {
  animation-play-state: paused;
}

/* ==========================================================================
   BUTTON CLICK ANIMATIONS (Section 6)
   ========================================================================== */

/* 1. Bounce */
@keyframes btnBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  28% {
    transform: translateY(-24px) scale(1.06, 0.94);
  }
  55% {
    transform: translateY(6px) scale(0.96, 1.04);
  }
  78% {
    transform: translateY(-10px) scale(1.02, 0.98);
  }
}

.giant-red-button.anim-bounce {
  animation: btnBounce 0.58s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 2. Wobble */
@keyframes btnWobble {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  18% {
    transform: translateX(-14px) rotate(-9deg);
  }
  36% {
    transform: translateX(12px) rotate(8deg);
  }
  54% {
    transform: translateX(-9px) rotate(-5deg);
  }
  72% {
    transform: translateX(6px) rotate(4deg);
  }
  88% {
    transform: translateX(-3px) rotate(-2deg);
  }
}

.giant-red-button.anim-wobble {
  animation: btnWobble 0.62s ease-in-out;
}

/* 3. Spin */
@keyframes btnSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(190deg) scale(0.92);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.giant-red-button.anim-spin {
  animation: btnSpin 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 4. Shrink and Grow */
@keyframes btnShrinkGrow {
  0%, 100% {
    transform: scale(1);
  }
  32% {
    transform: scale(0.62);
  }
  70% {
    transform: scale(1.16);
  }
  86% {
    transform: scale(0.95);
  }
}

.giant-red-button.anim-shrink-grow {
  animation: btnShrinkGrow 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 5. Brief Shake */
@keyframes btnShake {
  0%, 100% {
    transform: translateX(0);
  }
  15%, 45%, 75% {
    transform: translateX(-11px);
  }
  30%, 60%, 90% {
    transform: translateX(11px);
  }
}

.giant-red-button.anim-shake {
  animation: btnShake 0.46s ease-in-out;
}

/* ==========================================================================
   REACTION CARD & COUNTER ANIMATIONS
   ========================================================================== */
@keyframes cardPopIn {
  0% {
    opacity: 0.55;
    transform: translateY(6px) scale(0.98);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.reaction-card.card-pop {
  animation: cardPopIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes counterBump {
  0%, 100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.22);
  }
}

.counter-value.counter-bump {
  display: inline-block;
  animation: counterBump 0.26s ease-out;
}

/* ==========================================================================
   ACHIEVEMENT TOAST & MODAL ENTRANCE
   ========================================================================== */
@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translateX(40px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toastFadeOut {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
  }
}

.achievement-toast.toast-enter {
  animation: toastSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.achievement-toast.toast-exit {
  animation: toastFadeOut 0.25s ease-in forwards;
}

@keyframes modalPop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-window {
  animation: modalPop 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   CONFETTI CELEBRATION LAYER
   ========================================================================== */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 110;
  overflow: hidden;
}

@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translate3d(var(--start-x, 0px), -20px, 0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--end-x, 40px), 102vh, 0) rotate(var(--rot, 540deg));
  }
}

.confetti-piece {
  position: absolute;
  top: -16px;
  width: 12px;
  height: 12px;
  border: 2px solid #141413;
  border-radius: 3px;
  animation: confettiFall var(--dur, 1.9s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ==========================================================================
   BUTTON ESCAPE POSITIONS (CSS-CLASS DRIVEN, NO INLINE TRANSFORMS)
   ========================================================================== */
.button-mover.dodge-pos-1 {
  transform: translate(-58px, -18px) rotate(-8deg);
}

.button-mover.dodge-pos-2 {
  transform: translate(62px, 16px) rotate(9deg);
}

.button-mover.dodge-pos-3 {
  transform: translate(-52px, 20px) rotate(6deg);
}

.button-mover.dodge-pos-4 {
  transform: translate(56px, -20px) rotate(-7deg);
}

@media (max-width: 480px) {
  .button-mover.dodge-pos-1 {
    transform: translate(-28px, -12px) rotate(-6deg);
  }
  .button-mover.dodge-pos-2 {
    transform: translate(28px, 12px) rotate(6deg);
  }
  .button-mover.dodge-pos-3 {
    transform: translate(-24px, 14px) rotate(5deg);
  }
  .button-mover.dodge-pos-4 {
    transform: translate(24px, -14px) rotate(-5deg);
  }
}

/* ==========================================================================
   REDUCED MOTION SUPPORT (Section 6 & 14)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .giant-red-button.pulse-idle {
    animation: none !important;
  }

  .button-mover {
    transition: none !important;
  }
}