Progressive: Describe how you would build a Progressive Image Loader using CSS and JavaScript where each image initially displays as a tiny blurred placeholder and then transitions smoothly to the full-resolution version once it finishes loading, using In

Build a "Progressive Image Loader" — a CSS + JavaScript utility that implements progressive image loading: images start as a tiny blurred placeholder and transition smoothly to the full-resolution version once loaded. This progressive enhancement pattern makes pages feel fast even on slow connections.

Requirements:
1. Core mechanism: each image container holds two elements — a tiny placeholder (20px wide, Base64-inlined or low-quality src) displayed immediately with CSS `filter:blur(20px)` and `transform:scale(1.1)`, and the full image loading in the background via `new Image()`. When the full image fires `onload`, swap it in with a progressive fade (opacity transition 0.5s).
2. HTML structure: `<div class="progressive-img" data-src="full.jpg" data-placeholder="tiny.jpg">`. The JavaScript scans for all `.progressive-img` elements, sets up the placeholder, and begins loading the full image. This progressive approach requires zero changes to existing HTML beyond adding data attributes.
3. Intersection Observer: only begin loading full images when they enter the viewport (lazy loading). `threshold: 0.1`. This progressive strategy saves bandwidth — images below the fold don't load until the user scrolls near them. Once loaded, unobserve the element.
4. CSS transitions: placeholder state: `filter:blur(20px); transform:scale(1.1); transition:filter 0.5s ease, transform 0.5s ease;`. Loaded state: `filter:blur(0); transform:scale(1);`. The progressive reveal creates an elegant focus-in effect.
5. Fallback: if the full image fails to load (`onerror`), keep the placeholder and overlay a small "Image unavailable" label. If IntersectionObserver is unsupported, load all images immediately (progressive enhancement — works everywhere, better where supported).
6. Gallery demo: a responsive CSS grid gallery (3 columns desktop, 2 tablet, 1 mobile) with 12 placeholder images using `picsum.photos` URLs. Each image uses the progressive loading system. Include a "Simulate Slow Network" button that adds a 3-second artificial delay to demonstrate the progressive blur-to-clear effect.

Starter CSS:
```css
.progressive-img { position:relative; overflow:hidden; background:#f3f4f6; border-radius:8px; }
.progressive-img img { display:block; width:100%; height:auto; }
.progressive-img .placeholder { filter:blur(20px); transform:scale(1.1); transition:opacity .5s ease; }
.progressive-img .full { position:absolute; top:0; left:0; opacity:0; transition:opacity .5s ease; }
.progressive-img.loaded .full { opacity:1; }
.progressive-img.loaded .placeholder { opacity:0; }
```