/* Wö Kàpi · movimiento (sistema del 28 de setiembre de 2026).
   Corto, una vez y con motivo (ANALISIS.md, decisión 3). Todo se apaga con «reducir movimiento»
   y, sin JavaScript, todo se ve desde el principio. El JS es js/movimiento.js.

   data-aparece     La sección (o su contenedor) sube 20 px y aparece en 500 ms la primera vez
                    que entra en pantalla. Una por sección, nunca en cada tarjeta.
                    data-aparece="escalonado": sus hijos directos llegan de a uno, 80 ms entre
                    cada uno (los cuatro primeros; del quinto en adelante, juntos).
   data-entrada     El hero: sus hijos directos entran al cargar, escalonados; todo termina a los
                    600 ms. Solo CSS: no espera a ningún script.
   data-deriva      Una ilustración que se mueve 16 px como máximo mientras la página pasa
                    (8 hacia arriba, 8 hacia abajo). js/movimiento.js escribe --deriva.
   data-progreso    Un bloque alto con un hijo pegajoso (el momento de la taza de Nosotros):
                    js/movimiento.js escribe --progreso de 0 a 1 mientras el bloque cruza la
                    pantalla. Sin JS y con «reducir movimiento» vale 1 (el estado final), así
                    que la hoja de la página tiene que dibujar bien --progreso: 1.

   Red: html.js lo pone el <head> antes del primer pintado. Si js/movimiento.js no llega, a los
   3 s todo lo que estaba esperando aparece igual (mov-rescate). */

@media (prefers-reduced-motion: no-preference) {
  html.js [data-aparece] {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    animation: mov-rescate 0s linear 3s forwards;
  }
  html.js [data-aparece="escalonado"] { opacity: 1; transform: none; animation: none; }
  html.js [data-aparece="escalonado"] > * {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    animation: mov-rescate 0s linear 3s forwards;
  }
  html.mov-listo [data-aparece],
  html.mov-listo [data-aparece="escalonado"] > * { animation: none; }
  html.js [data-aparece].aparecio,
  html.js [data-aparece="escalonado"].aparecio > * {
    opacity: 1;
    transform: none;
    transition: opacity .5s cubic-bezier(.2, .6, .2, 1), transform .5s cubic-bezier(.2, .6, .2, 1);
  }
  html.js [data-aparece="escalonado"].aparecio > :nth-child(2) { transition-delay: 80ms; }
  html.js [data-aparece="escalonado"].aparecio > :nth-child(3) { transition-delay: 160ms; }
  html.js [data-aparece="escalonado"].aparecio > :nth-child(n+4) { transition-delay: 240ms; }

  [data-entrada] > * { animation: mov-entrada .45s cubic-bezier(.2, .6, .2, 1) both; }
  [data-entrada] > :nth-child(2) { animation-delay: 50ms; }
  [data-entrada] > :nth-child(3) { animation-delay: 100ms; }
  [data-entrada] > :nth-child(n+4) { animation-delay: 150ms; }   /* 150 + 450 = 600 ms */

  [data-deriva] { transform: translate3d(0, var(--deriva, 0px), 0); }
}

@keyframes mov-rescate { to { opacity: 1; transform: none; } }
@keyframes mov-entrada { from { opacity: 0; transform: translate3d(0, 16px, 0); } }

@media print {
  [data-aparece], [data-aparece] > *, [data-entrada] > * { opacity: 1 !important; transform: none !important; animation: none !important; }
}