/* ============================================================
   ДОСТИГАТОР — Анимации и переходы
   ============================================================ */

/* ------------------------------------------------------------
   Пульс для горящих задач (< 24 часа)
   ------------------------------------------------------------ */
@keyframes pulse-red {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(239, 68, 68, 0.15);
  }
}

.animate-pulse-red {
  animation: pulse-red 1.5s ease-in-out infinite;
}

/* ------------------------------------------------------------
   Падение монет (штраф)
   ------------------------------------------------------------ */
@keyframes coin-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
  70% {
    opacity: 0.8;
    transform: translateY(60px) rotate(360deg) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateY(100px) rotate(540deg) scale(0.3);
  }
}

.animate-coin-fall {
  animation: coin-fall 1s ease-in forwards;
}

/* ------------------------------------------------------------
   Взрыв конфетти (успех)
   ------------------------------------------------------------ */
@keyframes success-burst {
  0% {
    opacity: 1;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) rotate(360deg);
  }
}

.animate-success-burst {
  animation: success-burst 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ------------------------------------------------------------
   Частицы золота (награда за монеты)
   ------------------------------------------------------------ */
@keyframes gold-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx, 50px), var(--ty, -80px)) scale(0);
  }
}

.gold-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-gold);
  pointer-events: none;
  animation: gold-particle 0.8s ease-out forwards;
}

/* ------------------------------------------------------------
   Пульсация glow для важных элементов
   ------------------------------------------------------------ */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(124, 58, 237, 0.5);
  }
}

.animate-glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* ------------------------------------------------------------
   Пульсация текста (дедлайн)
   ------------------------------------------------------------ */
@keyframes text-pulse-red {
  0%, 100% {
    color: var(--accent-red);
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
  }
  50% {
    color: #ff6b6b;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.8);
  }
}

.animate-text-pulse {
  animation: text-pulse-red 1s ease-in-out infinite;
}

/* ------------------------------------------------------------
   Spring-эффект для кнопок (при наведении)
   ------------------------------------------------------------ */
@keyframes spring-bounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.1); }
  50% { transform: scale(0.95); }
  70% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.animate-spring {
  animation: spring-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ------------------------------------------------------------
   Вращение (loader)
   ------------------------------------------------------------ */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ------------------------------------------------------------
   Затухание
   ------------------------------------------------------------ */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

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

/* ------------------------------------------------------------
   Слайд вверх
   ------------------------------------------------------------ */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ------------------------------------------------------------
   Слайд вправо
   ------------------------------------------------------------ */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out;
}

/* ------------------------------------------------------------
   Pop (появление модального окна)
   ------------------------------------------------------------ */
@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  70% {
    transform: translate(-50%, -50%) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.animate-pop-in {
  animation: pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ------------------------------------------------------------
   Shake (ошибка)
   ------------------------------------------------------------ */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

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

/* ------------------------------------------------------------
   Counter (анимация счётчика)
   ------------------------------------------------------------ */
@keyframes counter-up {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-counter {
  animation: counter-up 0.3s ease-out;
  display: inline-block;
}

/* ------------------------------------------------------------
   Typing indicator (три точки)
   ------------------------------------------------------------ */
@keyframes typing-dot {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
}

.typing-indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-purple);
}

.typing-indicator__dot:nth-child(1) {
  animation: typing-dot 1.2s ease-in-out infinite;
}
.typing-indicator__dot:nth-child(2) {
  animation: typing-dot 1.2s ease-in-out 0.2s infinite;
}
.typing-indicator__dot:nth-child(3) {
  animation: typing-dot 1.2s ease-in-out 0.4s infinite;
}

/* ------------------------------------------------------------
   Задержки анимаций
   ------------------------------------------------------------ */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* ------------------------------------------------------------
   Reduced Motion (доступность)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}