/* Allocation lattice. See static/components/lattice.js for the concept. */

.lattice {
  --lattice-columns: 16;
  --cell-size: 6px;
  --cell-gap: 3px;
  display: grid;
  grid-template-columns: repeat(var(--lattice-columns), var(--cell-size));
  gap: var(--cell-gap);
  align-content: start;
}

.lattice-cell {
  width: var(--cell-size);
  height: var(--cell-size);
  border-radius: 1px;
  background: var(--border);
  transition: background var(--dur-base) var(--ease-out);
}

/* ---- spec: lit = the GPUs this size gives you ---------------------------- */
.lattice-spec {
  --cell-size: 9px;
  --cell-gap: 4px;
}
.lattice-spec .lattice-cell.is-on { background: var(--graph); }

/* ---- claim: your allocation lighting up during launch -------------------- */
.lattice-claim {
  --cell-size: 10px;
  --cell-gap: 5px;
}

.lattice-claim .lattice-cell.is-on {
  background: var(--graph);
  box-shadow: 0 0 8px var(--graph-soft);
  animation: rc-cell-claim var(--dur-base) var(--ease-spring) backwards;
  /* Stagger by position so the allocation reads as filling in, not blinking on. */
  animation-delay: calc(var(--cell-index, 0) * 26ms);
}

/* Cells not yet claimed breathe while we wait. Slow on purpose — a fast pulse
   next to a multi-minute wait reads as anxiety rather than progress. */
.lattice-claim.is-pending .lattice-cell:not(.is-on) {
  animation: rc-cell-breathe 2.4s var(--ease-out) infinite;
  animation-delay: calc(var(--cell-index, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  /* Claimed cells must stay VISIBLE, not vanish. motion.css collapses duration
     globally; this makes the end state explicit so a claimed cell is never
     left at the animation's opacity-0 start frame. */
  .lattice-claim .lattice-cell.is-on {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .lattice-claim.is-pending .lattice-cell:not(.is-on) {
    animation: none;
    opacity: 0.6;
  }
}