/* PR-VIBECURB-06 · Etapa 15 — contrato interativo dos CTAs teal. */

/*
 * A coreografia de entrada continua pertencendo aos capítulos. Assim que o CTA
 * termina de entrar, hover, foco e active deixam de herdar tempos narrativos.
 */
.vb-page main .vb-button:not(.vb-button--ghost):not(.vb-motion-item),
html.vb-js.vb-motion-ready .vb-page main .vb-button:not(.vb-button--ghost).vb-motion-item.is-motion-entered,
html.vb-no-js .vb-page main .vb-button:not(.vb-button--ghost) {
  translate: 0 0 !important;
  scale: 1 !important;
  transform: translateY(0) !important;
  transition:
    transform 140ms cubic-bezier(.2, .8, .2, 1),
    box-shadow 140ms cubic-bezier(.2, .8, .2, 1),
    background-color 140ms cubic-bezier(.2, .8, .2, 1),
    border-color 140ms cubic-bezier(.2, .8, .2, 1),
    color 140ms cubic-bezier(.2, .8, .2, 1) !important;
  transition-delay: 0ms !important;
}

.vb-page main .vb-button:not(.vb-button--ghost):not(.vb-motion-item):hover,
.vb-page main .vb-button:not(.vb-button--ghost):not(.vb-motion-item):focus-visible,
html.vb-js.vb-motion-ready .vb-page main .vb-button:not(.vb-button--ghost).vb-motion-item.is-motion-entered:hover,
html.vb-js.vb-motion-ready .vb-page main .vb-button:not(.vb-button--ghost).vb-motion-item.is-motion-entered:focus-visible,
html.vb-no-js .vb-page main .vb-button:not(.vb-button--ghost):hover,
html.vb-no-js .vb-page main .vb-button:not(.vb-button--ghost):focus-visible {
  translate: 0 0 !important;
  scale: 1 !important;
  transform: translateY(-2px) !important;
  border-color: var(--vb-teal-bright) !important;
  background-color: var(--vb-teal-bright) !important;
  box-shadow: 0 12px 30px rgba(34, 183, 173, .28) !important;
}

.vb-page main .vb-button:not(.vb-button--ghost):not(.vb-motion-item):active,
html.vb-js.vb-motion-ready .vb-page main .vb-button:not(.vb-button--ghost).vb-motion-item.is-motion-entered:active,
html.vb-no-js .vb-page main .vb-button:not(.vb-button--ghost):active {
  translate: 0 0 !important;
  scale: 1 !important;
  transform: translateY(1px) scale(.985) !important;
  box-shadow: 0 5px 14px rgba(34, 183, 173, .2) !important;
}

@media (prefers-reduced-motion: reduce) {
  .vb-page main .vb-button:not(.vb-button--ghost),
  html.vb-js.vb-motion-ready .vb-page main .vb-button:not(.vb-button--ghost).vb-motion-item.is-motion-entered {
    transition: none !important;
  }

  .vb-page main .vb-button:not(.vb-button--ghost):hover,
  .vb-page main .vb-button:not(.vb-button--ghost):focus-visible,
  .vb-page main .vb-button:not(.vb-button--ghost):active {
    transform: none !important;
  }
}