/* Shared cursor highlight and click-ripple treatment for all interactive buttons. */
.highlight-button {
  --highlight-x:50%;
  --highlight-y:50%;
  --highlight-color:rgba(190,145,68,.48);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.highlight-button::before {
  position:absolute;
  z-index:0;
  inset:-24%;
  background:radial-gradient(circle 56px at var(--highlight-x) var(--highlight-y),var(--highlight-color) 0,transparent 64%);
  content:"";
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
}
.highlight-button:hover::before,.highlight-button:focus-visible::before { opacity:1; }
.highlight-button:hover,.highlight-button:focus-visible {
  border-color:rgba(183,139,57,.85) !important;
  box-shadow:0 0 0 1px rgba(183,139,57,.2),0 8px 20px rgba(91,48,26,.16);
}
.highlight-button:focus-visible { outline:2px solid #b78b39; outline-offset:3px; }
.highlight-button > * { position:relative; z-index:1; }
.highlight-button .button-ripple {
  position:absolute;
  z-index:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--highlight-color);
  pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  animation:highlight-button-ripple .6s ease-out forwards;
}
@keyframes highlight-button-ripple {
  from { opacity:.9; transform:translate(-50%,-50%) scale(0); }
  to { opacity:0; transform:translate(-50%,-50%) scale(34); }
}
@media (prefers-reduced-motion:reduce) {
  .highlight-button,.highlight-button::before { transition:none; }
  .highlight-button .button-ripple { display:none; }
}