Glow Cards beta

/* KATA Glow Cards — the border warms where the cursor passes. */
.k-glow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;font-family:var(--k-font);color:var(--k-ink)}
.k-glow{position:relative;background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;padding:18px}
.k-glow::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:radial-gradient(190px circle at var(--mx,50%) var(--my,50%), var(--k-accent), transparent 70%);-webkit-mask:linear-gradient(var(--k-on-color) 0 0) content-box, linear-gradient(var(--k-on-color) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--k-on-color) 0 0) content-box, linear-gradient(var(--k-on-color) 0 0);mask-composite:exclude;opacity:0;transition:opacity .25s;pointer-events:none}
.k-glow:hover::before{opacity:1}
.k-glow .ic{width:36px;height:36px;border-radius:10px;background:var(--k-accent-bg);color:var(--k-accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.k-glow h3{font-size:14.5px;font-weight:600}
.k-glow p{font-size:12.5px;line-height:1.75;color:var(--k-ink-2);margin-top:5px}
@media (max-width:640px){.k-glow-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.k-glow::before{display:none}}

// KATA Glow Cards — feeds each card the pointer's position.
document.querySelectorAll('.k-glow').forEach(function (card) {
  card.addEventListener('pointermove', function (e) {
    var r = card.getBoundingClientRect();
    card.style.setProperty('--mx', (e.clientX - r.left) + 'px');
    card.style.setProperty('--my', (e.clientY - r.top) + 'px');
  });
});