:root {
  --button-height: clamp(40px, 3.48vw, 50px);
  --button-padding-inline: clamp(14px, 1.4vw, 20px);
  --button-gap: 9px;
  --button-radius: 999px;
  --button-font-size: clamp(10px, 0.84vw, 12px);
  --button-font-weight: 700;
  --button-letter-spacing: 0.04em;
  --button-background: var(--color-black, #030303);
  --button-foreground: #fff;
  --button-border: var(--color-black, #030303);
  --button-sheen-color: #fff;
  --button-sheen-opacity: 0.48;
  --button-sheen-duration: 550ms;
  --button-sheen-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

.global-button.global-button:not(.site-menu-button) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  width: auto;
  min-width: 0;
  box-sizing: border-box;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-inline);
  border: 0;
  border-radius: var(--button-radius);
  color: var(--button-foreground);
  background: var(--button-background);
  font-family: var(--font-body, Inter, Arial, sans-serif);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1;
  letter-spacing: var(--button-letter-spacing);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transform: none;
  transition: none;
}

.global-button.global-button:not(.site-menu-button)::before,
.global-button.global-button:not(.site-menu-button)::after {
  content: "";
  position: absolute;
  z-index: 30;
  top: -50px;
  left: -75px;
  width: 50px;
  height: 155px;
  background: var(--button-sheen-color);
  opacity: var(--button-sheen-opacity);
  transform: rotate(35deg);
  pointer-events: none;
  will-change: left;
  transition: all var(--button-sheen-duration) var(--button-sheen-ease);
}

.global-button.global-button:not(.site-menu-button)::before {
  left: -155px;
}

@media (hover: hover) {
  .global-button.global-button:not(.site-menu-button):is(:hover, :focus-visible)::before {
    left: 120%;
  }

  .global-button.global-button:not(.site-menu-button):is(:hover, :focus-visible)::after {
    left: calc(120% + 80px);
  }
}

.global-button.global-button:not(.site-menu-button):focus-visible {
  outline: 2px solid var(--button-border);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .global-button.global-button:not(.site-menu-button)::before,
  .global-button.global-button:not(.site-menu-button)::after {
    display: none;
  }
}