/* Light spills outside the button; its face and label remain untouched. */
@media (hover:hover) and (pointer:fine) {
 .button-backlight { isolation:isolate; }
 .button-backlight-static { position:relative; }
 .button-backlight::after {
  content:""; position:absolute; inset:-80px; padding:80px;
  border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle 100px at calc(var(--light-x, 50%) + 80px) calc(var(--light-y, 50%) + 80px), rgba(220,239,181,.48), rgba(220,239,181,.16) 35%, transparent 75%);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0; transition:opacity 180ms ease;
 }
 .button-backlight[data-light-active]::after { opacity:1; }
 .button-backlight[data-light-active] {
  box-shadow:var(--shadow-x, 4px) var(--shadow-y, 4px) 12px rgba(0,0,0,.55), inset var(--rim-x, -1px) var(--rim-y, -1px) 2px rgba(255,255,235,.4);
 }
}
@media (prefers-reduced-motion:reduce) {
 .button-backlight::after { transition:none; }
}