/* ═══════════════════════════════════════════════
   ANIMATIONS — Page transitions & micro-animations
   ═══════════════════════════════════════════════ */

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

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

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@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); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

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

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

@keyframes ripple {
  to { transform: scale(2.5); opacity: 0; }
}

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

/* ── Card flip (for flashcards) ── */
@keyframes flipToFront {
  from { transform: rotateY(180deg); }
  to { transform: rotateY(0deg); }
}
@keyframes flipToBack {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(180deg); }
}

/* ── Theme transition overlay ── */
.theme-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-bg);
  animation: fadeIn 200ms ease-out forwards, fadeOut 200ms 400ms ease-in forwards;
  pointer-events: none;
}

/* ── Page transition classes ── */
.animate-fade-in { animation: fadeIn var(--duration-normal) var(--ease-out) forwards; }
.animate-fade-slide-in { animation: fadeSlideIn var(--duration-normal) var(--ease-out) forwards; }
.animate-slide-up { animation: slideUp var(--duration-normal) var(--ease-out) forwards; }
.animate-scale-in { animation: scaleIn var(--duration-fast) var(--ease-out) forwards; }
.animate-pulse { animation: pulse 2s infinite; }
.animate-shimmer {
  background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-surface-hover) 50%, var(--color-surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ── Instant Language Switching (No Animations / Transitions) ── */
html.no-animations *,
html.no-animations *::before,
html.no-animations *::after {
  animation: none !important;
  transition: none !important;
}

.page-enter {
  animation: fadeSlideIn var(--duration-page) var(--ease-out) both;
}
.page-exit {
  animation: fadeSlideOut var(--duration-page) var(--ease-out) both;
}

/* ── Staggered children animations ── */
.stagger-children > * {
  animation: fadeSlideIn var(--duration-slow) var(--ease-out) both;
}
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
.stagger-children > *:nth-child(6) { animation-delay: 250ms; }
.stagger-children > *:nth-child(7) { animation-delay: 300ms; }
.stagger-children > *:nth-child(8) { animation-delay: 350ms; }
.stagger-children > *:nth-child(9) { animation-delay: 400ms; }
.stagger-children > *:nth-child(10) { animation-delay: 450ms; }

/* ── Logo pulse ── */
.logo-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* ── Dot indicator (onboarding) ── */
.dot-indicators {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-disabled);
  transition: all var(--duration-normal) var(--ease-out);
}
.dot.active {
  width: 24px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

/* ── Toast dismiss ── */
.toast-exit {
  animation: fadeSlideOut 200ms ease-in forwards;
}

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