/* ============================================================
   WordForge — Animations & Keyframes
   ============================================================ */

/* ── Entry animations ──────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

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

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

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

/* ── Pulse / glow ──────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px var(--clr-accent-glow); }
  50%       { box-shadow: 0 0 40px var(--clr-accent-glow), 0 0 80px var(--clr-accent-glow); }
}

@keyframes successPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--clr-success-glow); }
  50%       { box-shadow: 0 0 0 12px transparent; }
}

/* ── Shimmer (loading skeleton) ────────────────────────────── */
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

@keyframes skeletonShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ── Bounce / spring ───────────────────────────────────────── */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { transform: scale(1.08); }
  70%  { transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  20%  { transform: rotate(-8deg); }
  40%  { transform: rotate(8deg); }
  60%  { transform: rotate(-5deg); }
  80%  { transform: rotate(5deg); }
}

/* ── Correct / Wrong answer ────────────────────────────────── */
@keyframes correctBurst {
  0%   { transform: scale(1);    background: var(--clr-bg-elevated); }
  30%  { transform: scale(1.04); background: var(--clr-success-glow); border-color: var(--clr-success); }
  100% { transform: scale(1);    background: var(--clr-bg-elevated); }
}

@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  15%  { transform: translateX(-10px); }
  30%  { transform: translateX(10px); }
  45%  { transform: translateX(-8px); }
  60%  { transform: translateX(8px); }
  75%  { transform: translateX(-4px); }
  90%  { transform: translateX(4px); }
}

@keyframes wrongFlash {
  0%   { background: var(--clr-bg-elevated); border-color: var(--clr-border); }
  30%  { background: var(--clr-error-glow);  border-color: var(--clr-error); }
  100% { background: var(--clr-bg-elevated); border-color: var(--clr-border); }
}

/* ── XP / score counter ────────────────────────────────────── */
@keyframes xpFloat {
  0%   { opacity: 1; transform: translateY(0)   scale(1); }
  80%  { opacity: 1; transform: translateY(-40px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.8); }
}

@keyframes levelUp {
  0%   { opacity: 0; transform: scale(0.5) rotate(-10deg); }
  60%  { opacity: 1; transform: scale(1.15) rotate(3deg); }
  80%  { transform: scale(0.95) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ── Streak fire ───────────────────────────────────────────── */
@keyframes flicker {
  0%, 100% { transform: scaleY(1)    rotate(-1deg); opacity: 1; }
  25%       { transform: scaleY(1.06) rotate(1deg);  opacity: 0.9; }
  50%       { transform: scaleY(0.95) rotate(-2deg); opacity: 1; }
  75%       { transform: scaleY(1.03) rotate(1deg);  opacity: 0.95; }
}

/* ── Toast ─────────────────────────────────────────────────── */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}

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

/* ── Floating particles (background decoration) ────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px)   rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(2deg); }
  66%       { transform: translateY(-6px)  rotate(-2deg); }
}

@keyframes orbitSpin {
  from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

/* ── Typing cursor ─────────────────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Skeleton loading ──────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--clr-bg-elevated) 25%,
    var(--clr-bg-overlay)  50%,
    var(--clr-bg-elevated) 75%
  );
  background-size: 400px 100%;
  animation: skeletonShimmer 1.4s infinite ease-in-out;
  border-radius: var(--radius-sm);
}

/* ── Animation utility classes ─────────────────────────────── */
.animate-fadeIn       { animation: fadeIn       var(--transition-normal) forwards; }
.animate-fadeInUp     { animation: fadeInUp     var(--transition-normal) forwards; }
.animate-fadeInDown   { animation: fadeInDown   var(--transition-normal) forwards; }
.animate-scaleIn      { animation: scaleIn      var(--transition-normal) forwards; }
.animate-slideInLeft  { animation: slideInLeft  var(--transition-normal) forwards; }
.animate-bounceIn     { animation: bounceIn     0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards; }
.animate-correct      { animation: correctBurst 0.6s ease forwards; }
.animate-wrong        { animation: wrongShake   0.5s ease forwards, wrongFlash 0.5s ease forwards; }
.animate-wiggle       { animation: wiggle       0.5s ease; }
.animate-float        { animation: float        3s ease-in-out infinite; }
.animate-glowPulse    { animation: glowPulse    2s ease-in-out infinite; }
.animate-flicker      { animation: flicker      0.8s ease-in-out infinite; }
.animate-pulse        { animation: pulse        1.5s ease-in-out infinite; }

/* ── Staggered entry delays ────────────────────────────────── */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }