/* Incoming state only. JS adds these once per meaningful public key change. */
.is-motion-phase { animation: game-phase-in 260ms var(--vd-ease) both; }
.is-motion-reveal { animation: game-reveal-in 300ms var(--vd-ease) both; }
.is-motion-deal { animation: game-deal-in 280ms var(--vd-ease) both; }
.is-motion-bid { animation: game-bid-in 240ms var(--vd-ease) both; }
.is-motion-score { animation: game-score-in 220ms var(--vd-ease) both; }
.is-motion-join { animation: game-join-in 280ms var(--vd-ease) both; }
@keyframes game-phase-in { from { opacity: .6; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes game-reveal-in { from { opacity: .5; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes game-deal-in { from { opacity: .5; transform: translateY(10px) rotate(-1deg); } to { opacity: 1; transform: none; } }
@keyframes game-bid-in { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: none; } }
@keyframes game-score-in { 0% { transform: translateY(3px); } 55% { transform: translateY(-2px); } 100% { transform: none; } }
@keyframes game-join-in { from { opacity: .4; transform: translateY(7px) scale(.96); } to { opacity: 1; transform: none; } }
@media(prefers-reduced-motion:reduce) { [class*="is-motion-"] { animation: none!important; } }