/**
 * HUD Color & Animation Enhancements
 * Behavioral Science-Driven Visual Feedback System
 * 
 * Principles Applied:
 * - Color-coded states for instant recognition
 * - Smooth transitions for visual feedback
 * - Pulsing/glowing effects for important changes
 * - Progress animations for dopamine hits
 * - Celebration effects for achievements
 */

/* ============================================
   COLOR SYSTEM - State-Based Colors
   ============================================ */

:root {
  /* Health Colors - Red to Green gradient */
  --health-critical: #ff0033;
  --health-low: #ff6600;
  --health-medium: #ffcc00;
  --health-high: #39ff14;
  --health-full: #00ff88;

  /* Stress Colors - Yellow to Red */
  --stress-none: #39ff14;
  --stress-low: #ffcc00;
  --stress-medium: #ff9900;
  --stress-high: #ff6600;
  --stress-critical: #ff0033;

  /* Wounds - Red scale */
  --wounds-none: #39ff14;
  --wounds-low: #ff9900;
  --wounds-medium: #ff6600;
  --wounds-high: #ff0033;

  /* Credits - Gold/Orange */
  --credits-low: #ff6600;
  --credits-medium: #ffaa00;
  --credits-high: #ffd700;
  --credits-wealthy: #ffff00;

  /* Reputation - Cyan to Purple gradient */
  --rep-low: #00ffff;
  --rep-medium: #00ccff;
  --rep-high: #0099ff;
  --rep-legendary: #ff00ff;

  /* Ship Systems */
  --hull-critical: #ff0033;
  --hull-low: #ff6600;
  --hull-medium: #ffcc00;
  --hull-high: #39ff14;

  --shields-low: #ff0033;
  --shields-medium: #ffcc00;
  --shields-high: #00ffff;

  --fuel-critical: #ff0033;
  --fuel-low: #ff9900;
  --fuel-medium: #ffcc00;
  --fuel-high: #39ff14;

  /* Status Colors */
  --status-success: #39ff14;
  --status-warning: #ffcc00;
  --status-danger: #ff0033;
  --status-info: #00ffff;
}

/* ============================================
   HEALTH BAR - Dynamic Color System
   ============================================ */

#hud-health-bar {
  transition:
    width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease,
    box-shadow 0.3s ease !important;
}

/* Health states with color transitions */
#hud-health-bar[data-health="critical"] {
  background: linear-gradient(
    90deg,
    var(--health-critical),
    #ff3366
  ) !important;
  box-shadow:
    0 0 15px rgba(255, 0, 51, 0.6),
    0 0 30px rgba(255, 0, 51, 0.3) !important;
  animation: pulse-critical 1s ease-in-out infinite !important;
}

#hud-health-bar[data-health="low"] {
  background: linear-gradient(90deg, var(--health-low), #ff8833) !important;
  box-shadow: 0 0 10px rgba(255, 102, 0, 0.4) !important;
}

#hud-health-bar[data-health="medium"] {
  background: linear-gradient(90deg, var(--health-medium), #ffdd33) !important;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.3) !important;
}

#hud-health-bar[data-health="high"] {
  background: linear-gradient(90deg, var(--health-high), #66ff88) !important;
  box-shadow: 0 0 6px rgba(57, 255, 20, 0.2) !important;
}

#hud-health-bar[data-health="full"] {
  background: linear-gradient(90deg, var(--health-full), #88ffaa) !important;
  box-shadow: 0 0 4px rgba(0, 255, 136, 0.2) !important;
}

/* Health value text color */
#hud-health-value {
  transition:
    color 0.3s ease,
    text-shadow 0.3s ease !important;
}

#hud-health-value[data-health="critical"] {
  color: var(--health-critical) !important;
  text-shadow: 0 0 10px rgba(255, 0, 51, 0.8) !important;
  animation: pulse-text 1s ease-in-out infinite !important;
}

#hud-health-value[data-health="low"] {
  color: var(--health-low) !important;
}

#hud-health-value[data-health="medium"] {
  color: var(--health-medium) !important;
}

#hud-health-value[data-health="high"] {
  color: var(--health-high) !important;
}

#hud-health-value[data-health="full"] {
  color: var(--health-full) !important;
}

/* ============================================
   STRESS TRACKER - Color-Coded Pips
   ============================================ */

#hud-stress {
  transition: color 0.3s ease !important;
}

#hud-stress[data-stress="0"] {
  color: var(--stress-none) !important;
}

#hud-stress[data-stress="1"] {
  color: var(--stress-low) !important;
}

#hud-stress[data-stress="2"] {
  color: var(--stress-medium) !important;
}

#hud-stress[data-stress="3"] {
  color: var(--stress-critical) !important;
  text-shadow: 0 0 10px rgba(255, 0, 51, 0.8) !important;
  animation: pulse-text 0.8s ease-in-out infinite !important;
}

/* Stress pips with color transitions */
#hud-stress-pips .pip {
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}

#hud-stress-pips .pip.active[data-stress-level="1"] {
  background: var(--stress-low) !important;
  border-color: var(--stress-low) !important;
  box-shadow: 0 0 6px rgba(255, 204, 0, 0.5) !important;
}

#hud-stress-pips .pip.active[data-stress-level="2"] {
  background: var(--stress-medium) !important;
  border-color: var(--stress-medium) !important;
  box-shadow: 0 0 8px rgba(255, 153, 0, 0.6) !important;
}

#hud-stress-pips .pip.active[data-stress-level="3"] {
  background: var(--stress-critical) !important;
  border-color: var(--stress-critical) !important;
  box-shadow: 0 0 10px rgba(255, 0, 51, 0.8) !important;
  animation: pulse-pip 0.8s ease-in-out infinite !important;
}

/* ============================================
   WOUNDS DISPLAY - Red Warning System
   ============================================ */

#hud-wounds-display {
  transition:
    opacity 0.3s ease,
    color 0.3s ease !important;
}

#hud-wounds-display[data-wounds="0"] {
  opacity: 0 !important;
}

#hud-wounds-display[data-wounds="1"] {
  color: var(--wounds-low) !important;
}

#hud-wounds-display[data-wounds="2"] {
  color: var(--wounds-medium) !important;
}

#hud-wounds-display[data-wounds="3"] {
  color: var(--wounds-high) !important;
  animation: pulse-text 1s ease-in-out infinite !important;
}

/* ============================================
   CREDITS - Gold/Orange Wealth Indicator
   ============================================ */

#hud-credits {
  transition:
    color 0.3s ease,
    text-shadow 0.3s ease !important;
}

#hud-credits[data-credits="low"] {
  color: var(--credits-low) !important;
}

#hud-credits[data-credits="medium"] {
  color: var(--credits-medium) !important;
}

#hud-credits[data-credits="high"] {
  color: var(--credits-high) !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5) !important;
}

#hud-credits[data-credits="wealthy"] {
  color: var(--credits-wealthy) !important;
  text-shadow: 0 0 12px rgba(255, 255, 0, 0.7) !important;
  animation: shimmer 2s ease-in-out infinite !important;
}

/* Credits update animation */
#hud-credits.credits-increase {
  animation: credits-pop 0.5s ease-out !important;
}

#hud-credits.credits-decrease {
  animation: credits-shake 0.5s ease-out !important;
}

/* ============================================
   REPUTATION - Cyan to Purple Gradient
   ============================================ */

#hud-reputation {
  transition:
    color 0.3s ease,
    text-shadow 0.3s ease !important;
}

#hud-reputation[data-rep="low"] {
  color: var(--rep-low) !important;
}

#hud-reputation[data-rep="medium"] {
  color: var(--rep-medium) !important;
}

#hud-reputation[data-rep="high"] {
  color: var(--rep-high) !important;
  text-shadow: 0 0 8px rgba(0, 153, 255, 0.5) !important;
}

#hud-reputation[data-rep="legendary"] {
  color: var(--rep-legendary) !important;
  text-shadow: 0 0 12px rgba(255, 0, 255, 0.7) !important;
  animation: shimmer 2s ease-in-out infinite !important;
}

/* ============================================
   ANIMATIONS - Behavioral Science Feedback
   ============================================ */

/* Pulse for critical states */
@keyframes pulse-critical {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

/* Pulse for text */
@keyframes pulse-text {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Pulse for stress pips */
@keyframes pulse-pip {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 0, 51, 0.8);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 15px rgba(255, 0, 51, 1);
  }
}

/* Shimmer for wealthy/legendary states */
@keyframes shimmer {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3);
  }
}

/* Credits increase pop */
@keyframes credits-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
    color: var(--status-success) !important;
  }
  100% {
    transform: scale(1);
  }
}

/* Credits decrease shake */
@keyframes credits-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

/* Progress bar fill animation */
@keyframes progress-fill {
  from {
    width: 0%;
  }
}

.progress-fill {
  animation: progress-fill 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Achievement unlock celebration */
@keyframes achievement-unlock {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

.achievement-unlock {
  animation: achievement-unlock 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* Level up celebration */
@keyframes level-up {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.5) hue-rotate(90deg);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.level-up {
  animation: level-up 0.8s ease-out !important;
}

/* Reward notification slide-in */
@keyframes reward-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.reward-notification {
  animation: reward-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover glow effect for interactive elements */
.hud-interactive:hover {
  transition: all 0.2s ease !important;
  box-shadow: 0 0 15px rgba(57, 255, 20, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* ============================================
   SHIP SYSTEMS - Color-Coded Status
   ============================================ */

/* Hull status colors */
.hull-bar[data-hull="critical"] {
  background: var(--hull-critical) !important;
  box-shadow: 0 0 15px rgba(255, 0, 51, 0.6) !important;
  animation: pulse-critical 1s ease-in-out infinite !important;
}

.hull-bar[data-hull="low"] {
  background: var(--hull-low) !important;
}

.hull-bar[data-hull="medium"] {
  background: var(--hull-medium) !important;
}

.hull-bar[data-hull="high"] {
  background: var(--hull-high) !important;
}

/* Shields status colors */
.shields-bar[data-shields="low"] {
  background: var(--shields-low) !important;
}

.shields-bar[data-shields="medium"] {
  background: var(--shields-medium) !important;
}

.shields-bar[data-shields="high"] {
  background: var(--shields-high) !important;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5) !important;
}

/* Fuel status colors */
.fuel-bar[data-fuel="critical"] {
  background: var(--fuel-critical) !important;
  box-shadow: 0 0 15px rgba(255, 0, 51, 0.6) !important;
  animation: pulse-critical 1s ease-in-out infinite !important;
}

.fuel-bar[data-fuel="low"] {
  background: var(--fuel-low) !important;
}

.fuel-bar[data-fuel="medium"] {
  background: var(--fuel-medium) !important;
}

.fuel-bar[data-fuel="high"] {
  background: var(--fuel-high) !important;
}

/* ============================================
   SMOOTH TRANSITIONS - All HUD Elements
   ============================================ */

.hud-module,
.hud-card,
.stat-item,
.bar-container,
.progress-track {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Value updates with smooth transitions */
.val,
.stat-value,
.bar-value {
  transition:
    color 0.3s ease,
    transform 0.2s ease !important;
}

/* ============================================
   FEEDBACK EFFECTS - User Actions
   ============================================ */

/* Button click feedback */
.hud-button:active {
  transform: scale(0.95) !important;
  transition: transform 0.1s ease !important;
}

/* Success feedback */
.success-feedback {
  animation: success-pulse 0.5s ease-out !important;
}

@keyframes success-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(57, 255, 20, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(57, 255, 20, 0);
  }
}

/* Warning feedback */
.warning-feedback {
  animation: warning-shake 0.5s ease-out !important;
}

@keyframes warning-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(2px);
  }
}

/* ============================================
   PROGRESS INDICATORS - Visual Feedback
   ============================================ */

/* XP bar fill animation */
.xp-bar-fill {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: linear-gradient(90deg, #39ff14, #00ff88) !important;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.5) !important;
}

/* Level up flash */
.level-up-flash {
  animation: level-up-flash 1s ease-out !important;
}

@keyframes level-up-flash {
  0% {
    background: rgba(57, 255, 20, 0);
  }
  50% {
    background: rgba(57, 255, 20, 0.3);
  }
  100% {
    background: rgba(57, 255, 20, 0);
  }
}