/* MOVIMIENTO — las reglas de animación de toda la plataforma.
 *
 * Una sola hoja para las nueve apps. Si cada una tuviera sus propias curvas y
 * duraciones, la plataforma se sentiría como nueve productos distintos: el
 * mismo gesto tardaría distinto según la pantalla, y eso se nota aunque nadie
 * sepa explicar por qué.
 *
 * Todo lo de aquí obedece tres reglas:
 *
 *   1. Solo se mueve lo que gana su lugar. Un botón que se toca dos veces al
 *      día no anima; una pantalla que se reconstruye entera sí, porque sin
 *      movimiento el cambio no se lee.
 *   2. Solo transform y opacity. Van por GPU y no obligan al navegador a
 *      recalcular la página. Animar width, height, top o margin sí.
 *   3. Nada pasa de 240 ms. Una interfaz de trabajo se usa cien veces al día;
 *      lo que se ve bonito la primera vez estorba la número cincuenta.
 */

:root{
  /* La curva de salida que trae CSS es tan floja que el movimiento no se lee.
     Esta arranca rápido y frena de golpe, que es como se sienten las cosas
     con peso. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ── Entrada de contenido ────────────────────────────────────────────
 * Estas apps arman la pantalla con innerHTML: el contenido aparece de golpe,
 * ya montado, y cuesta un instante entender que algo cambió. Diez píxeles de
 * subida en 220 ms resuelven eso sin hacer esperar a nadie.
 *
 * Se usa `both` para que el elemento arranque invisible: sin eso parpadea en
 * su posición final antes de empezar.
 */
.mv-entra{ animation: mv-entra 220ms var(--ease-out) both; }
@keyframes mv-entra{ from{ opacity:0; transform:translateY(10px); } }

/* Igual pero sin desplazamiento, para cosas que ya están en su sitio y solo
   cambian de contenido (un número que se actualiza, un aviso que aparece). */
.mv-aparece{ animation: mv-aparece 180ms var(--ease-out) both; }
@keyframes mv-aparece{ from{ opacity:0; } }

/* ── Listas ──────────────────────────────────────────────────────────
 * Cada fila entra 40 ms después de la anterior: el ojo recorre la lista en
 * orden en vez de recibir veinte cosas al mismo tiempo. Se corta en la fila
 * 10 —con `min()`— para que la última de una lista larga no se haga esperar
 * medio segundo. La fila lleva su índice en --i.
 */
.mv-lista > *{
  animation: mv-entra 200ms var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 10) * 40ms);
}

/* ── Hover solo donde hay ratón ──────────────────────────────────────
 * En pantalla táctil un toque dispara :hover y el estilo se queda pegado
 * hasta que se toca otra cosa. Envolver la regla en esta consulta es la
 * única forma de que no pase. No es adorno: es un defecto en el celular.
 */
@media (hover: hover) and (pointer: fine){
  .mv-levanta:hover{ transform: translateY(-4px); }
}
.mv-levanta{ transition: transform 180ms var(--ease-out),
                         box-shadow 180ms var(--ease-out); }

/* ── Menos movimiento cuando lo piden ────────────────────────────────
 * Menos y más suave, no cero: se conserva la aparición —que es lo que ayuda
 * a entender que la pantalla cambió— y se quita el desplazamiento, que es lo
 * que marea.
 */
@media (prefers-reduced-motion: reduce){
  .mv-entra,
  .mv-lista > *{
    animation: mv-aparece 160ms ease both;
    animation-delay: 0ms;
  }
  .mv-levanta{ transition: none; }
  .mv-levanta:hover{ transform: none; }
}