/* Animações específicas do site (não é uma cópia do design system — fica
   separado de tokens/*.css para não colidir com futuras re-sincronizações).

   Reveal ao rolar/carregar: por padrão nada fica invisível (progressive
   enhancement). A classe que esconde só é adicionada pelo script inline em
   BaseLayout.astro, e só se IntersectionObserver existir. */
[data-reveal] {
  transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
}
[data-reveal].bc-reveal-pending {
  opacity: 0;
  transform: translateY(12px);
}

/* Hover/press em Button e Card via CSS puro, para funcionar mesmo fora de
   ilhas hidratadas (o efeito de cor por variante continua sendo só um bônus
   de quando há hidratação React). */
[data-bc-button]:not(:disabled):hover {
  transform: var(--lift-hover);
}
[data-bc-button]:not(:disabled):active {
  transform: scale(var(--press-scale));
}
[data-bc-card][data-interactive]:hover {
  transform: var(--lift-hover);
  box-shadow: var(--shadow-lg);
  border-color: var(--cyan-200);
}

/* Ícone dos cards de serviço ganha um giro sutil junto com o hover do card. */
[data-bc-card][data-interactive]:hover [data-icon-wrap] {
  transform: rotate(-8deg) scale(1.08);
}

/* Hero da Home (.bc-hero) usa min-height:900px fixo (inline, para o efeito
   de fundo com parallax). Em telas de celular mais baixas isso deixa a
   caixa maior que a viewport, centralizando o conteúdo e criando um vão
   vazio acima do badge "Atendimento 100% remoto". No mobile a altura passa
   a ser definida pelo conteúdo + padding de .bc-section (--section-y-mobile).
   !important é necessário porque style inline sempre vence CSS externo. */
@media (max-width: 767px) {
  .bc-hero {
    min-height: auto !important;
  }
}