/* Efeitos do protótipo Log Help.
   Todas as classes abaixo são aplicadas por efeitos.js em tempo de execução.
   Sem JavaScript nenhuma delas existe, e a página aparece inteira e imóvel.
   Esse é o ponto: o estado escondido nunca mora no CSS base. */

/* ---- título do hero, palavra por palavra ---- */

.ef-palavra {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
  animation: ef-subir 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes ef-subir {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- revelação ao rolar ---- */

.ef-revelar {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Cards vivem dentro de uma seção que também sobe.
   Deslocamento menor para os dois movimentos não somarem demais. */
.ef-revelar-card {
  transform: translateY(12px);
}

.ef-revelar.ef-visivel {
  opacity: 1;
  transform: none;
}

/* ---- respeito a quem pediu menos movimento ----
   efeitos.js já sai cedo nesse caso. Isto aqui é a segunda trava,
   para o caso de o CSS carregar e o JS não. */

@media (prefers-reduced-motion: reduce) {
  .ef-palavra,
  .ef-revelar,
  .ef-revelar-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}