/* GENERATED by tools/gen.py from tools/design/metal-buttons.css (only when tools/features.json design.metalButtons is true). Do not edit. */
/* copyzor.com — liquid-metal ring on the primary buttons (tools/features.json design.metalButtons = true, with design.theme "smooth").
   Pure CSS (the look of 21st.dev "liquid-metal-button", no WebGL): a 2 px chrome ring drawn INSIDE the button's own box by ::after
   (a conic gradient of chrome tones, masked to the padding ring), so the size, the layout and the fill stay exactly as before.
   Included: the acid pills (.btn that is not .btn--ghost / .btn--dark, the CTA section's acid .btn--dark, .sm-headcta, .of-btn)
   and the white hero pill button (.sm-pill__btn). Not included: the glass / ghost buttons, the chips, the consent buttons.
   Motion: the gradient angle is the sum of 3 registered angles (@property). --mb-a always turns (6 s per turn); --mb-b turns too
   but is paused unless hovered / keyboard-focused (together 2.5 s per turn); --mb-c runs only while pressed (a short boost).
   Pausing (not removing) an animation keeps its angle, so the speed changes never jump. Reduced motion: site.css sets
   animation: none !important on everything, the angles stay at 0deg: a still ring. Without @property: the var() fallbacks, a still ring.
   The longhand background-image (not the background shorthand) on purpose: in Chrome, on the ::after of an <a href> (a link: :visited
   styling) the shorthand's var() angle is resolved once and never follows the animation, so the ring stood still. */
@property --mb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --mb-b { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --mb-c { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes mb-a { to { --mb-a: 360deg; } }
@keyframes mb-b { to { --mb-b: 360deg; } }
@keyframes mb-c { to { --mb-c: 360deg; } }

/* the ring sits between the fill and the text: these three paint their fill on the element itself, so they get a stacking
   context (no offsets: nothing moves); .btn already has one (site.css: position relative, isolation isolate, the fill = ::before) */
.sm-headcta, .sm-pill__btn, .of-btn { position: relative; isolation: isolate; }

.btn:not(.btn--ghost):not(.btn--dark)::after, .cta .btn--dark::after, .sm-headcta::after, .sm-pill__btn::after, .of-btn:not(:disabled)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; padding: 2px; border-radius: inherit; pointer-events: none;
  background-image: conic-gradient(from calc(var(--mb-a, 0deg) + var(--mb-b, 0deg) + var(--mb-c, 0deg)),
    #fbfdff 0deg, #b4bbc4 38deg, #4a5059 82deg, #0e1014 118deg, #6c747f 160deg, #eef3f9 198deg,
    #a3abb6 236deg, #2a2f36 282deg, #121519 318deg, #fbfdff 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: mb-a 6s linear infinite, mb-b 4.2857s linear infinite paused, mb-c 0.9s linear infinite paused;
}
.btn:not(.btn--ghost):not(.btn--dark):is(:hover, :focus-visible)::after, .cta .btn--dark:is(:hover, :focus-visible)::after,
.sm-headcta:is(:hover, :focus-visible)::after, .sm-pill__btn:is(:hover, :focus-visible)::after, .of-btn:not(:disabled):is(:hover, :focus-visible)::after {
  animation-play-state: running, running, paused;
}
.btn:not(.btn--ghost):not(.btn--dark):active::after, .cta .btn--dark:active::after,
.sm-headcta:active::after, .sm-pill__btn:active::after, .of-btn:not(:disabled):active::after {
  animation-play-state: running, running, running;
}
/* off screen (js/metal-buttons.js): paused */
html.mb-io .btn:not(.btn--ghost):not(.btn--dark):not(.mb-in)::after, html.mb-io .cta .btn--dark:not(.mb-in)::after,
html.mb-io .sm-headcta:not(.mb-in)::after, html.mb-io .sm-pill__btn:not(.mb-in)::after, html.mb-io .of-btn:not(:disabled):not(.mb-in)::after {
  animation-play-state: paused, paused, paused;
}