/**
 * Animations CSS - Transitions and animations
 * Login transitions, creature movements, combat effects, etc.
 */

/* ============================================
   Login/Game Transition Animations
   ============================================ */
.login-fade-out {
  animation: fadeOut var(--theme-animation-slow) ease forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.game-fade-in {
  animation: fadeIn var(--theme-animation-slow) ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   Entity Animations
   ============================================ */

/* New entity entering room */
@keyframes highlight-new {
  0% {
    background: rgba(76, 175, 80, 0.3);
    transform: translateX(-10px);
    opacity: 0;
  }
  50% {
    background: rgba(76, 175, 80, 0.2);
  }
  100% {
    background: transparent;
    transform: translateX(0);
    opacity: 1;
  }
}

.highlight-new {
  animation: highlight-new 1s ease;
}

/* Entity leaving/dying */
@keyframes fade-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
}

.fade-out {
  animation: fade-out 0.3s ease forwards;
}

/* ============================================
   Combat Animations
   ============================================ */

/* Damage flash */
@keyframes damage-flash {
  0% {
    background: transparent;
  }
  25% {
    background: rgba(255, 0, 0, 0.3);
  }
  50% {
    background: transparent;
  }
  75% {
    background: rgba(255, 0, 0, 0.2);
  }
  100% {
    background: transparent;
  }
}

.damage-flash {
  animation: damage-flash 0.4s ease;
}

/* Heal flash */
@keyframes heal-flash {
  0% {
    background: transparent;
  }
  50% {
    background: rgba(0, 255, 0, 0.2);
    transform: scale(1.05);
  }
  100% {
    background: transparent;
    transform: scale(1);
  }
}

.heal-flash {
  animation: heal-flash 0.6s ease;
}

/* Critical hit */
@keyframes critical-hit {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.2) rotate(-5deg);
    color: var(--theme-combat-critical);
  }
  50% {
    transform: scale(1.1) rotate(5deg);
  }
  75% {
    transform: scale(1.15) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.critical-hit {
  animation: critical-hit 0.5s ease;
}

/* ============================================
   Message Animations
   ============================================ */

/* New message slide in */
@keyframes message-slide-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message {
  animation: message-slide-in 0.3s ease;
}

/* Important message pulse */
@keyframes message-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
    background: rgba(255, 255, 255, 0.05);
  }
}

.message.important {
  animation: message-pulse 1s ease 2;
}

/* ============================================
   UI Element Animations
   ============================================ */

/* Button press */
@keyframes button-press {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

button:active {
  animation: button-press 0.1s ease;
}

/* Stat bar change */
@keyframes stat-change {
  0% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
}

.stat-changed {
  animation: stat-change 0.5s ease;
}

/* Level up */
@keyframes level-up {
  0% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 0 rgba(156, 39, 176, 0);
  }
  25% {
    transform: scale(1.1) rotate(5deg);
  }
  50% {
    transform: scale(1.2) rotate(-5deg);
    box-shadow: 0 0 30px rgba(156, 39, 176, 0.6);
  }
  75% {
    transform: scale(1.1) rotate(3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 0 rgba(156, 39, 176, 0);
  }
}

.level-up {
  animation: level-up 1s ease;
}

/* ============================================
   Loading Animations
   ============================================ */

/* Dots loading */
@keyframes dots-loading {
  0% {
    content: '.';
  }
  33% {
    content: '..';
  }
  66% {
    content: '...';
  }
  100% {
    content: '.';
  }
}

.loading-dots::after {
  content: '.';
  animation: dots-loading 1.5s infinite;
}

/* Skeleton loading */
@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--theme-bg-secondary) 25%,
    var(--theme-bg-tertiary) 50%,
    var(--theme-bg-secondary) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

/* ============================================
   Buff/Debuff Animations
   ============================================ */

/* Buff applied */
@keyframes buff-applied {
  0% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(90deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.buff-applied {
  animation: buff-applied 0.5s ease;
}

/* Buff expiring */
@keyframes buff-expiring {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.buff-expiring {
  animation: buff-expiring 0.5s ease infinite;
}

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

.debuff-applied {
  animation: debuff-shake 0.5s ease;
}

/* Buff expired fade out */
@keyframes buff-expired {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

.buff-expired {
  animation: buff-expired 0.5s ease forwards;
}

/* ============================================
   Interactive Feedback
   ============================================ */

/* Click ripple */
@keyframes click-ripple {
  to {
    width: 40px;
    height: 40px;
    opacity: 0;
  }
}

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

/* Hover glow */
@keyframes hover-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
  }
  50% {
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
  }
}

.hover-glow:hover {
  animation: hover-glow 1s ease infinite;
}

/* ============================================
   Exit/Room Transitions
   ============================================ */

/* Room change */
@keyframes room-change {
  0% {
    opacity: 1;
    filter: blur(0);
  }
  50% {
    opacity: 0.5;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.room-changing {
  animation: room-change 0.5s ease;
}

/* Exit hover */
@keyframes exit-hover {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}

.exit:hover {
  animation: exit-hover 0.3s ease;
}

/* ============================================
   Error Animations
   ============================================ */

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

.error-shake {
  animation: error-shake 0.5s ease;
}

/* Warning pulse */
@keyframes warning-pulse {
  0%, 100% {
    background: var(--theme-warning);
    opacity: 0.3;
  }
  50% {
    background: var(--theme-warning);
    opacity: 0.6;
  }
}

.warning-pulse {
  animation: warning-pulse 1s ease infinite;
}