/* ─────────────────────────────────────────────
   WonderBear Motion Tokens
   ───────────────────────────────────────────── */

:root {

  /* ── Duration ── */
  --wb-t-fast:   120ms; /* @kind other */
  --wb-t-base:   240ms; /* @kind other */
  --wb-t-slow:   400ms; /* @kind other */

  /* ── Easing ── */
  /* Standard decelerate — most transitions */
  --wb-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  /* Spring / elastic — focus pop, card press feedback */
  --wb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  /* Standard ease-in-out for loops */
  --wb-ease-inout: ease-in-out; /* @kind other */
}

/* ── Named keyframes ── */

/* Bear floating idle animation (focused menu cards, mascot deco) */
@keyframes wb-bear-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* OK-press pulse on bear art */
@keyframes wb-card-press {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28); }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Screen cross-fade transition */
@keyframes wb-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes wb-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Gentle sparkle spin (loading states) */
@keyframes wb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Coin bounce (reward animations) */
@keyframes wb-bounce {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-18px); }
  60%       { transform: translateY(-8px); }
}