/* ========== АНИМАЦИИ ========== */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79,70,229,0.4); }
  50% { box-shadow: 0 0 0 10px rgba(79,70,229,0); }
}
@keyframes countUp {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Применяем анимации к элементам */
.screen {
  animation: fadeSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.screen.active { display: block; }

.card {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card.flipped { transform: rotateY(180deg); }

.card-wrap {
  perspective: 1200px;
}
.card-face {
  transition: box-shadow 0.3s;
}
.card-face:hover { box-shadow: var(--shadow-lg), 0 0 0 2px var(--primary); }

.srs-btn {
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
}
.srs-btn:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
.srs-btn:active { transform: scale(0.95); }

.btn {
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
.btn:active { transform: scale(0.95); }
.btn.primary { animation: pulseGlow 2s infinite; }

.word-item {
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.word-item:hover { transform: translateY(-2px) scale(1.01); border-color: var(--primary); box-shadow: var(--shadow); }

.modal-bg {
  animation: fadeIn 0.3s;
}
.modal {
  animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-value {
  animation: countUp 0.6s ease;
}

.heatmap-cell {
  transition: transform 0.2s, background 0.3s;
}
.heatmap-cell:hover { transform: scale(1.3); z-index: 2; }

.toast.show {
  animation: slideInRight 0.4s ease;
}

/* Анимация для кнопок фильтров */
.chip {
  transition: all 0.25s;
}
.chip:hover { transform: translateY(-2px); }
.chip.active { background: var(--primary); color: white; border-color: var(--primary); }

/* Анимация для карточек в списке */
.word-item {
  animation: slideInRight 0.3s ease;
  animation-fill-mode: both;
}
.word-item:nth-child(1) { animation-delay: 0.02s; }
.word-item:nth-child(2) { animation-delay: 0.04s; }
.word-item:nth-child(3) { animation-delay: 0.06s; }
.word-item:nth-child(4) { animation-delay: 0.08s; }
.word-item:nth-child(5) { animation-delay: 0.10s; }
.word-item:nth-child(6) { animation-delay: 0.12s; }
.word-item:nth-child(7) { animation-delay: 0.14s; }
.word-item:nth-child(8) { animation-delay: 0.16s; }
.word-item:nth-child(9) { animation-delay: 0.18s; }
.word-item:nth-child(10) { animation-delay: 0.20s; }
.word-item:nth-child(11) { animation-delay: 0.22s; }
.word-item:nth-child(12) { animation-delay: 0.24s; }
.word-item:nth-child(13) { animation-delay: 0.26s; }
.word-item:nth-child(14) { animation-delay: 0.28s; }
.word-item:nth-child(15) { animation-delay: 0.30s; }

/* Анимация для тепловой карты */
.heatmap-cell {
  animation: scaleIn 0.3s ease;
  animation-fill-mode: both;
}
.heatmap-cell:nth-child(1) { animation-delay: 0.01s; }
.heatmap-cell:nth-child(2) { animation-delay: 0.02s; }
/* ... можно добавить задержки для всех, но для простоты оставим */

/* Анимация для бейджа серии */
.streak-badge {
  animation: float 2s infinite ease-in-out;
}