/* Uiverse "Button" (animated gradient-border CTA)
   Source:  https://uiverse.io/SelfMadeSystem/strange-cobra-12
   Author:  SelfMadeSystem (derived from a CodePen; the page's licence block credits "codepen" and "SelfMadeSystem" under the MIT licence)
   Licence: uiverse.io element page footer reads "MIT License" (verified 2026-10-07). Original CSS: strange-cobra-12.orig.css
   Adapted for the contractor app:
   - <a> -> <button type="button"> (it triggers payment, not navigation); same class names and the original keyframe name kept;
   - rainbow (#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b) -> calm single highlight sweep on the TENANT accent (--accent-fill with one soft band mixed toward --on-accent, same colour at both ends so the loop is seamless);
   - inner fill black -> var(--accent-fill) with var(--on-accent) text (AA is guaranteed by theme.js per tenant, both themes);
   - radius 6px/3px -> --radius-sm / calc(--radius-sm - 3px); 3px ring kept; min-height --tap (44px);
   - animation also runs on :focus-visible (keyboard parity with hover); motion eases use --ease-out; press = scale(.985) with --ease-press;
   - focus ring is the text colour with a --bg gap so it never vanishes into the accent fill (same rule as base.css .btn--primary);
   - [disabled] and [aria-busy="true"] states added; neither animates;
   - prefers-reduced-motion: gradient does not travel (static ring, no infinite animation). */

.codepen-button {
  display: block;
  cursor: pointer;
  color: var(--on-accent);
  margin: 0 auto;
  position: relative;
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-family: var(--font-sans);
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 3px;
  isolation: isolate;
  min-height: var(--tap);
  min-width: var(--tap);
  border: 0;
  transition: transform var(--dur-instant) var(--ease-press);
  -webkit-tap-highlight-color: transparent;
}

.codepen-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  background: linear-gradient(115deg,
    var(--accent-fill) 0%,
    var(--accent-fill) 38%,
    color-mix(in srgb, var(--accent-fill) 45%, var(--on-accent)) 50%,
    var(--accent-fill) 62%,
    var(--accent-fill) 100%);
  background-size: 25% 100%;
  animation: an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop 1.6s linear infinite;
  animation-play-state: paused;
  translate: -5% 0%;
  transition: translate var(--dur-base) var(--ease-out);
}

.codepen-button:hover::before,
.codepen-button:focus-visible::before {
  animation-play-state: running;
  transition-duration: 0.75s;
  translate: 0% 0%;
}

@keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop {
  to {
    transform: translateX(-25%);
  }
}

.codepen-button span {
  position: relative;
  display: block;
  padding: 1rem 1.5rem;
  font-size: var(--fs-md);
  background: var(--accent-fill);
  color: var(--on-accent);
  border-radius: calc(var(--radius-sm) - 3px);
  height: 100%;
  line-height: var(--lh-snug);
}

.codepen-button:active {
  transform: scale(0.985);
}

.codepen-button:focus-visible {
  outline: var(--ring-w) solid var(--text);
  outline-offset: var(--ring-offset);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 calc(var(--ring-offset) + var(--ring-w)) var(--bg);
}

/* ring sits outside the clip: allow the gap shadow to paint */
.codepen-button[disabled],
.codepen-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.codepen-button[disabled]::before,
.codepen-button[aria-disabled="true"]::before,
.codepen-button[aria-busy="true"]::before {
  animation: none;
  translate: -5% 0%;
}

.codepen-button[aria-busy="true"] {
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  .codepen-button::before,
  .codepen-button:hover::before,
  .codepen-button:focus-visible::before {
    animation: none;
    translate: 0% 0%;
    transition: none;
  }
  .codepen-button { transition: none; }
  .codepen-button:active { transform: none; }
}