/* ==========================================================================
   Cuadrícula decorativa de cruces "+" (.cross-grid; la llena cross_grid.js)
   - Se usa en la 404 (templates/404.html) y en la caja "Join us" de Aims (directory/aims.html).
   - Cada página decide dónde va y qué tiene encima; aquí solo la cuadrícula y sus cruces.
   ========================================================================== */

/* La cuadrícula
   - --cols: lo pone el JS a partir de data-cols del HTML. Las filas no se fijan: el JS crea las celdas
     y cada fila mide lo que su cruz (cuadrada). Con filas 1fr, si la página le da un alto fijo
     (data-rows="auto"), se aplastarían y las cruces se montarían unas sobre otras.
   - container-type: las cruces miden su letra en función del ancho de la cuadrícula (cqi),
     así encogen en el móvil sin media queries.
   - touch-action: none: al arrastrar el dedo encima no se desplaza la página (si no, el navegador
     se queda con el gesto y el JS deja de recibir pointermove). */
.cross-grid {
  container-type: inline-size;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--cols, 20), 1fr);
  align-content: start;   /* filas pegadas arriba; lo que sobre por abajo, lo recorta la página si quiere */
  touch-action: none;
  user-select: none;
}

/* Cada cruz, en reposo: gris y casi transparente
   - --opacity, --hue, --grade: valores aleatorios propios de cada cruz (los pone el JS).
   - font-size: 70% de lo que mide una celda (100cqi = ancho de la cuadrícula).
   - transition: al quitar el ratón vuelve a reposo poco a poco (se apaga en 0.8s). */
.cross-grid div {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(100cqi / var(--cols, 20) * 0.7);
  font-weight: 600;
  line-height: 1;
  color: hsl(var(--hue) 100% 49%);   /* al encenderse: entre #f39200 (tono 36) y #fecf03 (tono 49); en reposo, el grayscale lo pasa a gris */
  opacity: calc(var(--opacity) * 0.5);
  filter: grayscale(1);
  transition-property: opacity, rotate, filter;
  transition-duration: 0.8s, 0.4s, 0.6s;
  transition-timing-function: ease-in, ease-out, ease-out;
}

/* Tema oscuro: en reposo, más visibles (si no, apenas se ven sobre el fondo oscuro) */
[data-theme="dark"] .cross-grid div {
  opacity: calc(var(--opacity) + 0.2);
}

/* Cruz activa: en color, opaca y girada --grade cuartos de vuelta
   - :hover solo en dispositivos con ratón; [data-hover] es el equivalente táctil (lo pone el JS).
   - transition-duration: 0s: se enciende al instante; la transición de arriba solo actúa al apagarse. */
@media (hover: hover) and (pointer: fine) {
  .cross-grid div:hover {
    transition-duration: 0s;
    rotate: calc(var(--grade, 0) * 90deg);
    filter: grayscale(0);
    opacity: 1;
  }
}

.cross-grid div[data-hover] {
  transition-duration: 0s;
  rotate: calc(var(--grade, 0) * 90deg);
  filter: grayscale(0);
  opacity: 1;
}

/* Quien tenga pedido "reducir movimiento" en su sistema: se colorean pero no giran */
@media (prefers-reduced-motion: reduce) {
  .cross-grid div:hover,
  .cross-grid div[data-hover] {
    rotate: none;
  }
}