/* ============================================================
   LIQUID BOUNCE — one spring motion for every CTA, sitewide.
   Selectors are prefixed "html body" so these rules outrank the
   in-body <style> blocks that also use !important on the same
   (0,1,0) selectors — source order alone would lose to them.
   All motion runs through transform; the older scale-based
   hover is neutralised so the two don't compound.
   ============================================================ */

html body .page-cta,
html body .contact-cta,
html body .foot-cta,
html body .cta,
html body .btn,
html body .hero-cta,
html body .work-cta,
html body .brief-submit,
html body [data-project-brief] {
  transition:
    transform 0.62s cubic-bezier(0.34, 1.62, 0.5, 1),
    box-shadow 0.45s ease,
    background 0.35s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.3s ease !important;
  will-change: transform;
}

/* kill the legacy scale channel so hover isn't a doubled 1.05 + bounce */
html body .page-cta,
html body .contact-cta,
html body .foot-cta,
html body .cta,
html body .btn,
html body .hero-cta,
html body .work-cta,
html body .brief-submit,
html body [data-project-brief],
html body .page-cta:hover,
html body .contact-cta:hover,
html body .foot-cta:hover,
html body .cta:hover,
html body .btn:hover,
html body .hero-cta:hover,
html body .work-cta:hover,
html body .brief-submit:hover,
html body [data-project-brief]:hover,
html body .page-cta:active,
html body .contact-cta:active,
html body .foot-cta:active,
html body .cta:active,
html body .btn:active,
html body .hero-cta:active,
html body .work-cta:active,
html body .brief-submit:active,
html body [data-project-brief]:active {
  scale: 1 !important;
}

html body .page-cta:hover,
html body .contact-cta:hover,
html body .foot-cta:hover,
html body .cta:hover,
html body .btn:hover,
html body .hero-cta:hover,
html body .work-cta:hover,
html body .brief-submit:hover,
html body [data-project-brief]:hover {
  animation: ctaLiquidBounce 0.72s cubic-bezier(0.34, 1.62, 0.5, 1) !important;
}

html body .page-cta:active,
html body .contact-cta:active,
html body .foot-cta:active,
html body .cta:active,
html body .btn:active,
html body .hero-cta:active,
html body .work-cta:active,
html body .brief-submit:active,
html body [data-project-brief]:active {
  transform: translateY(2px) scale(0.955) !important;
  transition-duration: 0.12s !important;
  animation: none !important;
}

/* squash-and-settle: overshoot, dip, micro-rebound */
@keyframes ctaLiquidBounce {
  0%   { transform: translateY(0)     scale(1); }
  28%  { transform: translateY(-5px)  scale(1.045, 0.965); }
  52%  { transform: translateY(1px)   scale(0.982, 1.022); }
  74%  { transform: translateY(-2px)  scale(1.014, 0.992); }
  100% { transform: translateY(0)     scale(1); }
}

/* the arrow glyph inside a CTA trails the body */
html body .page-cta svg,
html body .contact-cta svg,
html body .foot-cta svg,
html body .cta svg,
html body .btn svg {
  transition: transform 0.62s cubic-bezier(0.34, 1.62, 0.5, 1) !important;
}
html body .page-cta:hover svg,
html body .contact-cta:hover svg,
html body .foot-cta:hover svg,
html body .cta:hover svg,
html body .btn:hover svg {
  transform: translate(3px, -3px) !important;
}

@media (prefers-reduced-motion: reduce) {
html body .page-cta,
html body .contact-cta,
html body .foot-cta,
html body .cta,
html body .btn,
html body .hero-cta,
html body .work-cta,
html body .brief-submit,
html body [data-project-brief] {
    animation: none !important;
    transition-duration: 0.2s !important;
  }
}