/* ===========================
   CLEDUCA — Animaciones
   =========================== */

/* ── Keyframes base ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bounceIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}
@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-8deg); }
  75%       { transform: rotate(8deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
@keyframes floatUp {
  0%   { transform: translateY(0) scale(0.9); opacity: 0.85; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(-550px) scale(1.1); opacity: 0; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  14%     { transform: scale(1.2); }
  28%     { transform: scale(1); }
  42%     { transform: scale(1.15); }
  70%     { transform: scale(1); }
}
@keyframes shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes starPop {
  0%   { transform: scale(0) rotate(0deg); }
  50%  { transform: scale(1.4) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes slideDown {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}
@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--target-width, 100%); }
}
@keyframes xpFloat {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-60px) scale(1.2); opacity: 0; }
}
@keyframes cleoTalk {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(0.7); }
}
@keyframes cleoBlink {
  0%, 90%, 100% { transform: scaleY(1); }
  95%            { transform: scaleY(0.05); }
}
@keyframes cleoWave {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%       { transform: rotate(20deg) translateY(-3px); }
  75%       { transform: rotate(-15deg) translateY(-2px); }
}
@keyframes cleoJump {
  0%, 100% { transform: translateY(0) scaleY(1); }
  40%       { transform: translateY(-25px) scaleY(1.05); }
  60%       { transform: translateY(-20px) scaleY(1.05); }
  90%       { transform: translateY(0) scaleY(0.92); }
}
@keyframes cleoHappy {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25%       { transform: scale(1.08) rotate(-5deg); }
  75%       { transform: scale(1.08) rotate(5deg); }
}
@keyframes typingDots {
  0%, 20%  { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
  80%, 100%{ transform: translateY(0); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 5px var(--c-primary), 0 0 10px var(--c-primary); }
  50%       { box-shadow: 0 0 15px var(--c-primary), 0 0 30px var(--c-primary), 0 0 45px var(--c-primary); }
}
@keyframes slideInBottom {
  from { transform: translateY(120%); }
  to   { transform: translateY(0); }
}
@keyframes popIn {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes scaleOut {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(0.8); opacity: 0; }
}

/* ── Clases de animación ── */
.animate-fadeIn      { animation: fadeIn 0.4s ease forwards; }
.animate-fadeInUp    { animation: fadeInUp 0.5s ease forwards; }
.animate-fadeInDown  { animation: fadeInDown 0.4s ease forwards; }
.animate-fadeInScale { animation: fadeInScale 0.4s ease forwards; }
.animate-bounceIn    { animation: bounceIn 0.6s ease forwards; }
.animate-slideInLeft { animation: slideInLeft 0.4s ease forwards; }
.animate-slideInRight{ animation: slideInRight 0.4s ease forwards; }
.animate-popIn       { animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.animate-float       { animation: float 3s ease-in-out infinite; }
.animate-floatBig    { animation: floatBig 4s ease-in-out infinite; }
.animate-pulse       { animation: pulse 2s ease-in-out infinite; }
.animate-heartbeat   { animation: heartbeat 1.5s ease-in-out infinite; }
.animate-shake       { animation: shake 0.5s ease; }
.animate-wobble      { animation: wobble 0.6s ease; }
.animate-spin        { animation: spin 1s linear infinite; }
.animate-spinSlow    { animation: spinSlow 8s linear infinite; }
.animate-glowPulse   { animation: glowPulse 2s ease-in-out infinite; }

/* ── Delays ── */
.delay-100  { animation-delay: 0.1s; }
.delay-200  { animation-delay: 0.2s; }
.delay-300  { animation-delay: 0.3s; }
.delay-400  { animation-delay: 0.4s; }
.delay-500  { animation-delay: 0.5s; }
.delay-600  { animation-delay: 0.6s; }
.delay-700  { animation-delay: 0.7s; }
.delay-800  { animation-delay: 0.8s; }

/* ── Confetti ── */
.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
  pointer-events: none;
  z-index: 9999;
}

/* ── XP flotante ── */
.xp-float {
  position: fixed;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--c-xp);
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  animation: xpFloat 1.5s ease forwards;
  pointer-events: none;
  z-index: 9999;
}

/* ── Ripple ── */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  animation: ripple 0.6s linear;
  pointer-events: none;
}