Kaarten die uitwaaieren New

<!-- Kaarten die uitwaaieren · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="fsc"><div class="fsc__deck" role="button" tabindex="0" aria-pressed="false" aria-label="Waaier de projecten uit">
<div class="fsc__c"><div class="fsc__art fsc__art--0"></div><div class="fsc__cap"><span>01</span><b>Keuken</b><small>Leiden · 2026</small></div></div>
<div class="fsc__c"><div class="fsc__art fsc__art--1"></div><div class="fsc__cap"><span>02</span><b>Badkamer</b><small>Gouda · 2026</small></div></div>
<div class="fsc__c"><div class="fsc__art fsc__art--2"></div><div class="fsc__cap"><span>03</span><b>Zolder</b><small>Delft · 2025</small></div></div>
<div class="fsc__c"><div class="fsc__art fsc__art--3"></div><div class="fsc__cap"><span>04</span><b>Gevel</b><small>Haarlem · 2025</small></div></div>
</div><div class="fsc__hint"><span>Recente projecten</span><span class="fsc__st">Klik of hover</span></div></div>
</div>

/* Kaarten die uitwaaieren · NedDev · eigen werk. */
.fsc{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;container-type:size;--w:min(108px,25cqw);overflow:hidden}
.fsc__deck{position:absolute;left:calc(50% - var(--w) / 2);top:calc(50% - var(--w) * .66 - 6px);width:var(--w);aspect-ratio:4/5.3;cursor:pointer;outline:none}
.fsc__deck:focus-visible .fsc__c:last-child{outline:2px solid #F5480F;outline-offset:3px}
.fsc__c{position:absolute;inset:0;background:#fff;border-radius:5px;padding:5px;display:flex;flex-direction:column;gap:5px;box-shadow:0 1px 0 rgba(10,10,10,.08),0 10px 24px -14px rgba(10,10,10,.45);transform-origin:50% 115%;transition:transform .55s cubic-bezier(.3,1.25,.5,1),box-shadow .3s;will-change:transform}
.fsc__art{flex:1;border-radius:3px}
.fsc__cap{display:grid;grid-template-columns:auto 1fr;column-gap:5px;align-items:baseline;padding:0 2px 1px}
.fsc__cap span{font:500 8.5px 'JetBrains Mono',monospace;color:#F5480F;grid-row:span 2}
.fsc__cap b{font-size:11.5px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.fsc__cap small{font-size:9.5px;color:#6b6762}
.fsc__art--0{background:linear-gradient(180deg,transparent 52%,#F5480F 52% 56%,transparent 56%),linear-gradient(180deg,transparent 14%,#0a0a0a 14% 34%,transparent 34% 56%,#0a0a0a 56%),repeating-linear-gradient(90deg,transparent 0 31%,#3a3633 31% 32.5%),#e9e4dc}
.fsc__art--1{background:radial-gradient(circle at 50% 34%,#F5480F 0 17%,transparent 17.5%),linear-gradient(180deg,transparent 62%,#0a0a0a 62% 72%,transparent 72%),repeating-linear-gradient(0deg,#cfc8be 0 1px,transparent 1px 11px),repeating-linear-gradient(90deg,#cfc8be 0 1px,transparent 1px 11px),#f1ede7}
.fsc__art--2{background:linear-gradient(#F5480F,#F5480F) 50% 42%/26% 22% no-repeat,linear-gradient(135deg,#0a0a0a 0 30%,transparent 30%),linear-gradient(225deg,#0a0a0a 0 30%,transparent 30%),linear-gradient(180deg,transparent 74%,#b9875a 74%),#ece6dc}
.fsc__art--3{background:linear-gradient(#F5480F,#F5480F) 20% 26%/24% 26% no-repeat,linear-gradient(#F5480F,#F5480F) 80% 26%/24% 26% no-repeat,linear-gradient(#f4f3f1,#f4f3f1) 50% 100%/26% 36% no-repeat,#2a2522}
.fsc__hint{position:absolute;left:14px;right:14px;bottom:10px;display:flex;justify-content:space-between;font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#6b6762}
.fsc__st{color:#0a0a0a}
@media (prefers-reduced-motion:reduce){.fsc__c{transition:none}}

// Kaarten die uitwaaieren · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.fsc')||root;
var deck=root.querySelector('.fsc__deck'),cs=[].slice.call(root.querySelectorAll('.fsc__c')),st=root.querySelector('.fsc__st');
var open=false,hov=-1,touched=false,timer=0,n=cs.length;
var REST=[[-4,-3,2],[3,-1,1],[-2,1,0],[0,0,0]],ANG=[-17,-6,6,17],XS=[-1.38,-.47,.47,1.38],YS=[16,3,3,16];
function lay(){var w=deck.offsetWidth,f=Math.min(1,root.clientWidth/420);cs.forEach(function(c,i){var t;
if(open){var lift=i===hov?-16:0;t='translate('+(XS[i]*w*.6*f).toFixed(1)+'px,'+(YS[i]+lift)+'px) rotate('+ANG[i]+'deg)'+(i===hov?' scale(1.05)':'');c.style.zIndex=i===hov?9:i+1;}
else{var r=REST[i];t='translate('+r[0]+'px,'+r[2]+'px) rotate('+r[1]+'deg)';c.style.zIndex=i+1;}
c.style.transform=t;});deck.setAttribute('aria-pressed',open?'true':'false');st.textContent=open?'4 projecten':'Klik of hover';}
function set(o){open=o;if(!o)hov=-1;lay();}
deck.addEventListener('mouseenter',function(){touched=true;set(true);});deck.addEventListener('mouseleave',function(){set(false);});
deck.addEventListener('click',function(){touched=true;set(!open);});
deck.addEventListener('keydown',function(e){if(e.key==='Enter'||e.key===' '){e.preventDefault();touched=true;set(!open);}});
cs.forEach(function(c,i){c.addEventListener('mouseenter',function(){if(open){hov=i;lay();}});c.addEventListener('mouseleave',function(){if(hov===i){hov=-1;lay();}});});
window.addEventListener('resize',lay);lay();
if(!matchMedia('(prefers-reduced-motion: reduce)').matches)(function loop(){timer=setTimeout(function(){if(touched)return;set(!open);loop();},open?2600:1000);})();
}
init(document.querySelector('.jouw-container'));