/* ---------------------------------------------------------------------
   LETRAS VIVAS — o título que se monta letra por letra e depois ondula

   Copiado do comportamento da "Aula 16 · Série de Fourier" (a versão de
   05/10 que ficou só no disco): cada letra chega de baixo, torta e fora
   de foco, numa cascata de 35 ms; terminada a entrada, o pedaço marcado
   com data-onda fica subindo e descendo 0,07em para sempre, uma letra
   atrás da outra — a onda que o título descreve.

   NADA aqui esconde texto por conta própria: `.lv-letra` só existe se o
   letras-vivas.js rodou. Script quebrado ou bloqueado = título parado e
   legível, nunca página em branco.
   --------------------------------------------------------------------- */

/* a palavra inteira não quebra no meio: a linha cai entre palavras */
.lv-palavra { display: inline-block; white-space: nowrap; }

.lv-letra {
  display: inline-block;
  opacity: 0;
  animation: lvEntra .9s cubic-bezier(.2, .7, .2, 1) forwards;
}

/* berço da letra: a onda mora aqui, separada da entrada, senão uma
   animação sobrescreve o transform da outra */
.lv-onda {
  display: inline-block;
  animation: lvOnda 3.2s ease-in-out infinite;
}

@keyframes lvEntra {
   0%  { opacity: 0; transform: translateY(.45em) rotate(8deg); filter: blur(6px) }
  60%  { opacity: 1; filter: blur(0) }
  100% { opacity: 1; transform: none; filter: none }
}

@keyframes lvOnda {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-.07em) }
}

/* quem pediu menos movimento no sistema vê o título quieto e inteiro */
@media (prefers-reduced-motion: reduce) {
  .lv-letra, .lv-onda { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important }
}