/* Letras de revista · We Love Chile (Kine, 2026-10-09)
   Como usar:
     <link rel="stylesheet" href="../paginas/wlc-letras-revista.css">
     <script src="../paginas/wlc-letras-revista.js" defer></script>
     <h2 class="badge-avaliacoes" data-revista data-revista-entrada>Avaliações de WeLovers</h2>
   - O tamanho sai do font-size do próprio elemento; alinhamento, do text-align dele.
   - data-revista-entrada (opcional): as letras colam uma a uma quando o elemento aparece na tela.
   - Conteúdo que chega depois (fetch, template): window.wlcRevista(elemento).
   - Só texto puro dentro do elemento. Sem JS, o texto aparece normal, com o estilo da página.
   - A mesma frase sai sempre igual (sorteio com semente no próprio texto).
   - Chalkiez só pega letra sem acento e sem número; o resto cai em Lufga ou fonte do sistema. */

@font-face { font-family: 'Revista Chalkiez'; src: url('../assets/fonts/Chalkiez-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Revista Lufga'; src: url('../assets/fonts/lufga-medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Revista Lufga'; src: url('../assets/fonts/lufga-black.otf') format('opentype'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Revista Brush'; src: url('../assets/fonts/Blauer-Brush.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Revista Chaloops'; src: url('../assets/fonts/Chaloops-Bd.ttf') format('truetype'); font-weight: 700; font-display: swap; }

.revista { line-height: 1.45; word-spacing: .18em; }
.revista__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.revista__palavra { display: inline-block; white-space: nowrap; word-spacing: normal; }
.revista__letra {
  display: inline-block;
  font-size: calc(var(--rs, 1) * 1em);
  line-height: 1.05;
  letter-spacing: 0;
  padding: .06em .13em .03em;
  margin: 0 .025em;
  vertical-align: middle;
  text-transform: none;
  transform: translateY(var(--ry, 0)) rotate(var(--rr, 0deg));
  box-shadow: 0 1px 0 rgba(60, 40, 20, .2), 0 .08em .16em rgba(60, 40, 20, .28);
}

/* Entrada opcional: cada letra cai e cola no papel. 260 ms por letra, ease-out com leve passada,
   intervalo de até 45 ms entre letras e a frase inteira colada em no máximo ~1 s. */
.revista[data-revista-entrada]:not(.is-colado) .revista__letra { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .revista[data-revista-entrada].is-colado .revista__letra { animation: revista-cola 260ms cubic-bezier(.34, 1.56, .64, 1) var(--rd, 0ms) both; }
}
@media (prefers-reduced-motion: reduce) {
  .revista[data-revista-entrada].is-colado .revista__letra { animation: revista-surge 200ms ease-out both; }
}
@keyframes revista-cola {
  from { opacity: 0; transform: translateY(calc(var(--ry, 0em) - .3em)) rotate(calc(var(--rr, 0deg) * -2)) scale(1.35); }
  50% { opacity: 1; }
  to { opacity: 1; transform: translateY(var(--ry, 0)) rotate(var(--rr, 0deg)) scale(1); }
}
@keyframes revista-surge { from { opacity: 0; } to { opacity: 1; } }