/* ============================================================
   НОЧЬ ЧЕРНИЛЬНЫХ КЛЯКС — Animations v1.0
   Отдельный файл анимаций. Подключается после components.css
   ============================================================ */

/* ============================================================
   1. БАЗОВЫЕ ПОЯВЛЕНИЯ / ИСЧЕЗНОВЕНИЯ
   ============================================================ */

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fade in + вверх (для карточек, блоков) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade in + вниз (для тостов сверху) */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade in + слева (для сайдбаров, чата) */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Fade in + справа */
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Scale in (для модалок, наград) */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Scale in с пружиной */
@keyframes scaleInSpring {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* Исчезновение */
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ============================================================
   2. УТИЛИТЫ ПОЯВЛЕНИЯ
   ============================================================ */
.anim-fade       { animation: fadeIn      var(--dur-mid) var(--ease-ui) both; }
.anim-fade-up    { animation: fadeInUp    var(--dur-mid) var(--ease-ui) both; }
.anim-fade-down  { animation: fadeInDown  var(--dur-mid) var(--ease-ui) both; }
.anim-fade-left  { animation: fadeInLeft  var(--dur-mid) var(--ease-ui) both; }
.anim-fade-right { animation: fadeInRight var(--dur-mid) var(--ease-ui) both; }
.anim-scale      { animation: scaleIn     var(--dur-mid) var(--ease-ui) both; }
.anim-spring     { animation: scaleInSpring var(--dur-slow) var(--ease-spring) both; }

/* Задержки (stagger) */
.anim-d1 { animation-delay: 80ms; }
.anim-d2 { animation-delay: 160ms; }
.anim-d3 { animation-delay: 240ms; }
.anim-d4 { animation-delay: 320ms; }
.anim-d5 { animation-delay: 400ms; }
.anim-d6 { animation-delay: 480ms; }

/* ============================================================
   3. СВЕЧЕНИЕ / ПУЛЬСАЦИЯ
   ============================================================ */

/* Мягкая пульсация свечения (для игровых элементов) */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 16px rgba(255, 179, 71, 0.35);
  }
  50% {
    box-shadow: 0 0 32px rgba(255, 179, 71, 0.65);
  }
}
.anim-glow {
  animation: glowPulse 2.5s ease-in-out infinite;
}

/* Пульсация яркости (для иконок) */
@keyframes brightPulse {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50%      { opacity: 0.85; filter: brightness(1.3); }
}
.anim-bright {
  animation: brightPulse 1.8s ease-in-out infinite;
}

/* Магическое кольцо (вокруг аватара питомца) */
@keyframes ringPulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  50%  { transform: scale(1.15); opacity: 0.4; }
  100% { transform: scale(1.3);  opacity: 0; }
}
.anim-ring {
  position: relative;
}
.anim-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid var(--amber-400);
  animation: ringPulse 2s ease-out infinite;
  pointer-events: none;
}

/* ============================================================
   4. SHIMMER / ПЕРЕЛИВАНИЕ
   ============================================================ */

/* Переливание градиента (для кнопки «В бой», карточек награды) */
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.anim-shimmer {
  background-size: 200% 100%;
  animation: shimmer 4s ease-in-out infinite;
}

/* Бегущий блик (для скелетонов, прогресс-баров) */
@keyframes shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.anim-shine {
  position: relative;
  overflow: hidden;
}
.anim-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent);
  animation: shine 2.5s ease-in-out infinite;
  pointer-events: none;
}

/* ============================================================
   5. ВРАЩЕНИЕ
   ============================================================ */

/* Обычное вращение (для спиннеров) */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.anim-spin {
  animation: spin 0.9s linear infinite;
}

/* Медленное вращение руны (магия) */
@keyframes spinSlow {
  to { transform: rotate(360deg); }
}
.anim-spin-slow {
  animation: spinSlow 12s linear infinite;
}

/* Вращение туда-сюда (лёгкое покачивание) */
@keyframes rock {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
.anim-rock {
  animation: rock 2.5s ease-in-out infinite;
  transform-origin: 50% 100%;
}

/* ============================================================
   6. ПАРЕНИЕ (для питомцев, иконок, наград)
   ============================================================ */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.anim-float {
  animation: float 3s ease-in-out infinite;
}

/* Более выраженное парение */
@keyframes floatBig {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(3deg); }
}
.anim-float-big {
  animation: floatBig 4s ease-in-out infinite;
}

/* ============================================================
   7. ДЫХАНИЕ (для аватаров, важных кнопок)
   ============================================================ */

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.anim-breathe {
  animation: breathe 3.5s ease-in-out infinite;
}

/* ============================================================
   8. КЛЯКСЫ / ЧЕРНИЛА
   ============================================================ */

/* Растекание кляксы (появление) */
@keyframes blotSpread {
  0% {
    transform: scale(0.3);
    opacity: 0;
    filter: blur(8px);
  }
  60% {
    transform: scale(1.05);
    opacity: 0.9;
    filter: blur(0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.anim-blot {
  animation: blotSpread var(--dur-slow) var(--ease-spring) both;
}

/* Пульсация кляксы-питомца (дыхание) */
@keyframes blotBreathe {
  0%, 100% {
    border-radius: 50% 40% 55% 45% / 50% 55% 45% 50%;
    transform: scale(1);
  }
  50% {
    border-radius: 45% 55% 48% 52% / 52% 48% 52% 48%;
    transform: scale(1.03);
  }
}
.anim-blot-breathe {
  animation: blotBreathe 4s ease-in-out infinite;
}

/* Моргание глаз у кляксы (используется с .blot) */
@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}
.anim-blink::before,
.anim-blink::after {
  animation: blink 4s ease-in-out infinite;
  transform-origin: center;
}

/* ============================================================
   9. ИСКРЫ / ЧАСТИЦЫ
   ============================================================ */

/* Универсальная искра — летит вверх и исчезает */
@keyframes sparkUp {
  0% {
    transform: translate(0, 0) scale(0);
    opacity: 0;
  }
  20% {
    transform: translate(0, -8px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--spark-x, 0), -80px) scale(0);
    opacity: 0;
  }
}

.spark-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.spark-field .spark {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--amber-300);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--amber-400);
  animation: sparkUp 1.8s ease-out infinite;
}
.spark-field .spark:nth-child(1) { left: 10%; top: 60%; --spark-x: -20px; animation-delay: 0s; }
.spark-field .spark:nth-child(2) { left: 25%; top: 70%; --spark-x: -30px; animation-delay: 0.3s; }
.spark-field .spark:nth-child(3) { left: 45%; top: 65%; --spark-x: 10px;  animation-delay: 0.6s; }
.spark-field .spark:nth-child(4) { left: 65%; top: 70%; --spark-x: 25px;  animation-delay: 0.9s; }
.spark-field .spark:nth-child(5) { left: 85%; top: 60%; --spark-x: 35px;  animation-delay: 1.2s; }

/* Точечные искры вокруг награды */
.spark-orbit {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--gold-500);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--amber-400);
  animation: sparkUp 2s ease-out infinite;
}

/* ============================================================
   10. КОНФЕТТИ / ЧАСТИЦЫ ПОБЕДЫ
   ============================================================ */

@keyframes confettiFall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

.confetti {
  position: fixed;
  top: 0;
  width: 8px;
  height: 14px;
  pointer-events: none;
  z-index: 9999;
  animation: confettiFall 3s linear forwards;
}
.confetti:nth-child(odd)  { background: var(--amber-400); border-radius: 2px; }
.confetti:nth-child(even) { background: var(--magic-300); border-radius: 50%; width: 6px; height: 6px; }
.confetti:nth-child(3n)   { background: var(--gold-500); }

/* ============================================================
   11. ТРЯСКА / ОШИБКА
   ============================================================ */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-6px); }
  30%      { transform: translateX(6px); }
  45%      { transform: translateX(-4px); }
  60%      { transform: translateX(4px); }
  75%      { transform: translateX(-2px); }
}
.anim-shake {
  animation: shake 0.45s ease-in-out;
}

/* ============================================================
   12. ПРЫЖОК / ЛЁГКИЙ BOUNCE
   ============================================================ */

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.anim-bounce {
  animation: bounce 0.6s var(--ease-spring);
}

/* ============================================================
   13. ПЕЧАТАЮЩИЙ AI (для чата)
   ============================================================ */

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
.typing-indicator {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}
.typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber-400);
  animation: typingDot 1.2s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }

/* ============================================================
   14. ПРОГРЕСС / ЗАПОЛНЕНИЕ
   ============================================================ */

@keyframes fillBar {
  from { width: 0; }
}
.anim-fill {
  animation: fillBar var(--dur-slow) var(--ease-ui) both;
}

/* Звёзды, появляющиеся в рейтинге */
@keyframes starPop {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(10deg);  opacity: 1; }
  100% { transform: scale(1)   rotate(0);      opacity: 1; }
}
.anim-star {
  animation: starPop 0.5s var(--ease-spring) both;
}

/* ============================================================
   15. HOVER / ИНТЕРАКТИВ
   ============================================================ */

/* Поднятие при наведении */
.hover-lift {
  transition: transform var(--dur-fast) var(--ease-ui),
              box-shadow var(--dur-mid) var(--ease-ui);
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Лёгкое покачивание при наведении */
.hover-rock {
  transition: transform var(--dur-fast) var(--ease-ui);
}
.hover-rock:hover {
  transform: rotate(-3deg) scale(1.04);
}

/* Увеличение при наведении */
.hover-grow {
  transition: transform var(--dur-fast) var(--ease-ui);
}
.hover-grow:hover {
  transform: scale(1.06);
}

/* Нажатие */
.press:active {
  transform: scale(0.96);
  transition: transform 80ms ease;
}

/* ============================================================
   16. СПЕЦИАЛЬНЫЕ ЭФФЕКТЫ
   ============================================================ */

/* Вспышка белым при получении урона / клика */
@keyframes flash {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(2); }
  100% { filter: brightness(1); }
}
.anim-flash {
  animation: flash 0.3s ease-in-out;
}

/* Плавное затухание и исчезновение (для тостов) */
@keyframes toastOut {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}
.anim-toast-out {
  animation: toastOut var(--dur-mid) var(--ease-ui) forwards;
}

/* Тип-эффект (для туториала) */
@keyframes caret {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
.anim-caret::after {
  content: '│';
  color: var(--amber-400);
  animation: caret 1s step-end infinite;
}

/* ============================================================
   17. КОМБО — готовые «сцены»
   ============================================================ */

/* Появление карточки с пружиной + подъём */
.combo-card-enter {
  animation: scaleInSpring var(--dur-slow) var(--ease-spring) both;
}

/* Награда: вспышка + пульсация + искры */
.combo-reward {
  position: relative;
}
.combo-reward > * {
  animation: scaleInSpring var(--dur-slow) var(--ease-spring) both;
}

/* Питомец: парение + дыхание + моргание */
.combo-pet {
  animation: float 3s ease-in-out infinite,
             breathe 4s ease-in-out infinite;
}

/* Бой: тряска + вспышка */
.combo-hit {
  animation: shake 0.45s ease-in-out,
             flash 0.3s ease-in-out;
}

/* ============================================================
   18. УТИЛИТЫ ЗАДЕРЖКИ ДЛЯ STAGGER
   ============================================================ */

/* Для списков, галерей, рейтингов — поэтапное появление */
.stagger > *           { animation: fadeInUp var(--dur-mid) var(--ease-ui) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }
.stagger > *:nth-child(7) { animation-delay: 360ms; }
.stagger > *:nth-child(8) { animation-delay: 420ms; }
.stagger > *:nth-child(9) { animation-delay: 480ms; }
.stagger > *:nth-child(10){ animation-delay: 540ms; }

/* ============================================================
   19. ОТКЛЮЧЕНИЕ АНИМАЦИЙ (accessibility)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   20. УТИЛИТЫ — точное управление
   ============================================================ */

.anim-paused    { animation-play-state: paused; }
.anim-infinite  { animation-iteration-count: infinite; }
.anim-fast      { animation-duration: var(--dur-fast); }
.anim-mid       { animation-duration: var(--dur-mid); }
.anim-slow      { animation-duration: var(--dur-slow); }

/* Задержка-утилиты */
.anim-delay-1   { animation-delay: 100ms; }
.anim-delay-2   { animation-delay: 200ms; }
.anim-delay-3   { animation-delay: 300ms; }
.anim-delay-4   { animation-delay: 400ms; }
.anim-delay-5   { animation-delay: 500ms; }
.anim-delay-6   { animation-delay: 600ms; }
.anim-delay-8   { animation-delay: 800ms; }
.anim-delay-10  { animation-delay: 1000ms; }