/* ==========================================================================
   Nexus landing v5: the button hover.
   No color swaps: on hover a slightly lighter (or, on white, dimmer) tint of
   the button's own color spreads from the cursor. That is all.
   No arrows on buttons, except the one up-right arrow on Download the plugins.
   ========================================================================== */

/* the hover spreads from the cursor: a very soft, feathered circle of the
   hover tint (solid in the middle 30%, easing out to nothing over the rest,
   so no edge ever reads) grows
   from where the pointer came in until it covers the button; on leave it
   simply fades to transparent (buttons.js passes the point as --mx/--my).
   It is painted as the button's own background image, under the label. */
@property --hr { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --hp { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.x-btn, .btn, .pcta, .pcta.primary, .nxlp .nxpb-btn, .nxlp .nxpb-btn.cy, .x-foot .nl-row .btn {
  --hc: rgba(255, 255, 255, 0.07);
  background-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--hc) calc(var(--hp) * 1), transparent) 0, color-mix(in srgb, var(--hc) calc(var(--hp) * 1), transparent) calc(var(--hr) * 0.3), color-mix(in srgb, var(--hc) calc(var(--hp) * 0.72), transparent) calc(var(--hr) * 0.45), color-mix(in srgb, var(--hc) calc(var(--hp) * 0.42), transparent) calc(var(--hr) * 0.6), color-mix(in srgb, var(--hc) calc(var(--hp) * 0.18), transparent) calc(var(--hr) * 0.78), color-mix(in srgb, var(--hc) calc(var(--hp) * 0.05), transparent) calc(var(--hr) * 0.92), transparent var(--hr));
  background-repeat: no-repeat;
  /* leaving: the tint stays put and fades to transparent; once it is gone
     the circle quietly resets for the next hover */
  transition: --hp 360ms linear, --hr 0s linear 360ms, border-color 220ms linear, color 220ms linear;
}
.x-btn:hover, .btn:hover, .pcta:not(.ghost):hover, .pcta.primary:hover,
.nxlp .nxpb-btn:not(.off):hover:not(:disabled), .nxlp .nxpb-btn.cy:hover:not(:disabled), .x-foot .nl-row .btn:hover {
  --hr: 1000px; --hp: 100%;
  /* coming in: the slow, soft spread */
  transition: --hr 900ms cubic-bezier(0.33, 0, 0.2, 1), --hp 0s, border-color 300ms linear, color 300ms linear;
  background-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--hc) calc(var(--hp) * 1), transparent) 0, color-mix(in srgb, var(--hc) calc(var(--hp) * 1), transparent) calc(var(--hr) * 0.3), color-mix(in srgb, var(--hc) calc(var(--hp) * 0.72), transparent) calc(var(--hr) * 0.45), color-mix(in srgb, var(--hc) calc(var(--hp) * 0.42), transparent) calc(var(--hr) * 0.6), color-mix(in srgb, var(--hc) calc(var(--hp) * 0.18), transparent) calc(var(--hr) * 0.78), color-mix(in srgb, var(--hc) calc(var(--hp) * 0.05), transparent) calc(var(--hr) * 0.92), transparent var(--hr));
  background-repeat: no-repeat;
}

/* the tint each kind spreads */
.x-btn-primary, .btn-primary, .x-foot .nl-row .btn { --hc: #d4d4d4; }
.pcta.primary { --hc: #a8f5fd; }
.nxlp .nxpb-btn.cy { --hc: #b0f6fd; }

/* on hover each button keeps its own base color underneath (older hover
   rules swapped it outright) */
.x-btn-primary:hover, .btn-primary:hover, .x-foot .nl-row .btn:hover { background-color: #fff; border-color: #fff; color: #050505; }
.x-btn-ghost:hover { background-color: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.32); color: #fff; }
.btn:not(.btn-primary):hover { background-color: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.32); color: #fff; }
.pcta:not(.primary):not(.ghost):hover { background-color: transparent; border-color: rgba(255, 255, 255, 0.32); }
.pcta.primary:hover { background-color: #8bf0fb; border-color: #8bf0fb; }

/* the download links keep a plain short fade */
.dl-link { transition: background-color 220ms linear, border-color 220ms linear, color 220ms linear; }

@media (prefers-reduced-motion: reduce) {
  .x-btn, .btn, .pcta, .pcta.primary, .nxlp .nxpb-btn, .nxlp .nxpb-btn.cy, .x-foot .nl-row .btn, .dl-link { transition: none; }
  .x-btn:hover, .btn:hover, .pcta:hover, .nxlp .nxpb-btn:not(.off):hover:not(:disabled), .nxlp .nxpb-btn.cy:hover:not(:disabled), .x-foot .nl-row .btn:hover { transition: none; }
}

/* the one arrow we keep: up and to the right, bold enough to read */
/* drawn as one filled shape (2 units thick), so no line ends poke out;
   11px = the cap height of the 15px label, centered on it */
.x-btn-ne { width: 11px; height: 11px; flex: none; margin-right: -2px; fill: currentColor; display: block; overflow: hidden; }
/* on hover it flies out up and to the right and a fresh one comes in from
   the bottom left, the same move as the Figma download (sections.css dl-ne);
   the icon clips its own drawing, so nothing pokes out */
.x-btn:hover .x-btn-ne path { animation: dl-ne 620ms both; }
@media (prefers-reduced-motion: reduce) { .x-btn:hover .x-btn-ne path { animation: none; } }