/* ============================================================
   rx_core — Transições de estado para itens de lista (CANÓNICO)
   Utilitários genéricos para qualquer item de lista (cards, linhas, etc.)
   que precise comunicar:
   - "algo está a acontecer, este item pode mudar/desaparecer"  → .rx-pulsing
   - "confirmado, vai desaparecer agora" (desvanece + recolhe) → .rx-fade-out

   Uso: adicionar a classe ao elemento do item, AO LADO da classe própria
   do produto (ex.: <div class="analysis-card rx-pulsing">). O elemento
   precisa de `overflow:hidden` + um `max-height` numérico concreto (não
   'auto') na sua PRÓPRIA classe base, com a transição incluída — sem isto,
   o colapso do .rx-fade-out não anima (CSS não anima 'auto'→0). Usa
   .rx-fade-base como referência/ponto de partida para uma classe nova.
   ============================================================ */

/* Referência: cola isto (ou os valores equivalentes) na classe BASE do teu
   item de lista, se ainda não tiver max-height+overflow+transition. */
.rx-fade-base {
  max-height: 600px;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.35s ease, margin-bottom 0.35s ease, padding 0.35s ease;
}

/* "Algo está a acontecer" — pulsa suavemente, sem alterar layout.
   Interactividade desligada (links/botões dentro) enquanto pulsa, porque o
   conteúdo pode desaparecer a qualquer momento. !important porque isto tem
   de vencer qualquer cursor/estilo específico do produto, independentemente
   da ordem de carregamento dos CSS. */
.rx-pulsing { animation: rx-pulse 1.6s ease-in-out infinite; }
@keyframes rx-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.rx-pulsing, .rx-pulsing * { cursor: default !important; }
.rx-pulsing a, .rx-pulsing button { pointer-events: none !important; opacity: 0.35 !important; }

/* "Confirmado, vai desaparecer" — desvanece e recolhe até 0 (precisa da
   classe base com max-height numérico, ver acima). Quem gere a lista
   remove o elemento do DOM depois da transição (ver duração 0.35s acima). */
.rx-fade-out {
  animation: none !important;
  opacity: 0 !important;
  max-height: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  pointer-events: none !important;
}