Pulse Grid

<div class="nuda-skpgrid" aria-hidden="true">
  <!-- 3x3 tiles; stagger delays diagonally: (row + col) * 0.12s -->
  <span style="animation-delay:0s"></span>
  <span style="animation-delay:.12s"></span>
  <span style="animation-delay:.24s"></span>
  <span style="animation-delay:.12s"></span>
  <span style="animation-delay:.24s"></span>
  <span style="animation-delay:.36s"></span>
  <span style="animation-delay:.24s"></span>
  <span style="animation-delay:.36s"></span>
  <span style="animation-delay:.48s"></span>
</div>

/* Pulse Grid Skeleton
   3x3 grid of tiles pulsing in a diagonal wave (transform: scale + opacity).
   Customize: --skpgrid-tile */

.nuda-skpgrid {
  --skpgrid-tile: rgba(228, 255, 84, 0.16);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
  width: fit-content;
}

.nuda-skpgrid span {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--skpgrid-tile);
  transform-origin: center;
  animation: nuda-skpgrid 1.5s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes nuda-skpgrid {
  0%, 100% { transform: scale(0.82); opacity: 0.35; }
  50%      { transform: scale(1);    opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-skpgrid span { animation: none; opacity: 0.55; }
}