/* ================================================================
   ANIMATIONS.CSS — Keyframes, classes de reveal e componentes
   animados do projeto LNK-SINGUS
   ================================================================ */

/* Importa os tokens do design system */
@import './tokens.css';

/* ── Keyframes ── */

/* Aparecimento com subida suave */
@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aparecimento com deslize da esquerda */
@keyframes aparecer-lateral {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Pulsação de opacidade (indicadores de status) */
@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* Rotação contínua (spinner de carregamento) */
@keyframes girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Piscar do cursor typewriter */
@keyframes cursor-piscar {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Brilho pulsante via box-shadow dourado */
@keyframes brilhar {
  0%, 100% { box-shadow: 0 0 0px rgba(200, 169, 110, 0); }
  50%       { box-shadow: 0 0 20px rgba(200, 169, 110, 0.3); }
}

/* Deslize de baixo para cima (itens de lista, resultados) */
@keyframes deslizar-cima {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Contador animado — entrada de número */
@keyframes contador {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── Reveal on scroll (IntersectionObserver) ──
   Estado inicial: invisível e deslocado
   Classe .visivel adicionada via JS quando o elemento entra na viewport */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visivel {
  opacity: 1;
  transform: translateY(0);
}

/* Variante de reveal lateral (da esquerda) */
.reveal--lateral {
  transform: translateX(-24px);
}

.reveal--lateral.visivel {
  transform: translateX(0);
}

/* ── Atraso escalonado para grupos de elementos ──
   Cada filho recebe um delay progressivo de 80ms */
.reveal:nth-child(1) { transition-delay: 0ms; }
.reveal:nth-child(2) { transition-delay: 80ms; }
.reveal:nth-child(3) { transition-delay: 160ms; }
.reveal:nth-child(4) { transition-delay: 240ms; }
.reveal:nth-child(5) { transition-delay: 320ms; }
.reveal:nth-child(6) { transition-delay: 400ms; }

/* ── Spinner de carregamento ──
   Anel com borda superior na cor do acento em rotação */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(200, 169, 110, 0.3);
  border-top-color: var(--cor-acento);
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

/* ── Cursor piscante para efeito typewriter ── */
.cursor-typewriter {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--cor-acento);
  vertical-align: middle;
  animation: cursor-piscar 0.8s step-end infinite;
}

/* ── Scroll hint (indicador de rolagem no hero) ── */
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-xs);
  opacity: 0.4;
  transition: opacity var(--transicao-media);
}

.scroll-hint:hover { opacity: 0.7; }

/* Linha animada que sugere rolar para baixo */
.scroll-hint__linha {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--cor-acento));
  animation: aparecer 1.5s ease infinite alternate;
}