/* ============================================
   LalaWord Animations
   ============================================ */

/* === Page transitions === */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* === Scale animations === */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.5); }
  70% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* === Loading animations === */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* === Modal animations === */
@keyframes modalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bottomSheetIn {
  from { transform: translateX(-50%) translateY(100%); }
  to { transform: translateX(-50%) translateY(0); }
}

@keyframes bottomSheetOut {
  from { transform: translateX(-50%) translateY(0); }
  to { transform: translateX(-50%) translateY(100%); }
}

/* === Toast animation === */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-20px) scale(0.95); }
}

/* === Flashcard flip === */
@keyframes flipToBack {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

@keyframes flipToFront {
  0% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

/* === Confetti burst === */
@keyframes confettiFall {
  0% { opacity: 1; transform: translateY(-30px) rotate(0deg); }
  100% { opacity: 0; transform: translateY(200px) rotate(720deg); }
}

/* === Stagger animation helpers === */
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }
.stagger > *:nth-child(6) { animation-delay: 250ms; }
.stagger > *:nth-child(7) { animation-delay: 300ms; }
.stagger > *:nth-child(8) { animation-delay: 350ms; }

/* === Animation classes === */
.anim-fade-in { animation: fadeIn var(--transition-base) both; }
.anim-slide-up { animation: slideUp var(--transition-base) both; }
.anim-slide-down { animation: slideDown var(--transition-base) both; }
.anim-scale-in { animation: scaleIn var(--transition-base) both; }
.anim-pop-in { animation: popIn var(--transition-spring) both; }
.anim-bounce { animation: bounce 600ms ease infinite; }
.anim-spin { animation: spin 1s linear infinite; }
.anim-pulse { animation: pulse 1.5s ease-in-out infinite; }

/* === Skeleton loader === */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg) 25%, var(--color-border-light) 50%, var(--color-bg) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  border-radius: var(--radius-xs);
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }

.skeleton-circle {
  border-radius: var(--radius-full);
}

/* === Loading dots === */
.loading-dots {
  display: inline-flex;
  gap: 6px;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  background: var(--color-coral);
  border-radius: var(--radius-full);
  animation: dotPulse 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0; }

/* === Progress circle === */
.progress-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-circle svg {
  transform: rotate(-90deg);
}

.progress-circle .progress-bg {
  fill: none;
  stroke: var(--color-bg);
  stroke-width: 6;
}

.progress-circle .progress-value {
  fill: none;
  stroke: var(--color-coral);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--transition-slow);
}

.progress-circle .progress-text {
  position: absolute;
  font-family: var(--font-en);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
}