Glans die de muis volgt Nieuw

<!-- Glans die de muis volgt · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hgk">
<a class="hgk__card" href="#hv-glans-kaart" aria-label="Cadeaukaart van 50 euro bestellen bij Boekhandel Van Pelt">
<span class="hgk__top"><span class="hgk__brand">Boekhandel Van Pelt</span><span class="hgk__city">Zutphen</span></span>
<span class="hgk__amt">€ 50</span>
<span class="hgk__bot"><span class="hgk__lbl">Cadeaukaart</span><span class="hgk__nr">Geldig tot 31 december 2027</span></span>
<span class="hgk__shine" aria-hidden="true"></span>
</a>
</div>
</div>

/* Glans die de muis volgt · NedDev · eigen werk. */
.hgk{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:#f4f3f1;font-family:'Switzer',sans-serif;container-type:size}
.hgk *,.hgk *::before,.hgk *::after{box-sizing:border-box}
.hgk__card{--hgk-x:30%;--hgk-y:20%;--hgk-sx:0px;--hgk-sy:12px;position:relative;width:min(290px,78cqw);aspect-ratio:1.586;max-height:82cqh;display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px;border-radius:8px;overflow:hidden;background:#0a0a0a;color:#fff;text-decoration:none;outline:none;box-shadow:var(--hgk-sx) var(--hgk-sy) 26px -12px rgba(10,10,10,.55),0 1px 2px rgba(10,10,10,.3);transition:box-shadow .25s ease}
.hgk__card::before{content:'';position:absolute;right:-30%;bottom:-55%;width:90%;aspect-ratio:1;border-radius:50%;background:#F5480F;opacity:.92}
.hgk__card:focus-visible{outline:2px solid #F5480F;outline-offset:4px}
.hgk__top,.hgk__bot,.hgk__amt{position:relative;z-index:1}
.hgk__top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.hgk__brand{font:600 14px/1.2 'Switzer',sans-serif}
.hgk__city{font:400 12px/1.2 'Switzer',sans-serif;color:#cfccc6}
.hgk__amt{font:700 clamp(30px,12cqw,46px)/1 'Switzer',sans-serif;letter-spacing:-.03em}
.hgk__bot{display:flex;flex-direction:column;gap:2px}
.hgk__lbl{font:500 13px/1.2 'Switzer',sans-serif}
.hgk__nr{font:400 12px/1.2 'Switzer',sans-serif;color:#e4e1dc}
.hgk__shine{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--hgk-x) var(--hgk-y),rgba(255,255,255,.34),rgba(255,255,255,.08) 22%,rgba(255,255,255,0) 46%),linear-gradient(115deg,rgba(255,255,255,0) calc(var(--hgk-x) - 22%),rgba(255,255,255,.13) var(--hgk-x),rgba(255,255,255,0) calc(var(--hgk-x) + 22%));mix-blend-mode:screen;opacity:.55;transition:opacity .3s ease}
.hgk__card:hover .hgk__shine,.hgk__card.is-live .hgk__shine{opacity:1}
.hgk__card.is-sweep .hgk__shine{animation:hgk-sweep 1.1s cubic-bezier(.4,0,.2,1) 1}
@keyframes hgk-sweep{0%{--hgk-x:-20%}100%{--hgk-x:120%}}
@property --hgk-x{syntax:'<percentage>';inherits:true;initial-value:30%}
@property --hgk-y{syntax:'<percentage>';inherits:true;initial-value:20%}
@media (prefers-reduced-motion:reduce){.hgk__card{transition:none}.hgk__shine{transition:none;opacity:.8}.hgk__card.is-sweep .hgk__shine{animation:none}}

// Glans die de muis volgt · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var c=root.querySelector('.hgk__card');if(!c)return;
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,raf=0,ex=0,ey=0;
function apply(){raf=0;var r=c.getBoundingClientRect();var nx=Math.max(0,Math.min(1,(ex-r.left)/r.width)),ny=Math.max(0,Math.min(1,(ey-r.top)/r.height));c.style.setProperty('--hgk-x',(nx*100).toFixed(1)+'%');c.style.setProperty('--hgk-y',(ny*100).toFixed(1)+'%');c.style.setProperty('--hgk-sx',((.5-nx)*14).toFixed(1)+'px');c.style.setProperty('--hgk-sy',(8+(.5-ny)*10).toFixed(1)+'px');}
if(!rm){
var area=root.querySelector('.hgk');
area.addEventListener('pointermove',function(e){if(e.pointerType==='touch')return;ex=e.clientX;ey=e.clientY;c.classList.add('is-live');if(!raf)raf=requestAnimationFrame(apply);});
area.addEventListener('pointerleave',function(){c.classList.remove('is-live');c.style.setProperty('--hgk-x','30%');c.style.setProperty('--hgk-y','20%');c.style.setProperty('--hgk-sx','0px');c.style.setProperty('--hgk-sy','12px');});
c.addEventListener('focus',function(){if(!c.matches(':focus-visible'))return;c.classList.remove('is-sweep');void c.offsetWidth;c.classList.add('is-sweep');});
c.addEventListener('animationend',function(){c.classList.remove('is-sweep');});
}
}
init(document.querySelector('.jouw-container'));