/* =========================================================================
   ALFAYED — ANIMAÇÕES
   Revelação ao rolar e reações ao passar o mouse.

   A revelação só esconde algo quando o <html> recebe a classe "anima", que
   o próprio JavaScript coloca antes da primeira pintura. Assim, se o script
   falhar ou o navegador não suportar, a página aparece inteira — nunca fica
   um bloco invisível na tela.
   ========================================================================= */

:root {
  --anim-duracao: 620ms;
  --anim-curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Revelação ao rolar ----------------------------------------------------
   Feita com @keyframes, e não com transition: assim a propriedade
   "transition" fica livre para os estados de hover dos mesmos elementos.
   Um card revelado precisa continuar reagindo ao mouse.                     */

@keyframes anima-subir {
  from {
    opacity: 0;
    translate: 0 26px;
  }
}

@keyframes anima-esquerda {
  from {
    opacity: 0;
    translate: -32px 0;
  }
}

@keyframes anima-direita {
  from {
    opacity: 0;
    translate: 32px 0;
  }
}

@keyframes anima-surgir {
  from {
    opacity: 0;
    scale: 0.96;
  }
}

.anima [data-anima] {
  opacity: 0;
}

.anima [data-anima].visivel {
  opacity: 1;
  animation: var(--anim-duracao) var(--anim-curva) var(--atraso, 0ms) both;
}

.anima [data-anima="subir"].visivel {
  animation-name: anima-subir;
}

.anima [data-anima="esquerda"].visivel {
  animation-name: anima-esquerda;
}

.anima [data-anima="direita"].visivel {
  animation-name: anima-direita;
}

.anima [data-anima="surgir"].visivel {
  animation-name: anima-surgir;
}

/* =========================================================================
   HOVER
   ========================================================================= */

/* ---- Botões ---------------------------------------------------------------- */

.botao {
  will-change: transform;
}

.botao:hover {
  transform: translateY(-2px);
}

.botao:active {
  transform: translateY(0);
  transition-duration: 90ms; /* o clique precisa responder na hora */
}

/* O ícone da mãozinha acompanha o botão com um toque de atraso. */
.botao svg {
  transition: transform var(--transicao-suave);
}

.botao:hover svg {
  transform: translateY(2px) scale(1.08);
}

/* ---- Cards de risco (seção 2) ----------------------------------------------- */

.problema__item {
  transition: transform var(--transicao-suave), border-color var(--transicao-suave),
    background-color var(--transicao-suave), box-shadow var(--transicao-suave);
}

.problema__item:hover {
  transform: translateY(-3px);
  border-color: var(--c-borda-ouro);
  background-color: var(--c-navy-700);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.problema__seta {
  transition: transform var(--transicao-suave), color var(--transicao-suave);
}

.problema__item:hover .problema__seta {
  transform: translate(3px, 3px);
  color: var(--c-gold-500);
}

/* ---- Cards de serviço (seção 3) --------------------------------------------- */

.servico {
  transition: transform var(--transicao-suave), border-color var(--transicao-suave),
    box-shadow var(--transicao-suave);
}

.servico:hover {
  transform: translateY(-6px);
  border-color: var(--c-borda-ouro);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.35);
}

.servico__icone {
  transition: transform var(--transicao-suave), color var(--transicao-suave);
}

.servico:hover .servico__icone {
  transform: scale(1.12);
  color: var(--c-gold-300);
}

/* ---- Passos (seção 4) -------------------------------------------------------- */

.passo__numero {
  transition: transform var(--transicao-suave), background-color var(--transicao-suave),
    color var(--transicao-suave);
}

.passo:hover .passo__numero {
  transform: scale(1.07);
  background-color: var(--c-gold-700);
  color: var(--c-white);
}

/* ---- Depoimentos (seção 6) ---------------------------------------------------- */

.depoimento {
  transition: transform var(--transicao-suave);
}

.depoimento:hover {
  transform: translateY(-4px);
}

.depoimento__nota svg {
  transition: transform var(--transicao-suave);
}

.depoimento:hover .depoimento__nota svg {
  transform: scale(1.15);
}

/* ---- Prova social do hero ------------------------------------------------------ */

.avatares__item,
.avatares__mais {
  transition: transform var(--transicao-suave);
}

.hero__prova:hover .avatares__item,
.hero__prova:hover .avatares__mais {
  transform: translateY(-3px);
}

/* ---- Rodapé --------------------------------------------------------------------- */

.rodape__link {
  transition: color var(--transicao-suave), transform var(--transicao-suave);
}

.rodape__link:hover {
  transform: translateX(4px);
}

.rede {
  transition: background-color var(--transicao-suave), color var(--transicao-suave),
    transform var(--transicao-suave);
}

.rede:hover {
  transform: translateY(-3px);
}

/* ---- Logotipo e setas do carrossel ---------------------------------------------- */

.cabecalho__logo img,
.rodape__logo {
  transition: opacity var(--transicao-suave);
}

.cabecalho__logo:hover img,
.rodape__logo:hover {
  opacity: 0.82;
}

.seta:hover {
  transform: scale(1.1);
}

/* =========================================================================
   Quem pediu menos movimento no sistema não recebe nada disso. A classe
   "anima" nem chega a ser aplicada, e aqui zeramos o resto.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  [data-anima] {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }

  .botao:hover,
  .problema__item:hover,
  .servico:hover,
  .depoimento:hover,
  .rede:hover,
  .seta:hover,
  .rodape__link:hover,
  .passo:hover .passo__numero,
  .servico:hover .servico__icone,
  .problema__item:hover .problema__seta,
  .hero__prova:hover .avatares__item,
  .hero__prova:hover .avatares__mais,
  .depoimento:hover .depoimento__nota svg,
  .botao:hover svg {
    transform: none;
    translate: none;
    scale: none;
  }
}