/* animacoes.css - Santiago Fight Team
   1. Home Hero: Efeito maquina de escrever com slot reservado (momento de assinatura)
   2. Revelacao por linha com mascara (overflow: clip, corte seco, peso e impacto)
   3. Acessibilidade: aria-label no pai, aria-hidden nos filhos, sr-only preservado
   4. Degradacao: estado inicial ativo sob html.js, desligado sem JS e com prefers-reduced-motion
*/

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Home: Efeito maquina de escrever com slots reservados (L1 e L2) */
.typewriter-l1-slot {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  text-align: left;
  line-height: inherit;
}

.typewriter-l1-ghost {
  display: block;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  line-height: inherit;
}

.typewriter-l1-texto {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  line-height: inherit;
}

.typewriter-slot {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  text-align: left;
  line-height: inherit;
}

.typewriter-ghost {
  display: block;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  line-height: inherit;
}

.typewriter-texto {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  line-height: inherit;
}

.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  background-color: var(--ouro, #d4af37);
  margin-left: 4px;
  vertical-align: -0.04em;
  animation: typewriter-piscar 0.65s step-end infinite;
  transition: opacity 0.3s ease;
}

.typewriter-cursor--oculto {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

@keyframes typewriter-piscar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---------------------------------------------------------------------
   REVELACAO POR LINHA COM MASCARA (Regras 1 a 7)
   --------------------------------------------------------------------- */

/* Regras 1 e 3: overflow: clip (NUNCA hidden) e compensacao de descenders (g, j, p, q, y, acentos) */
.linha-mascara {
  display: block;
  overflow: clip;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  line-height: inherit;
  vertical-align: top;
}

.linha-mascara > span {
  display: block;
  line-height: inherit;
  transform: none;
}

/* Regra 7: O estado inicial animado vive sob a classe .js do html.
   Sem JS, o elemento renderiza estatico, 100% visivel e posicionado. */
.js .linha-mascara > span {
  transform: translateY(min(100%, 36px)); /* Regra 6: Deslocamento nunca acima de 40px */
  opacity: 0;
  transition: transform var(--d-lenta, 620ms) var(--e-saida, cubic-bezier(.16, 1, .3, 1)),
              opacity var(--d-media, 260ms) var(--e-saida, cubic-bezier(.16, 1, .3, 1));
  transition-delay: calc(var(--i, 0) * 65ms); /* Regra 6: Stagger entre 30 e 80ms, teto de 8 itens */
  will-change: transform, opacity;
}

/* Estado ativo: revelado ao entrar em vista */
.js .linha-mascara.dentro > span,
.js .dentro .linha-mascara > span,
.js .dentro.linha-mascara > span {
  transform: translateY(0);
  opacity: 1;
}

/* Regra 7: Reduced-motion: texto completamente estatico e visivel */
@media (prefers-reduced-motion: reduce) {
  .js .linha-mascara > span {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .typewriter-cursor {
    display: none !important;
  }
}