/* Kinetics — spring-physics micro-interactions for touch feedback,
   modeled on the ckissi/kinetics gallery patterns (copy-paste CSS gallery,
   so these are the project's vendored equivalents, driven by kinetics.js).
   Classes are added/removed by JS; nothing here is decorative-only —
   each maps to a game event: press, drop-snap, revert-shake, arrival. */

@keyframes kin-press {
  0% { transform: scale(1); }
  40% { transform: scale(0.94); }
  100% { transform: scale(0.97); }
}
@keyframes kin-release {
  0% { transform: scale(0.97); }
  55% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
@keyframes kin-snap {
  0% { transform: scale(1); }
  35% { transform: scale(0.92); }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes kin-shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
@keyframes kin-rise {
  0% { opacity: 0; transform: translateY(8px); }
  60% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes kin-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.kin-press { animation: kin-press 0.12s ease-out both; }
.kin-release { animation: kin-release 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.kin-snap { animation: kin-snap 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.kin-shake { animation: kin-shake 0.32s ease both; }
.kin-rise { animation: kin-rise 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.kin-pop { animation: kin-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ── rich layer ── */
@keyframes kin-slide-in {
  0% { opacity: 0; transform: translateY(10px) scale(0.97); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kin-float {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.8); }
  25% { opacity: 1; transform: translate(-50%, -10px) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -34px) scale(1); }
}
@keyframes kin-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@keyframes kin-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes kin-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes kin-shine {
  0% { background-position: -160% 0; }
  100% { background-position: 260% 0; }
}
@keyframes kin-modal-in {
  0% { opacity: 0; transform: translateY(14px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kin-backdrop-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.kin-slide-in { animation: kin-slide-in 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.kin-float {
  position: fixed; z-index: 300; pointer-events: none;
  font: 700 20px/1 var(--font-family-sans); color: var(--color-success, var(--color-link-deep));
  text-shadow: 0 1px 0 var(--color-canvas-elevated);
  animation: kin-float 0.9s ease-out both;
}
.kin-float[data-ok="false"] { color: var(--color-mute); }
.kin-bump { animation: kin-bump 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.kin-pulse { animation: kin-pulse 1s ease-in-out infinite; }
.kin-breathe { animation: kin-breathe 1.1s ease-in-out infinite; }
.kin-modal-in { animation: kin-modal-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.kin-backdrop-in { animation: kin-backdrop-in 0.2s ease both; }

/* winner shine: gradient sweep across the row */
.kin-celebrate .player-name, .kin-celebrate-first .player-name {
  background: linear-gradient(100deg, transparent 20%, var(--color-link) 50%, transparent 80%) no-repeat;
  background-size: 160% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: kin-shine 1.6s ease-in-out 2;
}

@media (prefers-reduced-motion: reduce) {
  .kin-press, .kin-release, .kin-snap, .kin-shake, .kin-rise, .kin-pop,
  .kin-slide-in, .kin-float, .kin-bump, .kin-pulse, .kin-breathe,
  .kin-modal-in, .kin-backdrop-in,
  .kin-celebrate .player-name, .kin-celebrate-first .player-name { animation: none; }
}