/* ==========================================================================
   ONE-COMPANION 3D KID SYSTEM (ADAM & LINA) STYLES
   ========================================================================== */

.kid-companion-stage {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.kid-companion-avatar-wrapper {
  position: relative;
  width: 160px;
  height: 200px;
  flex-shrink: 0;
}

.kid-companion-avatar {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  user-select: none;
}

.kid-companion-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 16px 28px rgba(15, 23, 42, 0.28));
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.3s ease;
}

/* Pose Animation Classes */
.companion-pose-idle {
  animation: companionBreath 3.5s ease-in-out infinite alternate;
}

.companion-pose-welcome {
  animation: companionWave 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2 alternate;
}

.companion-pose-ready {
  animation: companionReadyPulse 1.5s ease-in-out infinite alternate;
}

.companion-pose-correct {
  animation: companionHappyJump 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.3) 2 alternate !important;
}

.companion-pose-correct-streak {
  animation: companionStreakDance 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.3) infinite alternate !important;
}

.companion-pose-mastery {
  animation: companionPowerPose 1.4s ease-in-out forwards !important;
}

.companion-pose-wrong {
  animation: companionGentledown 0.4s ease-out forwards !important;
}

.companion-pose-retry {
  animation: companionEncourage 0.8s ease-in-out forwards !important;
}

.companion-pose-hint {
  animation: companionIdeaSpark 1.2s ease-in-out forwards !important;
}

.companion-pose-thinking {
  animation: companionThinkLook 2s ease-in-out infinite alternate;
}

.companion-pose-complete {
  animation: companionVictoryDance 1.5s ease-in-out infinite alternate !important;
}

.companion-pose-break {
  animation: companionStretch 2.5s ease-in-out infinite alternate;
}

/* Keyframe Animations */
@keyframes companionBreath {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-3px) scale(1.02, 0.98); }
}

@keyframes companionWave {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-6deg); }
  100% { transform: translateY(0) rotate(4deg); }
}

@keyframes companionReadyPulse {
  0% { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1.05); filter: brightness(1.08); }
}

@keyframes companionHappyJump {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-16px) scale(1.1, 0.9) rotate(-3deg); }
  80% { transform: translateY(-4px) scale(0.95, 1.05) rotate(2deg); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes companionStreakDance {
  0% { transform: translateY(0) rotate(-5deg) scale(1); }
  50% { transform: translateY(-18px) rotate(6deg) scale(1.12); }
  100% { transform: translateY(-4px) rotate(-4deg) scale(1.04); }
}

@keyframes companionPowerPose {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); box-shadow: 0 0 25px var(--companion-main-color, #2563EB); }
  100% { transform: scale(1.08); }
}

@keyframes companionGentledown {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px) scale(0.96); filter: brightness(0.95); }
}

@keyframes companionEncourage {
  0% { transform: scale(0.96); }
  50% { transform: translateY(-6px) scale(1.08) rotate(3deg); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes companionIdeaSpark {
  0% { transform: scale(1); }
  50% { transform: translateY(-8px) scale(1.12); }
  100% { transform: scale(1.04); }
}

@keyframes companionThinkLook {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-4deg) translateY(-2px); }
}

@keyframes companionVictoryDance {
  0% { transform: translateY(0) rotate(-6deg) scale(1); }
  50% { transform: translateY(-20px) rotate(6deg) scale(1.15); }
  100% { transform: translateY(0) rotate(-4deg) scale(1); }
}

@keyframes companionStretch {
  0% { transform: scale(1); }
  50% { transform: translateY(-4px) scale(1.06, 0.95); }
  100% { transform: scale(1); }
}

/* Micro-Labels */
.companion-micro-label {
  position: absolute;
  top: -24px;
  right: 50%;
  transform: translateX(50%) scale(0.8);
  background: var(--companion-main-color, #2563EB);
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: microLabelPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.3) forwards;
  z-index: 100;
}

@keyframes microLabelPop {
  0% { transform: translateX(50%) translateY(8px) scale(0.6); opacity: 0; }
  30% { transform: translateX(50%) translateY(-6px) scale(1.15); opacity: 1; }
  80% { opacity: 1; transform: translateX(50%) translateY(-4px) scale(1); }
  100% { transform: translateX(50%) translateY(-10px) scale(0.9); opacity: 0; }
}

/* Energy Orb Animation */
.companion-energy-orb {
  position: fixed;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fde047 0%, #eab308 100%);
  box-shadow: 0 0 12px #fde047, 0 0 24px #eab308;
  pointer-events: none;
  z-index: 10000;
  transition: transform 0.65s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.65s ease;
}

/* Minimal Micro-Feedback Banner (<details>) */
.micro-feedback {
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: var(--border-radius-sm, 8px);
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  animation: microSlideIn 0.3s ease-out forwards;
}

.micro-feedback.correct {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.micro-feedback.retry {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.micro-feedback details {
  cursor: pointer;
}

.micro-feedback summary {
  font-size: 0.85rem;
  color: var(--color-primary, #2563EB);
  font-weight: 800;
  outline: none;
  user-select: none;
}

.micro-feedback details[open] summary {
  margin-bottom: 4px;
}

.micro-feedback p {
  margin: 4px 0 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  color: #1e293b;
}

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

/* Reduced Motion Safeguards */
body.reduced-motion .kid-companion-avatar,
@media (prefers-reduced-motion: reduce) {
  .companion-pose-idle,
  .companion-pose-welcome,
  .companion-pose-ready,
  .companion-pose-correct,
  .companion-pose-correct-streak,
  .companion-pose-mastery,
  .companion-pose-wrong,
  .companion-pose-retry,
  .companion-pose-hint,
  .companion-pose-thinking,
  .companion-pose-complete,
  .companion-pose-break {
    animation: none !important;
    transform: none !important;
  }
  .companion-energy-orb {
    display: none !important;
  }
}