<div class="btn-shard-surface">
  <button class="btn-shard">
    <span class="btn-shard-canvas" aria-hidden="true"></span>
    <span class="btn-shard-label">Illuminate</span>
  </button>
</div>

.btn-shard-surface {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 56px;
  background: #0c0c0f;
  border-radius: 16px;
}
.btn-shard {
  position: relative;
  padding: 16px 44px;
  border: 1px solid rgba(232,213,176,0.2);
  background: linear-gradient(135deg, #1a1206 0%, #2c1f0a 100%);
  color: #e8d5b0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.3s, background 0.3s, transform 0.1s;
}
.btn-shard:hover {
  border-color: rgba(232,213,176,0.5);
  background: linear-gradient(135deg, #221a0a 0%, #3a2810 100%);
}
.btn-shard:active { transform: scale(0.97); }
.btn-shard-label { position: relative; z-index: 1; }
.btn-shard-canvas {
  position: absolute;
  inset: -60px;
  z-index: 10;
  pointer-events: none;
}
.btn-shard-piece {
  position: absolute;
  width: var(--w, 6px);
  height: var(--h, 6px);
  background: var(--c, #e8d5b0);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation: btn-shard-fly 0.7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes btn-shard-fly {
  0% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx,0px), var(--ty,-60px)) rotate(var(--r,360deg)) scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-shard-piece { animation: none; display: none; }
}

document.querySelectorAll('.btn-shard').forEach(function (btn) {
  var colors = ['#e8d5b0', '#f5c842', '#ff8c42', '#e8d5b0', '#fff8e7'];
  btn.addEventListener('click', function (e) {
    var canvas = btn.querySelector('.btn-shard-canvas');
    var cr = canvas.getBoundingClientRect();
    var cx = e.clientX - cr.left;
    var cy = e.clientY - cr.top;
    for (var i = 0; i < 18; i++) {
      var piece = document.createElement('span');
      piece.className = 'btn-shard-piece';
      var angle = (i / 18) * Math.PI * 2 + (Math.random() - 0.5) * 0.5;
      var dist = 40 + Math.random() * 70;
      var size = 4 + Math.random() * 8;
      piece.style.left = cx + 'px';
      piece.style.top = cy + 'px';
      piece.style.setProperty('--tx', (Math.cos(angle) * dist) + 'px');
      piece.style.setProperty('--ty', (Math.sin(angle) * dist) + 'px');
      piece.style.setProperty('--r', (Math.random() * 360 - 180) + 'deg');
      piece.style.setProperty('--w', size + 'px');
      piece.style.setProperty('--h', size + 'px');
      piece.style.setProperty('--c', colors[Math.floor(Math.random() * colors.length)]);
      piece.style.animationDelay = (Math.random() * 0.1) + 's';
      canvas.appendChild(piece);
      piece.addEventListener('animationend', function () { this.remove(); });
    }
  });
});