/* ==========================================================================
   Finde · Sistema de movimiento (D-16)
   Se linkea (+ js/motion.js) solo en las pantallas que participan — hoy,
   las 10 del onboarding. Ver prototipo/motion.html para el lenguaje
   completo con demos en vivo, y docs/decisiones.md D-16 para el porqué de
   cada parte.
   ========================================================================== */

/* --- Transición entre pantallas -------------------------------------------
   Revisado 2026-09-10: la primera versión usaba la View Transitions API
   (navegación cross-document). Se veía mal — el navegador renderiza esa
   transición como una captura de la pantalla completa, FUERA de .phone
   (que recorta con overflow:hidden), así que el slide se salía del marco
   del teléfono en vez de quedar contenido en él.

   Esta versión es más simple y más confiable: js/motion.js intercepta el
   click en un link de navegación, agrega .screen--leaving (la salida es el
   DOM real de esta página, recortado por .phone como cualquier otro
   contenido — no una foto) y recién ahí navega. La pantalla nueva ya trae
   su propia entrada por CSS puro al cargar — sin depender de que el
   navegador soporte ninguna API especial, funciona en cualquiera.
   ------------------------------------------------------------------------ */
/* D-44 · "Onboarding 1" de movimiento-ambiente.html (idea de "Onboarding
   Dialog", 21st.dev). Jerson eligió la forma 1. Antes la pantalla entera
   entraba deslizándose desde la derecha y salía hacia la izquierda — botón
   incluido, así que lo que se iba a tocar se movía. Ahora la pantalla no se
   desplaza: lo que sale se funde hacia arriba, lo que entra sube enfocándose
   en cascada (un hijo tras otro), y el pie con el botón se queda donde está.
   Los puntos del progreso se estiran desde el paso anterior (js/chrome.js). */
.screen__body > * { animation: finde-enfoca 520ms var(--spring-suave, var(--ease)) both; }
.screen__body > :nth-child(2) { animation-delay: 45ms; }
.screen__body > :nth-child(3) { animation-delay: 90ms; }
.screen__body > :nth-child(4) { animation-delay: 135ms; }
.screen__body > :nth-child(n+5) { animation-delay: 180ms; }
@keyframes finde-enfoca { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.screen__footer { animation: finde-pie-in 240ms var(--ease) both; }
@keyframes finde-pie-in { from { opacity: 0; } }
.screen--leaving .screen__body { animation: finde-screen-out 160ms var(--ease-in) both; }
@keyframes finde-screen-out { to { opacity: 0; transform: translateY(-6px); } }

/* --- Cascada --------------------------------------------------------------
   .cascade-in en el contenedor + --i:N (índice) en cada hijo directo. El
   JS de cada pantalla solo tiene que poner esas dos cosas al armar la
   lista — el resto (delta, tope de ~300ms total) ya está acá.
   ------------------------------------------------------------------------ */
.cascade-in > * {
  animation: finde-cascade-in var(--dur-base) var(--ease) both;
  animation-delay: calc(var(--stagger-step) * var(--i, 0));
}
@keyframes finde-cascade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Variante para avatares (resumen-familia.html): pop de escala en vez de
   subir, con un delta más largo — son pocos, se puede notar más cada uno. */
.cascade-in--avatares > * {
  animation-name: finde-cascade-pop;
  animation-delay: calc(var(--stagger-step) * 2 * var(--i, 0));
}
@keyframes finde-cascade-pop { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: scale(1); } }


/* --- D-57 · Transición real entre pantallas (View Transitions entre documentos)
   Jerson, en el celular: "al pasar de pantalla a pantalla se mueve demasiado el
   'Paso A de B', se ve feo, y pareciera que la página se recarga en lugar de
   deslizarse". Cada paso es una página aparte, así que el navegador pinta la
   nueva desde cero. Donde el navegador lo soporta (Chrome/Edge 126+, Safari 18.2+,
   o sea iPhone con iOS 18.2 o más), se usa la transición nativa entre páginas:
   - la barra de pasos y el pie con el botón tienen nombre propio y se QUEDAN
     (no se van ni vuelven a entrar);
   - el cuerpo se desliza: el que sale hacia la izquierda, el que entra desde la
     derecha (al volver, al revés), recortado a su propio rectángulo — así en
     escritorio no se sale del marco del teléfono (el problema de D-16);
   - la cascada de entrada y la salida por JS se apagan (html.finde-vt, lo pone
     js/motion.js), para no animar dos veces.
   Donde no hay soporte, sigue lo de D-44. */
@view-transition { navigation: auto; }
.stepbar { view-transition-name: finde-pasos; }
.screen__footer { view-transition-name: finde-pie; }
.screen__body { view-transition-name: finde-cuerpo; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(finde-cuerpo) { overflow: clip; animation-duration: 530ms; }
::view-transition-old(finde-cuerpo) { animation: finde-vt-sale 220ms var(--ease-in) both; }
::view-transition-new(finde-cuerpo) { animation: finde-vt-entra 420ms cubic-bezier(.2, .8, .2, 1) 110ms both; }
html:active-view-transition-type(atras)::view-transition-old(finde-cuerpo) { animation-name: finde-vt-sale-atras; }
html:active-view-transition-type(atras)::view-transition-new(finde-cuerpo) { animation-name: finde-vt-entra-atras; }
@keyframes finde-vt-sale { to { transform: translateX(-28%); opacity: 0; } }
@keyframes finde-vt-entra { from { transform: translateX(36%); opacity: 0; } }
@keyframes finde-vt-sale-atras { to { transform: translateX(28%); opacity: 0; } }
@keyframes finde-vt-entra-atras { from { transform: translateX(-36%); opacity: 0; } }
html.finde-vt .screen__body > *, html.finde-vt .screen__footer { animation: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}