/* Every gold button (.primary-button) gets the site's letter-by-letter hover (anm-stagger-btn, defined in
   each page's footer script; hover forwarding in buttons.js). Markup:
   <span class="stagger-mask" anm-stagger-btn="wrap" anm-direction="up" aria-hidden="true">
     <span class="stagger-text" anm-stagger-btn="text">Label</span></span>
   with the label repeated as the button's aria-label. */
.primary-button { position: relative; overflow: hidden; transition: background-color .3s ease; touch-action: manipulation; }
.primary-button:hover { background-color: #d4b07a; }
.primary-button:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* One-line mask: the moving copies are clipped to it. */
.stagger-mask { position: relative; display: block; overflow: hidden; line-height: 1.4; }
/* The label is a full-width block, and the script's copy (absolutely placed after it) is pinned to the
   same box, so the copy that ends up showing sits exactly where the original label was. */
.stagger-mask [anm-stagger-btn="text"] { display: block; }
.stagger-mask [anm-stagger-btn="text"] + [anm-stagger-btn="text"] { left: 0; right: 0; }

/* Sending state: a small spinner instead of changing the label. */
.primary-button[aria-busy="true"] { cursor: progress; }
.primary-button[aria-busy="true"]::after { content: ""; position: absolute; right: 18px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: button-spin .8s linear infinite; }
@keyframes button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .primary-button[aria-busy="true"]::after { animation-duration: 2.4s; }
}