Fade In On Scroll

<section class="reveal" data-reveal>
  <h2>Ship faster</h2>
  <p>Everything you need to go from idea to production, in one place.</p>
</section>

<section class="reveal" data-reveal data-reveal-delay="120">
  <h2>Scale calmly</h2>
  <p>Autoscaling, observability, and rollbacks that take one click.</p>
</section>

<!-- Without JS the observer never runs, so unhide everything up front. -->
<noscript>
  <style>
    .reveal { opacity: 1 !important; transform: none !important; }
  </style>
</noscript>

<script>
  (function () {
    var nodes = document.querySelectorAll('[data-reveal]');

    // No observer support, or the user asked for less motion: show immediately.
    if (
      !('IntersectionObserver' in window) ||
      window.matchMedia('(prefers-reduced-motion: reduce)').matches
    ) {
      nodes.forEach(function (node) {
        node.classList.add('is-visible');
      });
      return;
    }

    var observer = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (!entry.isIntersecting) return;
          var node = entry.target;
          node.style.transitionDelay = (node.dataset.revealDelay || 0) + 'ms';
          node.classList.add('is-visible');
          observer.unobserve(node);
        });
      },
      { threshold: 0.15, rootMargin: '0px 0px -10% 0px' }
    );

    nodes.forEach(function (node) {
      observer.observe(node);
    });
  })();
</script>