/* TutorIngles — animations.css
   Keyframes y clases de animación reutilizables */

/* ── FADE IN ───────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.anim-fade-in { animation: fadeIn 0.3s ease; }

/* ── SLIDE UP ──────────────────────────────────────────── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-slide-up { animation: slideUp 0.35s cubic-bezier(.4,0,.2,1); }

/* ── SLIDE DOWN ────────────────────────────────────────── */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-slide-down { animation: slideDown 0.25s ease; }

/* ── SCALE IN ──────────────────────────────────────────── */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.anim-scale-in { animation: scaleIn 0.3s cubic-bezier(.4,0,.2,1); }

/* ── PULSE GLOW (accent) ───────────────────────────────── */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 16px var(--accent-glow); }
  50%       { box-shadow: 0 0 36px var(--accent-glow), 0 0 60px rgba(0,122,255,0.15); }
}

.anim-pulse { animation: pulse-glow 2s ease infinite; }

/* ── SHIMMER (loading skeleton) ────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    var(--surface-2) 50%,
    var(--surface) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text  { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; }
.skeleton-card  { height: 80px; margin-bottom: 12px; }

/* ── XP GAIN POP ───────────────────────────────────────── */
@keyframes xpPop {
  0%   { opacity: 0; transform: translateY(0) scale(0.8); }
  20%  { opacity: 1; transform: translateY(-8px) scale(1.1); }
  80%  { opacity: 1; transform: translateY(-18px) scale(1); }
  100% { opacity: 0; transform: translateY(-28px) scale(0.9); }
}

.xp-pop {
  position: fixed;
  z-index: 400;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  pointer-events: none;
  animation: xpPop 1.2s ease forwards;
  text-shadow: 0 0 12px var(--accent-glow);
}

/* ── CARD FLIP (vocab flashcard) ───────────────────────── */
.flip-container {
  perspective: 1000px;
}

.flip-inner {
  position: relative;
  width: 100%;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
  transform-style: preserve-3d;
}

.flip-inner.flipped { transform: rotateY(180deg); }

.flip-front,
.flip-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-back { transform: rotateY(180deg); }

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

.anim-bounce { animation: bounce 0.5s ease; }

/* ── CORRECT / WRONG flash ─────────────────────────────── */
@keyframes flashCorrect {
  0%, 100% { background: transparent; }
  50%       { background: rgba(34,197,94,0.15); }
}

@keyframes flashWrong {
  0%, 100% { background: transparent; }
  50%       { background: rgba(239,68,68,0.15); }
}

.flash-correct { animation: flashCorrect 0.4s ease; }
.flash-wrong   { animation: flashWrong   0.4s ease; }

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