/* =============================================================================
   estilos/animacoes.css — o movimento que não é 3D
   ---------------------------------------------------------------------------
   O que a cena WebGL faz é assunto dos módulos de 3d/. Aqui mora o movimento
   do que é HTML: texto que entra, borda que acende, cartão que sobe um fio ao
   receber o cursor.

   Regra de casa: só `transform` e `opacity`. São as duas coisas que o
   navegador anima sem refazer o desenho da página — animar altura, margem ou
   sombra é o caminho conhecido para o site engasgar enquanto a cena 3D também
   pede a placa.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Entradas
   -------------------------------------------------------------------------- */
@keyframes subir {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes surgir {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Para a peça 3D e para números: chega crescendo um fio, não do nada. */
@keyframes assentar {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* A luz que percorre a borda de um cartão sob o cursor. Discreta: é um reflexo
   passando por uma peça de metal, não um letreiro piscando. */
@keyframes correr-na-borda {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* O respiro de um núcleo aceso. Bem devagar, e com pouca amplitude — brilho
   que pulsa depressa vira alarme. */
@keyframes respirar {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}

/* -----------------------------------------------------------------------------
   Peças de uso
   -------------------------------------------------------------------------- */

/* O elemento espera fora da tela e entra quando o JS marca `.dentro`. Sem o
   JS, `.revela` sozinho já deixa tudo visível: conteúdo nunca depende de
   animação para existir. */
.revela {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--lento) var(--entrada),
    transform var(--lento) var(--entrada);
}
.revela.dentro {
  opacity: 1;
  transform: none;
}

/* Escadinha para uma lista inteira entrar em sequência. */
.revela.atraso-1 { transition-delay: 80ms; }
.revela.atraso-2 { transition-delay: 160ms; }
.revela.atraso-3 { transition-delay: 240ms; }
.revela.atraso-4 { transition-delay: 320ms; }

/* Sobe alguns pixels sob o cursor, e o fio de luz da aresta de cima fica mais
   forte — é ele, e não a sombra, que diz "isto está por cima" no escuro. */
.sobe {
  transition:
    transform var(--normal) var(--entrada),
    box-shadow var(--normal) var(--entrada);
  will-change: transform;
}
.sobe:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--elevo-alto);
}

/* -----------------------------------------------------------------------------
   Quem pediu menos movimento recebe menos movimento. Não é o mesmo que "nada":
   o conteúdo continua inteiro, as transições é que somem.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .revela {
    opacity: 1;
    transform: none;
  }

  .sobe:hover {
    transform: none;
  }
}