/*
 * Webflow pill CTA hover animation — site-wide.
 * Canonical preset: lib/animations.ts → webflowPillCta
 *
 * Hooks (either applies the animation):
 *   - `.wf-body a.button.overflow-hidden` — legacy Webflow bodyHtml
 *   - `.ads-animate-webflow-pill-cta` — React WebflowPillCta + bootstrap
 *
 * Expects markup on the anchor:
 *   - `.button-overlay.border-radius-hundred` — blue fill sweep
 *   - `img.moving-image-on-hover.button-relative` — trailing arrow
 *
 * Loaded globally from app/layout.tsx. Legacy buttons are also tagged by
 * WebflowPillCtaBootstrap in app/(legacy)/layout.tsx.
 */

.wf-body a.button.overflow-hidden,
.ads-animate-webflow-pill-cta {
  isolation: isolate;
}

.wf-body a.button.overflow-hidden .button-overlay.border-radius-hundred,
.ads-animate-webflow-pill-cta .button-overlay.border-radius-hundred {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  transform-origin: 50% 100%;
  background-color: var(--ads--blue, #6f88f3);
  transform: translateY(100%);
  transition: transform 200ms ease-in-out;
  z-index: 0;
}

.wf-body a.button.overflow-hidden:hover .button-overlay.border-radius-hundred,
.ads-animate-webflow-pill-cta:hover .button-overlay.border-radius-hundred {
  transform: translateY(0);
}

.wf-body a.button.overflow-hidden .button-relative,
.ads-animate-webflow-pill-cta .button-relative {
  position: relative;
  z-index: 1;
}

/*
 * Vertical label swap for React WebflowPillCta. The component renders two
 * stacked copies of the label inside `.animate-top-block`; the duplicate
 * (`.veritcal-move-element`) is pulled out of flow so the `overflow-hidden`
 * wrapper clips it to a single line, then slides up to swap on hover.
 * Legacy `.wf-body` pages get this from app-developer-studio.webflow(.scoped).css.
 */
.ads-animate-webflow-pill-cta .animate-top-block {
  position: relative;
  transition: transform 200ms ease-in-out;
}

.ads-animate-webflow-pill-cta .button-font-1.veritcal-move-element {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

.ads-animate-webflow-pill-cta:hover .animate-top-block {
  transform: translateY(-100%);
}

.wf-body a.button.overflow-hidden .moving-image-on-hover.button-relative,
.ads-animate-webflow-pill-cta .moving-image-on-hover.button-relative {
  transition: transform 200ms ease-in-out;
  transform: rotate(0deg);
}

.wf-body a.button.overflow-hidden:hover .moving-image-on-hover.button-relative,
.ads-animate-webflow-pill-cta:hover .moving-image-on-hover.button-relative {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .wf-body a.button.overflow-hidden .button-overlay.border-radius-hundred,
  .ads-animate-webflow-pill-cta .button-overlay.border-radius-hundred {
    transition: none;
    transform: translateY(100%);
  }

  .wf-body a.button.overflow-hidden:hover .button-overlay.border-radius-hundred,
  .ads-animate-webflow-pill-cta:hover .button-overlay.border-radius-hundred {
    transform: translateY(100%);
  }

  .wf-body a.button.overflow-hidden .moving-image-on-hover.button-relative,
  .ads-animate-webflow-pill-cta .moving-image-on-hover.button-relative,
  .wf-body a.button.overflow-hidden:hover .moving-image-on-hover.button-relative,
  .ads-animate-webflow-pill-cta:hover .moving-image-on-hover.button-relative {
    transition: none;
    transform: none;
  }

  .ads-animate-webflow-pill-cta .animate-top-block,
  .ads-animate-webflow-pill-cta:hover .animate-top-block {
    transition: none;
    transform: none;
  }
}