/* Shared feedback for calls to action across the page and the project viewer. */
:root { --action-ease:cubic-bezier(.16,1,.3,1); }

:is(.button,.service-cta,.context-cta,.inline-link,.nav-contact,.case-inquiry,.case-end-contact,.preview-contact,.contact-email,.hero-social a,.footer-social a) {
  transition:translate 220ms var(--action-ease),scale 150ms ease,background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease;
}

:is(.button .button-icon,.service-cta > span[data-icon="whatsapp"],.context-cta .action-mark,.inline-link > span[data-icon="whatsapp"],.case-inquiry .ui-icon-whatsapp,.case-end-contact .ui-icon-whatsapp,.hero-social .brand-mark,.footer-social .brand-mark) {
  transition:translate 240ms var(--action-ease),transform 240ms var(--action-ease),background-color 220ms ease,color 220ms ease;
}

:is(.button,.service-cta,.context-cta,.inline-link,.nav-contact,.case-inquiry,.case-end-contact,.preview-contact,.contact-email,.hero-social a,.footer-social a):focus-visible {
  outline:2px solid var(--rose);
  outline-offset:4px;
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html:not([data-motion="reduced"]) :is(.button,.service-cta,.context-cta,.inline-link,.nav-contact,.case-inquiry,.case-end-contact,.preview-contact,.contact-email,.hero-social a,.footer-social a):hover { translate:0 -2px; }
  html:not([data-motion="reduced"]) :is(.button,.service-cta,.context-cta,.inline-link,.hero-social a,.footer-social a):is(:hover,:focus-visible) :is(.button-icon,.action-mark,.brand-mark,span[data-icon="whatsapp"]) { translate:2px -2px; }
}

/* Focus gives keyboard users the same directional cue as pointer hover. */
@media (prefers-reduced-motion:no-preference) {
  html:not([data-motion="reduced"]) :is(.button,.service-cta,.context-cta,.inline-link,.hero-social a,.footer-social a):focus-visible :is(.button-icon,.action-mark,.brand-mark,span[data-icon="whatsapp"]) { translate:2px -2px; }
  html:not([data-motion="reduced"]) :is(.button,.service-cta,.context-cta,.inline-link,.nav-contact,.case-inquiry,.case-end-contact,.preview-contact,.contact-email,.hero-social a,.footer-social a):active { scale:.975; translate:0 0; }
  html:not([data-motion="reduced"]) :is(.button,.service-cta,.context-cta,.inline-link,.hero-social a,.footer-social a):active :is(.button-icon,.action-mark,.brand-mark,span[data-icon="whatsapp"]) { translate:0 0; }
  html:not([data-motion="reduced"]) .project-case :is(.case-inquiry,.case-end-contact):is(:hover,:focus-visible) .ui-icon-whatsapp { translate:2px -2px; }
  html:not([data-motion="reduced"]) .project-case :is(.case-inquiry,.case-end-contact):active .ui-icon-whatsapp { translate:0 0; }
}

/* Earlier section styles move some SVGs directly; the common motion lives on the icon. */
.project-case :is(.case-inquiry,.case-end-contact):is(:hover,:focus-visible) .ui-icon-whatsapp { transform:none; }

@media (prefers-reduced-motion:reduce) {
  :is(.button,.service-cta,.context-cta,.inline-link,.nav-contact,.case-inquiry,.case-end-contact,.preview-contact,.contact-email,.hero-social a,.footer-social a),
  :is(.button .button-icon,.service-cta > span[data-icon="whatsapp"],.context-cta .action-mark,.inline-link > span[data-icon="whatsapp"],.case-inquiry .ui-icon-whatsapp,.case-end-contact .ui-icon-whatsapp,.hero-social .brand-mark,.footer-social .brand-mark) { transition:none; translate:none; scale:1; }
}
html[data-motion="reduced"] :is(.button,.service-cta,.context-cta,.inline-link,.nav-contact,.case-inquiry,.case-end-contact,.preview-contact,.contact-email,.hero-social a,.footer-social a),
html[data-motion="reduced"] :is(.button .button-icon,.service-cta > span[data-icon="whatsapp"],.context-cta .action-mark,.inline-link > span[data-icon="whatsapp"],.case-inquiry .ui-icon-whatsapp,.case-end-contact .ui-icon-whatsapp,.hero-social .brand-mark,.footer-social .brand-mark) { transition:none; translate:none; scale:1; }

/* Remove section-specific sweeps, rotations and expanding rings. */
.button::before,
.story-intro .hero-actions .button::after,
#contato .button::after,
.context-cta::before,
.project-case .case-inquiry::after,
.hero-social a::before,
.site-header .main-nav .nav-contact::after,
.footer-social a::after,
.contact-email .ink-link::after { content:none; }

:is(.button .button-icon,#solucao .service-cta > span[data-icon="whatsapp"],.context-cta .action-mark,.project-case .case-inquiry .ui-icon-whatsapp,.project-case .case-end-contact .ui-icon-whatsapp) { transform:none; }
#contato .button:is(:hover,:focus-visible) .button-icon,
.story-intro .hero-actions .button:is(:hover,:focus-visible) .button-icon,
#solucao .service-cta:is(:hover,:focus-visible) > span[data-icon="whatsapp"],
.project-case :is(.case-inquiry,.case-end-contact):is(:hover,:focus-visible) .ui-icon-whatsapp { transform:none; }

#solucao .service-row .service-cta:is(:hover,:focus-visible) > span[data-icon="whatsapp"] { background:transparent; color:inherit; }
#solucao .service-row:nth-child(2) .service-cta:is(:hover,:focus-visible) > span[data-icon="whatsapp"] { background:transparent; color:inherit; }

/* The same motion works on each surface; only the contrast colour changes. */
.story-intro .hero-actions .button:is(:hover,:focus-visible) { background:var(--butter); color:var(--wine); }
#contato .button:is(:hover,:focus-visible),
#sobre .context-cta-light:is(:hover,:focus-visible),
.context-cta-paper:is(:hover,:focus-visible) { background:var(--rose-light); color:var(--wine); }