Scroll Reveal Slide

<!-- The observer watches only this element, not the window. -->
<div class="reveal-slide max-w-sm translate-x-[-40px] opacity-0 transition-[transform,opacity] duration-700 ease-out motion-reduce:transition-none" data-reveal-slide>
  <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Slides into view</h3>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Reveal panels as they enter the viewport, from any direction.</p>
  </div>
</div>

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

<script>
  (function () {
    var el = document.querySelector('[data-reveal-slide]');
    if (!el) return;
    function show() { el.style.opacity = '1'; el.style.transform = 'translate(0,0)'; }
    if (!('IntersectionObserver' in window) || window.matchMedia('(prefers-reduced-motion: reduce)').matches) { show(); return; }
    var obs = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) { if (e.isIntersecting) { show(); obs.disconnect(); } });
    }, { threshold: 0.2 });
    obs.observe(el);
  })();
</script>