/* =============================================
   ANIMACIONES DE JUEGOS — EVIN
   ============================================= */

/* ── Entrada de sección ───────────────────────────────────── */
@keyframes juegoEntrada {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

section[id^="juego-"]:not(.hidden) {
  animation: juegoEntrada 0.4s ease forwards;
}

/* ── Overlay central ──────────────────────────────────────── */
.anim-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9995;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.anim-overlay--visible { opacity: 1; }
.anim-overlay--salida  { opacity: 0; transition: opacity 0.5s ease; }

.anim-overlay-contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255,255,255,0.95);
  border: 3px solid var(--anim-color, #FF8C00);
  border-radius: 24px;
  padding: 2rem 3rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: overlayBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes overlayBounce {
  from { transform: scale(0.5) rotate(-5deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

.anim-emoji {
  font-size: clamp(4rem, 12vw, 7rem);
  line-height: 1;
  animation: emojiSpin 0.6s ease forwards;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

@keyframes emojiSpin {
  0%   { transform: scale(0) rotate(-20deg); }
  60%  { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.anim-titulo {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 800;
  color: var(--anim-color, #FF8C00);
  text-align: center;
}

/* ── Estrella ronda superada ──────────────────────────────── */
.anim-estrella {
  position: fixed;
  top: 80px;
  right: 2rem;
  font-size: 4rem;
  z-index: 9994;
  opacity: 0;
  transform: scale(0) rotate(-30deg);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(255,215,0,0.5));
}

.anim-estrella--visible {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.anim-estrella--salida {
  opacity: 0;
  transform: scale(0.5) translateY(-20px);
  transition: all 0.4s ease;
}

/* ── Confetti ─────────────────────────────────────────────── */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9993;
  overflow: hidden;
}

@keyframes confettiCaer {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

.confetti-pieza {
  position: absolute;
  top: -20px;
  animation: confettiCaer linear forwards;
}

.confetti-circle  { border-radius: 50%; }
.confetti-square  { border-radius: 2px; }
.confetti-triangle {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #FF8C00;
}

/* ── Shake game over ──────────────────────────────────────── */
@keyframes gameOverShake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-8px); }
  30%       { transform: translateX(8px); }
  45%       { transform: translateX(-6px); }
  60%       { transform: translateX(6px); }
  75%       { transform: translateX(-4px); }
  90%       { transform: translateX(4px); }
}

.game-over-shake {
  animation: gameOverShake 0.6s ease forwards;
}

/* ── Acierto/error en celda ───────────────────────────────── */
@keyframes aciertoCell {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes errorCell {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-5px); }
  75%       { transform: translateX(5px); }
}

.celda-acierto { animation: aciertoCell 0.3s ease forwards; }
.celda-error   { animation: errorCell 0.3s ease forwards; }

/* ── Modal entrada animada ────────────────────────────────── */
@keyframes modalEntrada {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

#modal:not(.hidden) .modal-content {
  animation: modalEntrada 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Reducir movimiento ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  section[id^="juego-"]:not(.hidden),
  .anim-overlay-contenido,
  .anim-emoji,
  .anim-estrella,
  .confetti-pieza,
  .game-over-shake,
  .celda-acierto,
  .celda-error,
  #modal:not(.hidden) .modal-content {
    animation: none !important;
    transition: none !important;
  }
}