/* ============================================================
   GESTO·DJ — animaciones.css
   Keyframes y utilidades de entrada/movimiento.
   ============================================================ */

/* Entrada de pantallas */
@keyframes pantalla-in{
  from{ opacity:0; transform:scale(1.012); filter:blur(6px); }
  to{   opacity:1; transform:scale(1);     filter:blur(0); }
}

/* Aparición escalonada de bloques (usa --d como retraso) */
.anim-entrada{ opacity:0; transform:translateY(16px); animation:subir-aparecer var(--t-lenta) var(--ease) forwards; animation-delay:var(--d,0ms); }
@keyframes subir-aparecer{
  to{ opacity:1; transform:translateY(0); }
}

/* Latido del glow del logo */
@keyframes logo-latido{
  0%,100%{ text-shadow:0 0 28px rgba(var(--acento-1-rgb),.45), 0 0 70px rgba(var(--acento-1-rgb),.18); }
  50%{     text-shadow:0 0 40px rgba(var(--acento-1-rgb),.7),  0 0 110px rgba(var(--acento-1-rgb),.32); }
}

/* Rejilla en perspectiva desplazándose */
@keyframes grid-correr{
  from{ background-position:0 0; }
  to{   background-position:0 60px; }
}

/* Spinner de carga */
@keyframes girar{ to{ transform:rotate(360deg); } }

/* Pulso suave (hints) */
@keyframes pulso-suave{
  0%,100%{ opacity:.65; transform:translateX(-50%) translateY(0); }
  50%{     opacity:1;   transform:translateX(-50%) translateY(-3px); }
}

/* Cuenta regresiva de calibración */
@keyframes cuenta-pop{
  0%{ opacity:0; transform:scale(.5); filter:blur(8px); }
  30%{ opacity:1; transform:scale(1); filter:blur(0); }
  100%{ opacity:0; transform:scale(1.4); filter:blur(4px); }
}
.calibracion-cuenta.tick{ animation:cuenta-pop 1s var(--ease) both; }