/**
 * Modern animations for blackjack v2.0
 * Smooth transitions and celebration effects
 */

/* =========================
   CARD DEALING ANIMATIONS (Refined & Subtle)
   ========================= */
@keyframes dealCard {
  0% {
    transform: translateY(-30px) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes flipCard {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

.card.dealing {
  animation: dealCard 0.4s ease-out;
}

.card.flipping {
  animation: flipCard 0.5s ease-in-out;
}

/* =========================
   CHIP ANIMATIONS
   ========================= */
@keyframes chipWin {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2) translateY(-5px);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes chipLose {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
  }
}

.chips.winning {
  animation: chipWin 0.5s ease-in-out;
}

.chips.losing {
  animation: chipLose 0.4s ease-out;
}

/* =========================
   BLACKJACK WIN CELEBRATION (Very Subtle)
   ========================= */
@keyframes blackjackGlow {
  0%, 100% {
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.12),
                0 0 12px rgba(255, 215, 0, 0.06);
  }
  50% {
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.15),
                0 0 14px rgba(255, 215, 0, 0.08);
  }
}

@keyframes celebrationPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.01);
  }
}

.player-spot.blackjack-win {
  animation: blackjackGlow 2s ease-in-out infinite,
             celebrationPulse 1s ease-in-out;
  border-color: var(--blackjack) !important;
}

/* =========================
   BUTTON PRESS EFFECTS
   ========================= */
@keyframes buttonPress {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

button:active,
.action-btn:active {
  animation: buttonPress 0.2s ease-out;
}

/* =========================
   RIPPLE EFFECT
   ========================= */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  width: 20px;
  height: 20px;
  pointer-events: none;
  animation: ripple 0.6s ease-out;
}

/* =========================
   MODAL ANIMATIONS - DISABLED FOR LOGIN
   ========================= */
@keyframes modalSlideIn {
  0% {
    transform: translateY(30px) scale(0.95);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes modalFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* No animations for modals - instant display */
.modal:not(.hidden) {
  /* animation removed */
}

.modal-content {
  /* animation removed */
}

/* =========================
   CHAT SLIDE ANIMATIONS
   ========================= */
@keyframes chatSlideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes chatSlideDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

#chat-panel.open {
  animation: chatSlideUp 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

#chat-panel.closing {
  animation: chatSlideDown 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* =========================
   LOADING ANIMATIONS
   ========================= */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.loading-spinner {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--gold);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
}

.loading-dots span {
  animation: pulse 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

/* =========================
   NOTIFICATION ANIMATIONS
   ========================= */
@keyframes slideInRight {
  0% {
    transform: translateX(400px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(400px);
    opacity: 0;
  }
}

.notification.show {
  animation: slideInRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.notification.hide {
  animation: slideOutRight 0.3s ease-in;
}

/* =========================
   BADGE BOUNCE
   ========================= */
@keyframes badgeBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.bj-chat-badge {
  animation: badgeBounce 0.5s ease-in-out;
}

/* =========================
   GLOW EFFECTS (Very Subtle)
   ========================= */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.1),
                0 0 8px rgba(255, 215, 0, 0.05);
  }
  50% {
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.12),
                0 0 10px rgba(255, 215, 0, 0.06);
  }
}

.active-player {
  animation: glow 3s ease-in-out infinite;
}

/* =========================
   TURN INDICATOR PULSE
   ========================= */
@keyframes turnPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.turn-indicator {
  animation: turnPulse 1.5s ease-in-out infinite;
}

/* =========================
   FLOATING ANIMATION
   ========================= */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.floating {
  animation: float 3s ease-in-out infinite;
}

/* =========================
   SHAKE ANIMATION (for errors)
   ========================= */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

/* =========================
   FADE TRANSITIONS
   ========================= */
.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity var(--transition-base);
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity var(--transition-base);
}

/* =========================
   ACCESSIBILITY - REDUCED MOTION
   ========================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}