// Mechanisme: process-lottie-step-icons-minimal
import lottie from 'https://esm.sh/[email protected]';
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const ringData = (color) => ({
  v:'5.7.4', fr:30, ip:0, op:60, w:120, h:120, nm:'ring', ddd:0, assets:[],
  layers:[{ ddd:0, ind:1, ty:4, nm:'r', sr:1,
    ks:{ o:{a:1,k:[{t:0,s:[100]},{t:60,s:[100]}]}, r:{a:1,k:[{t:0,s:[0]},{t:60,s:[360]}]},
         p:{a:0,k:[60,60,0]}, a:{a:0,k:[0,0,0]},
         s:{a:1,k:[{t:0,s:[80,80,100]},{t:30,s:[110,110,100]},{t:60,s:[80,80,100]}]} },
    shapes:[
      { ty:'gr', it:[
        { ty:'el', p:{a:0,k:[0,0]}, s:{a:0,k:[64,64]} },
        { ty:'st', c:{a:0,k:color}, o:{a:0,k:100}, w:{a:0,k:2}, lc:2, lj:2 },
        { ty:'tr', p:{a:0,k:[0,0]}, a:{a:0,k:[0,0]}, s:{a:0,k:[100,100]}, r:{a:0,k:0}, o:{a:0,k:100} }
      ]}
    ], ip:0, op:60, st:0, bm:0 }]
});
const ink = [10/255,10/255,10/255,1];
document.querySelectorAll('.lt-icon').forEach((host) => {
  const anim = lottie.loadAnimation({ container: host, renderer:'svg', loop:true, autoplay:false, animationData: ringData(ink) });
  host._anim = anim;
});
const items = gsap.utils ? null : null;
const steps = document.querySelectorAll('.lt-step');
const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.isIntersecting) {
      const idx = Array.from(steps).indexOf(e.target);
      const host = e.target.querySelector('.lt-icon');
      e.target.classList.add('is-on');
      if (host && host._anim && !reduce) setTimeout(() => host._anim.play(), idx * 220);
      io.unobserve(e.target);
    }
  });
}, { threshold: 0.4 });
steps.forEach(s => io.observe(s));

<!-- Skeleton: process-lottie-step-icons-minimal -->
<section class="lt-wrap">
  <header class="lt-head">
    <span class="lt-eyebrow">Process / 04 stappen</span>
    <h2>Vier stille bewegingen.</h2>
  </header>
  <ol class="lt-grid">
    <li class="lt-step"><span class="lt-num">01</span><div class="lt-icon"></div><h3>Brief</h3><p>De vraag scherp krijgen.</p></li>
    <li class="lt-step"><span class="lt-num">02</span><div class="lt-icon"></div><h3>Concept</h3><p>Vorm volgt richting.</p></li>
    <li class="lt-step"><span class="lt-num">03</span><div class="lt-icon"></div><h3>Build</h3><p>Code als tekenpotlood.</p></li>
    <li class="lt-step"><span class="lt-num">04</span><div class="lt-icon"></div><h3>Live</h3><p>Klein, dan groter.</p></li>
  </ol>
</section>

/* Styling: process-lottie-step-icons-minimal — minimal */
.lt-wrap { background:#F4F1EB; color:#0A0A0A; padding:14vh 8vw; min-height:100vh; font-family:'Inter',system-ui,sans-serif; font-weight:300; }
.lt-head { max-width:42rem; margin-bottom:8rem; border-top:1px solid rgba(10,10,10,.18); padding-top:1.25rem; }
.lt-eyebrow { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(10,10,10,.55); }
.lt-head h2 { font-weight:300; font-size:clamp(1.8rem,3.2vw,2.6rem); margin:.6rem 0 0; letter-spacing:-.01em; }
.lt-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.lt-step { padding:2rem 1.5rem; border-top:1px solid rgba(10,10,10,.18); border-right:1px solid rgba(10,10,10,.18); }
.lt-step:last-child { border-right:none; }
.lt-num { font-size:.72rem; letter-spacing:.18em; color:rgba(10,10,10,.5); }
.lt-icon { width:96px; height:96px; margin:1.5rem 0; }
.lt-step h3 { font-weight:300; font-size:1.2rem; margin:0 0 .4rem; letter-spacing:-.01em; }
.lt-step p { color:rgba(10,10,10,.55); margin:0; font-size:.95rem; line-height:1.5; }