/*
 * globals.css zera a fonte dos <button> com `button { font: inherit }` fora de qualquer @layer, e uma regra sem camada
 * vence as utilidades do Tailwind (camada utilities): font-display, text-base e font-semibold não chegam a um <button>.
 * Os botões da home e do aviso de cookies pegam fonte, tamanho e peso destas classes. Texto de botão em sans, 15 a 16 px.
 */
.cv-btn {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5rem;
  letter-spacing: normal;
  text-transform: none;
}

@media (min-width: 640px) {
  .cv-btn {
    font-size: 16px;
  }
}

/* botão com cara de link (ex.: "Preferências de cookies" no rodapé) */
.cv-btn-link {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5rem;
  letter-spacing: normal;
  text-transform: none;
}

/*
 * Retorno de toque dos cartões que não são clicáveis. O whileTap do motion fazia isso, mas também punha
 * tabindex="0" em cada cartão (7 paradas de foco sem ação, 3 delas sem contorno). A propriedade `scale` se soma
 * ao transform que o motion escreve no estilo inline, em vez de ser sobrescrita por ele.
 */
.cv-press {
  transition: scale 0.15s ease-out;
}

.cv-press:active {
  scale: 0.99;
}

@media (prefers-reduced-motion: reduce) {
  .cv-press {
    transition: none;
  }

  .cv-press:active {
    scale: 1;
  }
}

/*
 * Elevação dos cartões ao passar o mouse (era o whileHover do motion): só com mouse e sem movimento reduzido.
 * Usa `translate`, que não disputa o `transform` com a entrada por rolagem (.ds-reveal fica no envoltório),
 * e repete a transição de `scale` do .cv-press, que esta regra substitui.
 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cv-lift {
    transition:
      scale 0.15s ease-out,
      translate 0.35s var(--ease-out),
      box-shadow 0.35s var(--ease-out);
  }

  .cv-lift:hover {
    translate: 0 -4px;
    box-shadow: 0 20px 44px rgba(10, 10, 10, 0.12);
  }
}