/* ═══════════════════════════════════════════════════════════
   Floating Bridge – Card Animations
   CSS @keyframes and utility classes for card transitions.
   ═══════════════════════════════════════════════════════════ */

/* ── Card Play: slide from hand to trick slot ────────────── */
@keyframes card-slide-in-bottom {
  0% {
    transform: translateY(120px) scale(0.7);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes card-slide-in-top {
  0% {
    transform: translateY(-120px) scale(0.7);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes card-slide-in-left {
  0% {
    transform: translateX(-120px) scale(0.7);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes card-slide-in-right {
  0% {
    transform: translateX(120px) scale(0.7);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* Applied to cards placed in trick slots */
.anim-card-play-bottom {
  animation: card-slide-in-bottom 300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.anim-card-play-top {
  animation: card-slide-in-top 300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.anim-card-play-left {
  animation: card-slide-in-left 300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.anim-card-play-right {
  animation: card-slide-in-right 300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* ── Trick Win: cards slide toward the winner's seat ─────── */
@keyframes trick-collect-top {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(0, -80px) scale(0.5); opacity: 0; }
}
@keyframes trick-collect-bottom {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(0, 80px) scale(0.5); opacity: 0; }
}
@keyframes trick-collect-left {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-80px, 0) scale(0.5); opacity: 0; }
}
@keyframes trick-collect-right {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(80px, 0) scale(0.5); opacity: 0; }
}

.anim-trick-collect-top .card {
  animation: trick-collect-top 400ms cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
.anim-trick-collect-bottom .card {
  animation: trick-collect-bottom 400ms cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
.anim-trick-collect-left .card {
  animation: trick-collect-left 400ms cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
.anim-trick-collect-right .card {
  animation: trick-collect-right 400ms cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

/* ── Deal: cards fly from center to each player ──────────── */
@keyframes deal-to-bottom {
  0% {
    transform: translate(-50%, -50%) scale(0.3) rotate(10deg);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes deal-to-top {
  0% {
    transform: translate(50%, 50%) scale(0.3) rotate(-10deg);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes deal-to-left {
  0% {
    transform: translate(80px, 0) scale(0.3) rotate(15deg);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes deal-to-right {
  0% {
    transform: translate(-80px, 0) scale(0.3) rotate(-15deg);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

.anim-deal-bottom {
  animation: deal-to-bottom 350ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.anim-deal-top {
  animation: deal-to-top 350ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.anim-deal-left {
  animation: deal-to-left 350ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.anim-deal-right {
  animation: deal-to-right 350ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ── Card departure from hand (shrinks and fades) ────────── */
@keyframes card-depart {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.5); opacity: 0; max-width: 0; margin: 0; padding: 0; }
}

.anim-card-depart {
  animation: card-depart 200ms ease-in forwards;
  pointer-events: none;
}

/* ── Winner highlight pulse ──────────────────────────────── */
@keyframes winner-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(240, 192, 64, 0.3); }
  50% { box-shadow: 0 0 24px rgba(240, 192, 64, 0.8); }
}

.anim-winner-highlight {
  animation: winner-pulse 600ms ease-in-out 2;
  border-color: var(--gold) !important;
}

/* ── Reduce motion preference ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .anim-card-play-bottom,
  .anim-card-play-top,
  .anim-card-play-left,
  .anim-card-play-right,
  .anim-trick-collect-top,
  .anim-trick-collect-bottom,
  .anim-trick-collect-left,
  .anim-trick-collect-right,
  .anim-deal-bottom,
  .anim-deal-top,
  .anim-deal-left,
  .anim-deal-right,
  .anim-card-depart,
  .anim-winner-highlight {
    animation: none !important;
  }
}