/* ==========================================================================
   Graduation Avatar — Francesco 2.0
   Keyframe Animations & Micro-Interactions
   ========================================================================== */

/* Gentle Idle Floating / Bobbing for Miis */
@keyframes miiIdleBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.mii-anim-idle {
  animation: miiIdleBob 2.8s ease-in-out infinite;
}

/* Spot Shadow breathing in sync with bobbing */
@keyframes shadowBreathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.22;
  }
  50% {
    transform: scale(0.85);
    opacity: 0.14;
  }
}

.mii-shadow-anim {
  animation: shadowBreathe 2.8s ease-in-out infinite;
}

/* Francesco Dramatic Entrance Bounce */
@keyframes miiSlideInUp {
  0% {
    transform: translateY(120px) scale(0.85);
    opacity: 0;
  }
  65% {
    transform: translateY(-12px) scale(1.04);
    opacity: 1;
  }
  85% {
    transform: translateY(4px) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.mii-enter {
  animation: miiSlideInUp 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Recipient Mii Big Reveal Pop & Sparkle */
@keyframes miiRevealPop {
  0% {
    transform: scale(0) rotate(-10deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.15) rotate(3deg);
    opacity: 1;
  }
  80% {
    transform: scale(0.95) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.mii-reveal-anim {
  animation: miiRevealPop 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Sceptical / Wrong Answer Wobble */
@keyframes wrongWobble {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px) rotate(-3deg); }
  40% { transform: translateX(8px) rotate(3deg); }
  60% { transform: translateX(-6px) rotate(-2deg); }
  80% { transform: translateX(6px) rotate(2deg); }
}

.anim-wobble {
  animation: wrongWobble 0.5s ease-in-out;
}

/* Success Celebration Jump */
@keyframes celebrateHop {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-24px) scale(1.08, 0.92); }
  60% { transform: translateY(-8px) scale(0.96, 1.04); }
}

.anim-celebrate {
  animation: celebrateHop 0.65s cubic-bezier(0.28, 0.84, 0.42, 1);
}

/* Waving Arm Shake */
@keyframes waveHand {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(12deg); }
}

.anim-wave {
  animation: waveHand 0.4s ease-in-out 3;
}

/* Dialogue Cursor Blinking & Arrow Bouncing */
@keyframes promptBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.dialogue-indicator-arrow {
  animation: promptBounce 1s ease-in-out infinite;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background-color: var(--grad-crimson);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: cursorBlink 0.75s step-start infinite;
}

/* Sparkle / Glow Burst Effect Container */
.sparkle-particle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  animation: sparkleBurst 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes sparkleBurst {
  0% {
    transform: translate(0, 0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx, 40px), var(--ty, -50px)) scale(1.4);
    opacity: 0;
  }
}

/* Button Pulse for Call-to-Actions */
@keyframes btnPulse {
  0%, 100% {
    box-shadow: 0 6px 18px rgba(183, 28, 28, 0.28);
  }
  50% {
    box-shadow: 0 8px 26px rgba(183, 28, 28, 0.45);
  }
}

.btn-pulse {
  animation: btnPulse 2s infinite ease-in-out;
}

/* Reduced Motion Accessibility Mode */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mii-anim-idle, .mii-shadow-anim {
    animation: none !important;
  }
}