:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

.button {
  position: relative;
  isolation: isolate;
  transition: transform 160ms var(--ease-out);
}

.button-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--gold-light);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

/* Override the former unconditional hover, which could stick on touchscreens. */
.button:hover { transform: none; }
.button-gold:hover {
  background: linear-gradient(135deg, #e9e0cd 0%, #bca676 68%, #a9915f 100%);
  box-shadow: 0 10px 30px #00071c25;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover:not(:focus-visible) { transform: translateY(-1px); }
  .button-gold:hover::before { opacity: .7; }
}

.button:active:not(:focus-visible) {
  transform: scale(.98);
  transition-duration: 120ms;
}
.button:focus-visible { transition: none; }

/* Native details remain functional with JavaScript disabled. */
.faq summary span { transition: none; }
.faq details[data-pointer-toggle] summary span {
  transition: transform 180ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .button:hover, .button:active:not(:focus-visible) { transform: none; }
  .button-gold::before { transition: opacity 120ms ease !important; }
}