/*
 * animations.css
 * Reusable CSS animations: the flying card overlay element (#fly-card) used when
 * a card travels from a player's hand to the trick area.
 *
 * Other game animations (@keyframes dealFly, cardSweep, cardFloat, etc.) live
 * inline with their associated rules in layout.css, card-themes.css, and overlays.css
 * to keep them close to the CSS they animate.
 *
 * Reuse in another card game: keep #fly-card as-is — it's game-agnostic.
 */

/* ── Flying card overlay ── */
/* This invisible element gets positioned and animated by flyCard() in core/animations.js */
/* It shows a card image flying across the screen from hand to trick area */
#fly-card {
  position: fixed; z-index: 90; pointer-events: none;
  width: var(--card-w); height: var(--card-h);
  display: none; align-items: center; justify-content: center; font-size: 26px;
}
#fly-card.active { display: flex; }
@keyframes flyAnim {
  0%   { opacity:1; transform:translate(0,0) scale(1); }
  100% { opacity:0; transform:translate(var(--dx),var(--dy)) scale(0.9); }
}
#fly-card.flying { animation: flyAnim .28s linear forwards; }