/* grid-in.css — CUÁNDO se ve una rejilla de fotos, y con qué transición entra.
 *
 * Hermano de `grid.css` del prototipo de Adán: el JS (`gridin.js`) decide el
 * MOMENTO y no escribe tiempos; la duración y la curva viven aquí y se leen
 * desde los tokens. La presentación de las piezas es del tema.
 *
 * La coreografía es la de `bp.filterable`: las piezas no se ven hasta que TODAS
 * han cargado. Aquí se oculta por OPACIDAD en vez de `visibility` porque la
 * rejilla de este producto es CSS Grid con `aspect-ratio` —la caja ya está
 * reservada, nada salta— y porque así la entrada puede ser una transición en
 * vez de un salto, que es lo que se pidió. */

/* 🔴 LA REJILLA NACE ESPERANDO — lo decide el CSS, no el JS, y eso NO es un
 * detalle de implementación: es el MOMENTO, que es lo que no se puede cambiar.
 *
 * En el prototipo de Adán la clase `grid--loading` viene en el marcado, así que
 * la rejilla nunca llega a verse sin estar lista. Mi primera versión la ponía
 * desde JavaScript y medido en el navegador con la red frenada eso daba un
 * PARPADEO: la rejilla aparecía con sus huecos vacíos, el script la ocultaba, y
 * volvía al cargar las fotos. Es peor que el defecto que viene a arreglar.
 *
 * Aquí el estado inicial es «esperando» y el JS sólo lo RETIRA (`data-grid-in` a
 * `done`), que es el mismo orden de su prototipo con el envoltorio de este
 * producto: no hace falta que el servidor escriba una clase de estado. */
[data-grid-in]:not([data-grid-in="done"]) > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--gridin-duration, .45s) var(--gridin-ease, ease),
              transform var(--gridin-duration, .45s) var(--gridin-ease, ease);
}

[data-grid-in="done"] > * {
  opacity: 1;
  transform: none;
}

/* Y quien no quiere movimiento no lo tiene: aparece, sin viaje. */
@media (prefers-reduced-motion: reduce) {
  [data-grid-in] > * { transition: none; }
}

/* 🚨 Y SIN JAVASCRIPT, LA REJILLA SE VE: lo revierte el `<noscript>` que emite
 * `partials/grid-in.html`. Ocultar en CSS lo que sólo el JS puede revelar es cómo
 * una galería entera desaparece el día que un script no carga — y este producto
 * se sirve a móviles viejos y a redes malas. */