/* campus-meli -- capa de movimiento ampliado (E-08 a E-15, pendiente de JAC, P-13). DESIGN.md, Components >
   Capa de dinamismo > "Capa de movimiento ampliado". Todo depende de <html data-movimiento="ampliado"> y de
   prefers-reduced-motion: no-preference; sin el atributo el campus queda con la capa aprobada (sombra + hover).
   El JS de las piezas esta en /assets/js/movimiento.js. Si JAC rechaza una pieza, se borra su bloque. */

@media (prefers-reduced-motion: no-preference) {
  /* ---- E-09 Transicion entre paginas: el chrome queda quieto, cambia el contenido ----
     @view-transition no admite selector: sin el atributo la regla queda inerte por CSS (la raiz no anima: la
     transicion termina en el mismo cuadro y el cambio es el de una navegacion normal); movimiento.js ademas la salta. */
  @view-transition { navigation: auto; }
  html:not([data-movimiento="ampliado"])::view-transition-group(root),
  html:not([data-movimiento="ampliado"])::view-transition-old(root),
  html:not([data-movimiento="ampliado"])::view-transition-new(root) { animation: none; }
  /* El canal de la barra (scrollbar-gutter: stable) es global y vive en base.css. */
  html[data-movimiento="ampliado"] .topbar { view-transition-name: barra; }
  html[data-movimiento="ampliado"] .nav { view-transition-name: riel; }
  html[data-movimiento="ampliado"] .pie { view-transition-name: pie; }
  html[data-movimiento="ampliado"] main { view-transition-name: contenido; }
  html[data-movimiento="ampliado"]::view-transition-group(barra),
  html[data-movimiento="ampliado"]::view-transition-group(riel),
  html[data-movimiento="ampliado"]::view-transition-group(pie),
  html[data-movimiento="ampliado"]::view-transition-new(barra),
  html[data-movimiento="ampliado"]::view-transition-new(riel),
  html[data-movimiento="ampliado"]::view-transition-new(pie) { animation: none; }
  html[data-movimiento="ampliado"]::view-transition-old(barra),
  html[data-movimiento="ampliado"]::view-transition-old(riel),
  html[data-movimiento="ampliado"]::view-transition-old(pie) { display: none; }
  html[data-movimiento="ampliado"]::view-transition-group(contenido) { animation-duration: 220ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  html[data-movimiento="ampliado"]::view-transition-old(contenido) { animation: mov-salir 120ms cubic-bezier(.22, 1, .36, 1) both; }
  html[data-movimiento="ampliado"]::view-transition-new(contenido) { animation: mov-entrar 220ms cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes mov-salir { to { opacity: 0; } }
  @keyframes mov-entrar { from { opacity: 0; transform: translateY(8px); } }

  /* ---- E-10 Microinteracciones de seleccion: el tick de la casilla y el punto del radio propios
     (componente casilla/radio de base.css) entran con opacidad + crecimiento desde 60%. Al desmarcar, directo.
     Con :focus: solo al marcar (el input toma el foco), no en las casillas ya marcadas al cargar. ---- */
  html[data-movimiento="ampliado"] :is(.cq-opcion, .opcion, .mp5-opcion, .escala, .mp6-escala, .ed-casilla, .asistencia-casilla, .admin-radio, .nav__fijar) input:is([type="checkbox"], [type="radio"]):checked:focus::after { animation: mov-tick 120ms cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes mov-tick { from { opacity: 0; transform: var(--tick-desde, scale(.6)); } }

  /* ---- E-14 Celebracion: el filete (.cq-filete, cuestionario.css) crece desde la izquierda ---- */
  html[data-movimiento="ampliado"] [data-celebrar-filete] { transform-origin: left center; }
}