/* ============================================================
   OVA VIDEO INTERACTIVO – ANIMACIONES
   ============================================================ */

/* ---------- Entrada genérica ---------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

/* ---------- Feedback: respuesta correcta (temática agua) ---------- */
@keyframes correctSplash {
  0% {
    transform: scale(0) rotate(-20deg);
    opacity: 0;
  }
  40% {
    transform: scale(1.4) rotate(5deg);
    opacity: 1;
  }
  60% {
    transform: scale(0.85) rotate(-3deg);
  }
  80% {
    transform: scale(1.1) rotate(1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes correctTextWave {
  0% {
    opacity: 0;
    transform: translateY(25px) scale(0.8);
    filter: blur(4px);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px) scale(1.05);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes correctPointsPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.3) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes correctPulseBtn {
  0%, 100% {
    transform: scale(1.04);
    box-shadow: 0 0 18px rgba(0, 188, 212, 0.5), inset 0 0 8px rgba(0, 188, 212, 0.15);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 28px rgba(0, 188, 212, 0.7), inset 0 0 12px rgba(0, 188, 212, 0.25);
  }
}

@keyframes correctGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.5);
    background: transparent;
  }
  30% {
    box-shadow: 0 0 40px 20px rgba(0, 188, 212, 0.15);
    background: radial-gradient(circle, rgba(0, 188, 212, 0.08) 0%, transparent 70%);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 188, 212, 0);
    background: transparent;
  }
}

@keyframes waterRingExpand {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
    border-width: 3px;
  }
  100% {
    width: 350px;
    height: 350px;
    opacity: 0;
    border-width: 1px;
  }
}

@keyframes waterDropFall {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  70% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateY(140px) scale(0.4) rotate(20deg);
  }
}

@keyframes floatPointsUp {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translateY(-8px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(0.8);
  }
}

.anim-correct-icon {
  animation: correctSplash 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.anim-correct-text {
  animation: correctTextWave 0.6s ease 0.15s both;
}

.anim-correct-points {
  animation: correctPointsPop 0.5s ease 0.3s both;
}

.anim-correct-glow {
  animation: correctGlow 1.4s ease forwards;
}

/* ---------- Feedback: respuesta incorrecta ---------- */
@keyframes incorrectShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-12px); }
  30% { transform: translateX(10px); }
  45% { transform: translateX(-8px); }
  60% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}

@keyframes incorrectFade {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.anim-incorrect-icon {
  animation: incorrectShake 0.6s ease forwards;
}

.anim-incorrect-text {
  animation: fadeInUp 0.4s ease 0.2s both;
}

/* ---------- Estrellas en resumen ---------- */
@keyframes starAppear {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.3) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.anim-star {
  opacity: 0;
  animation: starAppear 0.5s ease forwards;
}

.anim-star:nth-child(1) { animation-delay: 0.1s; }
.anim-star:nth-child(2) { animation-delay: 0.3s; }
.anim-star:nth-child(3) { animation-delay: 0.5s; }
.anim-star:nth-child(4) { animation-delay: 0.7s; }
.anim-star:nth-child(5) { animation-delay: 0.9s; }

/* ---------- Partículas de celebración (gotas de agua) ---------- */
@keyframes particleFloat {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-130px) scale(0.3) rotate(40deg);
  }
}

.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  animation: particleFloat 1s ease forwards;
}

/* ---------- Pulsación del score al sumar ---------- */
@keyframes scoreBump {
  0% { transform: scale(1); }
  30% { transform: scale(1.5); color: #00e5ff; }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.anim-score-bump {
  animation: scoreBump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Entrada de tarjeta de pregunta ---------- */
@keyframes cardSlideIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.anim-card-in {
  animation: cardSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ---------- Botón de respuesta hover ripple ---------- */
@keyframes answerRipple {
  0% {
    box-shadow: 0 0 0 0 rgba(123, 47, 247, 0.3);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(123, 47, 247, 0);
  }
}

.answer-btn:active {
  animation: answerRipple 0.4s ease;
}

/* ---------- Conteo animado de puntos en resumen ---------- */
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-count-up {
  animation: countUp 0.6s ease 0.3s both;
}