Stagger Reveal Grid

<!--
  A CSS grid whose items start hidden; one observer reveals them with a
  per-item transition delay. Reduced motion / no-JS shows them immediately.
-->
<ul
  class="grid gap-3 [grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))]"
  data-stagger
>
  <li class="translate-y-4 rounded-xl border border-gray-200 bg-white p-4 text-sm text-gray-700 opacity-0 shadow-sm transition duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] data-[shown=true]:translate-y-0 data-[shown=true]:opacity-100 motion-reduce:translate-y-0 motion-reduce:opacity-100 motion-reduce:transition-none dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300">Realtime sync</li>
  <li class="translate-y-4 rounded-xl border border-gray-200 bg-white p-4 text-sm text-gray-700 opacity-0 shadow-sm transition duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] data-[shown=true]:translate-y-0 data-[shown=true]:opacity-100 motion-reduce:translate-y-0 motion-reduce:opacity-100 motion-reduce:transition-none dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300">Edge caching</li>
  <li class="translate-y-4 rounded-xl border border-gray-200 bg-white p-4 text-sm text-gray-700 opacity-0 shadow-sm transition duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] data-[shown=true]:translate-y-0 data-[shown=true]:opacity-100 motion-reduce:translate-y-0 motion-reduce:opacity-100 motion-reduce:transition-none dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300">Audit logs</li>
  <li class="translate-y-4 rounded-xl border border-gray-200 bg-white p-4 text-sm text-gray-700 opacity-0 shadow-sm transition duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] data-[shown=true]:translate-y-0 data-[shown=true]:opacity-100 motion-reduce:translate-y-0 motion-reduce:opacity-100 motion-reduce:transition-none dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300">SSO &amp; SCIM</li>
</ul>

<noscript>
  <style>[data-stagger] > * { opacity: 1 !important; transform: none !important; }</style>
</noscript>

<script>
  (function () {
    var grid = document.querySelector('[data-stagger]');
    if (!grid) return;
    var items = grid.children;
    function showAll() {
      for (var i = 0; i < items.length; i++) items[i].dataset.shown = 'true';
    }
    if (
      !('IntersectionObserver' in window) ||
      window.matchMedia('(prefers-reduced-motion: reduce)').matches
    ) {
      showAll();
      return;
    }
    var observer = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (!entry.isIntersecting) return;
          for (var i = 0; i < items.length; i++) {
            items[i].style.transitionDelay = i * 90 + 'ms';
          }
          showAll();
          observer.disconnect();
        });
      },
      { threshold: 0.15 }
    );
    observer.observe(grid);
  })();
</script>