/* The theme switch has its own motion. Keep action feedback separate. */
:where(button:not(.rp-mode-switch):not(:disabled), [role="button"]:not([aria-disabled="true"]), .rp-hero-copy a, .rp-social-link, a.bg-sahab) {
  transition-property: transform, border-radius, box-shadow, background-color, color;
  transition-duration: .22s;
  transition-timing-function: cubic-bezier(.2,.8,.3,1);
}

:is(button:not(.rp-mode-switch):not(:disabled), [role="button"]:not([aria-disabled="true"]), .rp-hero-copy a, .rp-social-link, a.bg-sahab):focus-visible {
  outline: 2px solid #a581ee;
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  :where(button:not(.rp-mode-switch):not(:disabled), [role="button"]:not([aria-disabled="true"])):hover {
    transform: translateY(-1px);
  }
}

:where(button:not(.rp-mode-switch):not(:disabled), [role="button"]:not([aria-disabled="true"]), .rp-hero-copy a, .rp-social-link, a.bg-sahab):active {
  transform: scale(.975);
}


/* The whole silhouette changes shape while the label stays stable. */
:is(.rp-hero-copy a, .rp-social-link, button.bg-sahab.text-white:not(:disabled), a.bg-sahab.text-white) {
  --rp-pill: shape(from 14% 0%,
    curve to 86% 0% with 35% 0% / 65% 0%,
    curve to 100% 50% with 94% 0% / 100% 20%,
    curve to 86% 100% with 100% 80% / 94% 100%,
    curve to 14% 100% with 65% 100% / 35% 100%,
    curve to 0% 50% with 6% 100% / 0% 80%,
    curve to 14% 0% with 0% 20% / 6% 0%, close);
  --rp-blob: shape(from 14% 8%,
    curve to 83% 4% with 35% -8% / 57% 14%,
    curve to 100% 53% with 93% 0% / 102% 20%,
    curve to 81% 95% with 98% 78% / 91% 92%,
    curve to 19% 91% with 58% 109% / 41% 80%,
    curve to 1% 45% with 9% 97% / -2% 81%,
    curve to 14% 8% with 2% 26% / 6% 15%, close);
  --rp-liquid-glow:
    radial-gradient(ellipse at 18% 18%, #fff6fb, transparent 54%),
    radial-gradient(ellipse at 76% 92%, #a892f7, transparent 66%),
    linear-gradient(115deg, #f6afd5, #e6baff 55%, #b7acfa);
  clip-path: var(--rp-pill);
  transition: clip-path .23s cubic-bezier(.2,.72,.35,1), transform .24s ease, border-radius .24s ease;
}

.rp-hero-copy a:first-child {
  background: #18181b;
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  :is(.rp-hero-copy a, .rp-social-link, button.bg-sahab.text-white:not(:disabled), a.bg-sahab.text-white):hover {
    background: var(--rp-liquid-glow) !important;
    color: #211432 !important;
    border-color: transparent;
    border-radius: 25% 13% 24% 17% / 56% 44% 59% 42%;
    clip-path: var(--rp-blob);
    transform: scale(1.035, 1.09);
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(.2,.7,.25,1.3);
  }
}

:is(.rp-hero-copy a, .rp-social-link, button.bg-sahab.text-white:not(:disabled), a.bg-sahab.text-white):active {
  background: var(--rp-liquid-glow) !important;
  color: #211432 !important;
  clip-path: var(--rp-blob);
  transform: scale(.97);
}

@media (prefers-reduced-motion: reduce) {
  :is(button:not(.rp-mode-switch), [role="button"], .rp-hero-copy a, .rp-social-link, a.bg-sahab) {
    animation: none !important;
    clip-path: none;
    transition: none;
    transform: none;
  }
}

:is(.rp-hero-copy a, .rp-social-link, button.bg-sahab.text-white, a.bg-sahab.text-white):focus-visible { clip-path: none !important; }