/* =====================================================================
   Animaciones — 100% CSS. JS solo agrega/quita clases.
   ===================================================================== */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

@keyframes aviso-entra { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes aviso-sale  { to   { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes garabato { 0% { stroke-dashoffset: 120; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -120; } }

/* Trazo de pluma que se dibuja (camino del mapa, palomitas) */
@keyframes trazo { from { stroke-dashoffset: var(--largo, 1000); } to { stroke-dashoffset: 0; } }

/* Estampa que aparece en el mapa */
@keyframes estampa-entra {
  0%   { opacity: 0; transform: scale(.4) rotate(-14deg); }
  70%  { opacity: 1; transform: scale(1.08) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(var(--giro, 0deg)); }
}

/* Sello de "¡Hecho!" al terminar una lección */
@keyframes sello-golpe {
  0%   { opacity: 0; transform: scale(2.4) rotate(-22deg); filter: blur(3px); }
  55%  { opacity: 1; transform: scale(.92) rotate(-9deg); filter: blur(0); }
  72%  { transform: scale(1.04) rotate(-11deg); }
  100% { opacity: 1; transform: scale(1) rotate(-10deg); }
}
@keyframes tinta-onda {
  0%   { opacity: .55; transform: scale(.6); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* Confeti de recortes de papel */
@keyframes confeti {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}

/* Respuesta incorrecta: la hoja tiembla; correcta: pequeño salto */
@keyframes temblor {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
@keyframes salto { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* Barra de retroalimentación que sube desde abajo */
@keyframes sube { from { transform: translateY(100%); } }

/* Marcatextos que se pasa sobre una opción elegida */
@keyframes subrayar { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* Nota adhesiva que se pega */
@keyframes pegar {
  0%   { opacity: 0; transform: translateY(-14px) rotate(-4deg) scale(1.03); }
  60%  { opacity: 1; transform: translateY(2px) rotate(-.6deg); }
  100% { opacity: 1; transform: translateY(0) rotate(-1deg); }
}

/* Cursor de máquina de escribir */
@keyframes parpadeo { 50% { opacity: 0; } }

/* Racha: la flama respira */
@keyframes flama { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.12) rotate(3deg); } }

/* Las hojas del mapa se van apilando */
@keyframes hoja-entra { from { opacity: 0; transform: translateY(14px); } }

/* Pieza que se levanta al arrastrar */
@keyframes levantar { to { transform: rotate(-1.5deg) scale(1.02); box-shadow: 0 14px 28px -12px rgba(20,33,61,.4); } }

/* Indicador de ejecución */
@keyframes puntos { 0%, 20% { opacity: .2; } 50% { opacity: 1; } 100% { opacity: .2; } }

/* Insignia nueva: gira como moneda */
@keyframes moneda { 0% { transform: rotateY(90deg) scale(.6); } 60% { transform: rotateY(-15deg) scale(1.05); } 100% { transform: rotateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}