/* ============================================================================
   Valdra · Sistema de diseño — movimiento

   Regla del dueño: el movimiento aparece en una acción, un cambio de estado,
   una ejecución o la entrada de contenido nuevo — nunca decorativo y
   constante. Todo lo de aquí respeta `prefers-reduced-motion`, con la misma
   convención que ya usa app.css (bloque `@media (prefers-reduced-motion:
   no-preference)` envolviendo la animación, así que quien pide menos
   movimiento simplemente no la recibe, sin necesidad de un `@media (…:
   reduce)` que la anule después).
   ============================================================================ */

@media (prefers-reduced-motion: no-preference) {
  @keyframes vx-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes vx-rise-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* La entrada de UNA fila nueva en una lista en vivo — la línea de tiempo de
     actividad, un chip de comando recién enviado. Nunca se aplica a toda la
     lista al montar: solo a lo que de verdad acaba de llegar, ver
     ActivityTimeline en ui/primitives.js. */
  @keyframes vx-item-enter {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* El halo de foco del compositor: un pulso único y corto al enfocar, nunca
     un bucle infinito — "una insinuación de foco, no un neón". */
  @keyframes vx-focus-pulse {
    0%   { box-shadow: 0 0 0 0 var(--accent-ai-soft); }
    70%  { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  /* La línea de progreso del compositor mientras ejecuta: se desliza, no
     parpadea. */
  @keyframes vx-progress-slide {
    0%   { transform: translateX(-40%); }
    100% { transform: translateX(140%); }
  }

  .vx-anim-fade-in  { animation: vx-fade-in var(--motion-base) both; }
  .vx-anim-rise-in  { animation: vx-rise-in var(--motion-base) both; }
  .vx-anim-item-enter { animation: vx-item-enter var(--motion-slow) both; }
  .vx-anim-focus-pulse { animation: vx-focus-pulse 600ms var(--ease-standard) 1; }
}

/* Con movimiento reducido, el elemento igual aparece — sin desplazamiento ni
   fotograma perdido, solo sin la animación de entrada. */
@media (prefers-reduced-motion: reduce) {
  .vx-anim-fade-in, .vx-anim-rise-in, .vx-anim-item-enter { opacity: 1; transform: none; }
}

.vx-transition-fast { transition: all var(--motion-fast); }
.vx-transition-base { transition: all var(--motion-base); }