/* ═══════════════════════════════════════════════════════════════════════════
   Ecos del Abismo — animations.css
   Todas las @keyframes del juego
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── fadeIn: opacidad 0→1 (300ms) ─────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── slideUp: translateY(20px)→0 (400ms) ──────────────────────────────── */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── pulse: scale(1)→scale(1.05)→scale(1) (2s infinite) ──────────────── */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* ─── glitch: skew + desplazamiento RGB (200ms) ────────────────────────── */
@keyframes glitch {
  0%   { transform: skew(0deg, 0deg); }
  20%  { transform: skew(-2deg, 1deg); filter: hue-rotate(90deg); }
  40%  { transform: skew(2deg, -1deg); filter: hue-rotate(-90deg); }
  60%  { transform: skew(-1deg, 2deg); filter: hue-rotate(45deg); }
  80%  { transform: skew(1deg, -2deg); filter: hue-rotate(-45deg); }
  100% { transform: skew(0deg, 0deg); filter: none; }
}

/* ─── shake: translate aleatorio para daño (300ms) ─────────────────────── */
@keyframes shake {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-4px, 2px); }
  20%  { transform: translate(3px, -3px); }
  30%  { transform: translate(-3px, 4px); }
  40%  { transform: translate(4px, -2px); }
  50%  { transform: translate(-2px, 3px); }
  60%  { transform: translate(2px, -4px); }
  70%  { transform: translate(-4px, 2px); }
  80%  { transform: translate(3px, -1px); }
  90%  { transform: translate(-1px, 3px); }
  100% { transform: translate(0, 0); }
}

/* ─── float: levitación suave para objetos (3s infinite) ───────────────── */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ─── spin: rotación para efectos de carga (1s infinite linear) ────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── reveal: niebla que se disipa (500ms) ─────────────────────────────── */
@keyframes reveal {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

/* ─── descent: efecto de caída para cambio de nivel (800ms) ────────────── */
@keyframes descent {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
    filter: blur(4px);
  }
  30% {
    opacity: 1;
    transform: translateY(5px) scale(1);
    filter: blur(0);
  }
  60% {
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── glowPulse: box-shadow pulsante (2s infinite) ─────────────────────── */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 5px var(--color-accent-glow);
  }
  50% {
    box-shadow: 0 0 15px var(--color-accent-glow), 0 0 30px var(--color-accent-glow);
  }
}

/* ─── slideIn: translateX(-100%)→0 (400ms) ─────────────────────────────── */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ─── typewriter: ancho 0→100% para texto narrativo (varía) ────────────── */
@keyframes typewriter {
  from {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  to {
    width: 100%;
  }
}

/* ─── sanityGlitch: efecto de glitch para cordura baja (aleatorio) ─────── */
@keyframes sanityGlitch {
  0%   { opacity: 1; transform: translate(0); filter: none; }
  2%   { opacity: 0.8; transform: translate(-3px, 1px); filter: hue-rotate(120deg) saturate(2); }
  4%   { opacity: 1; transform: translate(2px, -1px); filter: hue-rotate(-120deg) saturate(0.5); }
  6%   { opacity: 0.9; transform: translate(-1px, 2px); filter: hue-rotate(60deg) saturate(3); }
  8%   { opacity: 1; transform: translate(0); filter: none; }
  100% { opacity: 1; transform: translate(0); filter: none; }
}

/* ─── fadeOut: opacidad 1→0 (300ms) ────────────────────────────────────── */
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ─── slideDown: translateY(0)→20px (300ms) ────────────────────────────── */
@keyframes slideDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* ─── shimmer: brillo deslizante para objetos raros (2s infinite) ──────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ─── heartbeat: latido para peligro (1.5s infinite) ───────────────────── */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.1); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.05); }
  56%      { transform: scale(1); }
}

/* ─── flicker: parpadeo para antorchas/velas (0.5s infinite) ───────────── */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  25%      { opacity: 0.8; }
  50%      { opacity: 0.95; }
  75%      { opacity: 0.7; }
}

/* ─── ripple: onda expansiva (1s) ───────────────────────────────────────── */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* ─── rotateIn: rotación 180°→0 (500ms) ────────────────────────────────── */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(180deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* ─── bounceIn: rebote de entrada (600ms) ───────────────────────────────── */
@keyframes bounceIn {
  0%   { transform: scale(0); opacity: 0; }
  50%  { transform: scale(1.15); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

/* ─── flash: destello blanco (200ms) ────────────────────────────────────── */
@keyframes flash {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ─── sway: balanceo lateral para decoraciones (4s infinite) ───────────── */
@keyframes sway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

/* ─── floatUp: levitación ascendente (3s infinite) ─────────────────────── */
@keyframes floatUp {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-15px) scale(1.1);
    opacity: 1;
  }
}

/* ─── colorPulse: cambio de color pulsante (3s infinite) ───────────────── */
@keyframes colorPulse {
  0%, 100% { color: var(--color-accent); }
  50%      { color: var(--color-sanity); }
}

/* ─── scanlines: líneas de barrido CRT (0.1s infinite) ─────────────────── */
@keyframes scanlines {
  0%   { background-position: 0 0; }
  100% { background-position: 0 4px; }
}

/* ─── blurIn: desenfoque→enfoque (500ms) ───────────────────────────────── */
@keyframes blurIn {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* ─── zoomIn: escala 0.8→1 (400ms) ─────────────────────────────────────── */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}