/* animations.css - Smooth Game Animations for Fair Hearts */

@keyframes dealSlideIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.anim-deal {
  animation: dealSlideIn 0.22s ease-out;
}

/* ========================================================
   CARD PLAY TOSS ANIMATIONS FROM PLAYER STATIONS TO TABLE
   ======================================================== */

@keyframes tossFromSouth {
  0% {
    opacity: 0.2;
    transform: translateY(150px) scale(0.6) rotate(4deg);
  }
  75% {
    transform: translateY(-4px) scale(1.04) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes tossFromWest {
  0% {
    opacity: 0.2;
    transform: translateX(-180px) scale(0.6) rotate(-8deg);
  }
  75% {
    transform: translateX(4px) scale(1.04) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
  }
}

@keyframes tossFromNorth {
  0% {
    opacity: 0.2;
    transform: translateY(-140px) scale(0.6) rotate(-4deg);
  }
  75% {
    transform: translateY(4px) scale(1.04) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes tossFromEast {
  0% {
    opacity: 0.2;
    transform: translateX(180px) scale(0.6) rotate(8deg);
  }
  75% {
    transform: translateX(-4px) scale(1.04) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
  }
}

.toss-from-0 { animation: tossFromSouth 0.32s cubic-bezier(0.18, 0.9, 0.28, 1) forwards !important; }
.toss-from-1 { animation: tossFromWest 0.32s cubic-bezier(0.18, 0.9, 0.28, 1) forwards !important; }
.toss-from-2 { animation: tossFromNorth 0.32s cubic-bezier(0.18, 0.9, 0.28, 1) forwards !important; }
.toss-from-3 { animation: tossFromEast 0.32s cubic-bezier(0.18, 0.9, 0.28, 1) forwards !important; }

/* ========================================================
   TRICK SWIPE COLLECTION ANIMATIONS TO WINNING PLAYER SEAT
   ======================================================== */

@keyframes sweepToSouth {
  0% {
    opacity: 1;
    transform: scale(1) translate(0, 0);
  }
  30% {
    transform: scale(0.9) translate(0, 10px);
  }
  100% {
    opacity: 0;
    transform: scale(0.2) translate(0, 190px);
  }
}

@keyframes sweepToWest {
  0% {
    opacity: 1;
    transform: scale(1) translate(0, 0);
  }
  30% {
    transform: scale(0.9) translate(-10px, 0);
  }
  100% {
    opacity: 0;
    transform: scale(0.2) translate(-230px, 0);
  }
}

@keyframes sweepToNorth {
  0% {
    opacity: 1;
    transform: scale(1) translate(0, 0);
  }
  30% {
    transform: scale(0.9) translate(0, -10px);
  }
  100% {
    opacity: 0;
    transform: scale(0.2) translate(0, -180px);
  }
}

@keyframes sweepToEast {
  0% {
    opacity: 1;
    transform: scale(1) translate(0, 0);
  }
  30% {
    transform: scale(0.9) translate(10px, 0);
  }
  100% {
    opacity: 0;
    transform: scale(0.2) translate(230px, 0);
  }
}

.sweep-to-0 { animation: sweepToSouth 0.5s cubic-bezier(0.35, 0, 0.2, 1) forwards !important; }
.sweep-to-1 { animation: sweepToWest 0.5s cubic-bezier(0.35, 0, 0.2, 1) forwards !important; }
.sweep-to-2 { animation: sweepToNorth 0.5s cubic-bezier(0.35, 0, 0.2, 1) forwards !important; }
.sweep-to-3 { animation: sweepToEast 0.5s cubic-bezier(0.35, 0, 0.2, 1) forwards !important; }

/* Winner Player Tag Celebratory Pulse */
@keyframes winnerTagPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); box-shadow: 0 0 24px var(--gold); }
  100% { transform: scale(1); }
}

.winner-tag-bounce {
  animation: winnerTagPulse 0.65s ease-out !important;
}

/* Active Turn Pulse Indicator */
@keyframes activePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
}

.player-tag.is-active-turn {
  animation: activePulse 1.8s infinite;
}

/* Hearts Broken Dramatic Flash */
@keyframes heartsBrokenFlash {
  0% {
    background-color: rgba(220, 38, 38, 0.35);
  }
  100% {
    background-color: transparent;
  }
}

.hearts-broken-alert {
  animation: heartsBrokenFlash 0.9s ease-out forwards;
}

/* Shoot The Moon Celebration Burst */
@keyframes moonGlow {
  0%, 100% {
    filter: drop-shadow(0 0 15px #f59e0b) drop-shadow(0 0 35px #ef4444);
  }
  50% {
    filter: drop-shadow(0 0 30px #f59e0b) drop-shadow(0 0 60px #ef4444);
  }
}

.moon-shot-banner {
  animation: moonGlow 1.5s infinite alternate;
}

/* Real-Time GPU-Accelerated 3D Flying Card (FLIP Architecture) */
.flying-card-3d {
  position: fixed !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  perspective: 1200px !important;
  will-change: transform, box-shadow !important;
  border-radius: var(--card-radius);
}

.flying-card-3d .fcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  border-radius: var(--card-radius);
}

.flying-card-3d .fcard-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--card-radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.flying-card-3d .fcard-front {
  transform: rotateY(0deg);
}

.flying-card-3d .fcard-back {
  transform: rotateY(180deg);
}

.flying-card-3d img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--card-radius);
  display: block;
  pointer-events: none;
}

/* Dynamic GPU Flying Card for Trick Sweeps & Passing */
.flying-card-sweep {
  position: fixed !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  border-radius: var(--card-radius);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5) !important;
  will-change: transform, opacity !important;
  display: block !important;
  overflow: hidden !important;
  transform-origin: center center !important;
}

.flying-card-sweep img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: var(--card-radius);
}