/* animations.css — keyframes for mascot, tiles, feedback */

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-14px); }
  65% { transform: translateY(-4px); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px) rotate(-4deg); }
  75% { transform: translateX(7px) rotate(4deg); }
}

/* Circular avatar — idle breathe + compact reactions (small px so the
   motion stays framed inside the 64px circle; scale parts are size-agnostic). */
@keyframes oyen-breathe {
  0%, 100% { transform: scale(1, 1) translateY(0); }
  50% { transform: scale(0.99, 1.016) translateY(-0.5px); }
}
@keyframes oyen-bounce {
  0% { transform: translateY(0) scale(1, 1); }
  14% { transform: translateY(2px) scale(1.06, 0.92); }   /* anticipation */
  40% { transform: translateY(-7px) scale(0.95, 1.08); }  /* stretch up */
  62% { transform: translateY(0) scale(1.07, 0.9); }      /* land squash */
  80% { transform: translateY(-2px) scale(0.99, 1.03); }  /* settle */
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes oyen-sad {
  0% { transform: translate(0, 0) rotate(0) scaleY(1); }
  18% { transform: translate(0, 2px) scaleY(0.97); }      /* slump */
  38% { transform: translate(-3px, 2px) rotate(-3deg); }
  60% { transform: translate(3px, 2px) rotate(2.5deg); }
  80% { transform: translate(-1px, 1px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0) scaleY(1); }
}
@keyframes oyen-celebrate {
  0% { transform: translateY(0) scale(1, 1) rotate(0); }
  14% { transform: translateY(5px) scale(1.07, 0.9); }            /* anticipation */
  38% { transform: translateY(-16px) scale(0.93, 1.1) rotate(-6deg); }
  58% { transform: translateY(-8px) rotate(5deg); }
  78% { transform: translateY(0) scale(1.08, 0.9) rotate(0); }    /* land squash */
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes tile-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes tile-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@keyframes pop-in {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes star-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes q-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes tile-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotateZ(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(115vh) rotateZ(720deg);
    opacity: 0.9;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}