/* ==========================================================================
   Bulls & Cows: Visual Effects & Keyframe Animations
   ========================================================================== */

/* 3D Card Flip */
.card-slot {
  perspective: 600px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-slot.card-concealed .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-back {
  transform: rotateY(180deg);
}

/* Slide in animation */
.animate-slide-in {
  animation: slideInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-out {
  animation: fadeOut 0.4s ease forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.92);
  }
}

/* Pulsing indicators */
.pulse-indicator {
  animation: gentlePulse 2s infinite ease-in-out;
}

@keyframes gentlePulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Thinking Indicator for AI Bot */
.ai-thinking-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(147, 51, 234, 0.15);
  border: 1px solid rgba(147, 51, 234, 0.4);
  color: #c084fc;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 12px;
  width: fit-content;
}

.ai-dot-flashing {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #c084fc;
  animation: dotFlashing 1s infinite alternate;
}

@keyframes dotFlashing {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}