Hero-beeld groeit tot volledig beeld Nieuw

<!-- Hero-beeld groeit tot volledig beeld · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hmg"><div class="hmg__sc" tabindex="0" aria-label="Voorbeeld: aanbouw-hero, scroll om het beeld te laten groeien"><div class="hmg__track"><div class="hmg__pin">
<p class="hmg__k">[ Aanbouw · Amersfoort ]</p>
<h4 class="hmg__t">Ruimte erbij,<br>in zes weken gebouwd.</h4>
<div class="hmg__m"><img src="https://neddev.com/lab-media/hero-media-groeit-1.webp" alt="Nieuwe aanbouw met stalen pui aan een bakstenen rijtjeshuis" loading="lazy"><p class="hmg__cap"><b>Familie Bakker, Amersfoort</b><span>18 m² · stalen pui · opgeleverd mei 2026</span></p></div>
</div></div>
<div class="hmg__na"><p class="hmg__nk">[ 01 ] Werkwijze</p><p>Daarna loopt de pagina gewoon door: werkwijze, prijzen en projecten.</p></div>
</div></div>
</div>

/* Hero-beeld groeit tot volledig beeld · NedDev · eigen werk. */
@property --hmg-p{syntax:'<number>';inherits:true;initial-value:0}
.hmg{position:absolute;inset:0;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;container-type:size}
.hmg__sc{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scroll-timeline:--hmg-tl y}
.hmg__sc:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.hmg__track{height:250cqh;position:relative}
.hmg__pin{position:sticky;top:0;height:100cqh;overflow:hidden;--hmg-p:0}
@supports (animation-timeline: scroll()){.hmg__pin{animation:hmg-groei linear both;animation-timeline:--hmg-tl;animation-range:0% 62%}}
@keyframes hmg-groei{to{--hmg-p:1}}
.hmg__k{position:absolute;left:14px;top:12px;margin:0;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#555;opacity:calc(1 - var(--hmg-p)*2)}
.hmg__t{position:absolute;left:14px;top:28px;margin:0;font:700 clamp(17px,6.2cqi,40px)/1.04 'Switzer',sans-serif;letter-spacing:-.03em;opacity:calc(1 - var(--hmg-p)*2.2);transform:translateY(calc(var(--hmg-p)*-24px))}
.hmg__m{position:absolute;left:50%;bottom:calc((1 - var(--hmg-p))*8cqh);width:calc(44% + 56%*var(--hmg-p));height:calc(46% + 54%*var(--hmg-p) - (1 - var(--hmg-p))*8cqh);transform:translateX(-50%);border-radius:calc((1 - var(--hmg-p))*8px);overflow:hidden;background:#cfc9c0}
.hmg__m img{display:block;width:100%;height:100%;object-fit:cover}
.hmg__cap{position:absolute;left:14px;bottom:12px;margin:0;color:#fff;display:flex;flex-direction:column;gap:2px;opacity:calc((var(--hmg-p) - .7)*3.4);text-shadow:0 1px 10px rgba(0,0,0,.45)}
.hmg__cap b{font:700 clamp(13px,4cqi,22px)/1.1 'Switzer',sans-serif;letter-spacing:-.01em}
.hmg__cap span{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.04em}
.hmg__na{padding:16px 14px 30px;font-size:13px;line-height:1.5}
.hmg__na p{margin:0 0 4px}
.hmg__nk{font:600 10.5px 'JetBrains Mono',monospace;color:#b8330a;letter-spacing:.06em}
@media (prefers-reduced-motion: reduce){.hmg__pin{animation:none!important}.hmg__track{height:auto}.hmg__pin{position:relative}}

// Hero-beeld groeit tot volledig beeld · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.hmg')||root;function lab_drift(sc,host,speed){if(matchMedia('(prefers-reduced-motion: reduce)').matches)return;var on=true,t0=0;function stop(){on=false;}
['wheel','touchstart','pointerdown','keydown','focusin'].forEach(function(ev){host.addEventListener(ev,stop,{passive:true});});
function f(now){if(!on)return;if(!t0)t0=now;var max=sc.scrollHeight-sc.clientHeight,ph=(now-t0)/1000*speed;sc.scrollTop=max*(.5-.5*Math.cos(ph));requestAnimationFrame(f);}
setTimeout(function(){if(on)requestAnimationFrame(f);},900);}
var sc=root.querySelector('.hmg__sc'),pin=root.querySelector('.hmg__pin');
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches;
if(!rm&&!(window.CSS&&CSS.supports&&CSS.supports('animation-timeline: scroll()'))){var tick=false;
  function upd(){tick=false;var max=sc.scrollHeight-sc.clientHeight;var p=max>0?Math.min(1,sc.scrollTop/(max*.62)):0;pin.style.setProperty('--hmg-p',p.toFixed(4));}
  sc.addEventListener('scroll',function(){if(!tick){tick=true;requestAnimationFrame(upd);}},{passive:true});upd();}
if(!rm)lab_drift(sc,root,.32);
}
init(document.querySelector('.jouw-container'));