/* ============================================================================
   EFEITOS DO SITE AD

   Regra de trabalho: movimento só quando ajuda a ler. Antes existiam dez
   efeitos simultâneos (pétalas caindo, faíscas no clique, halo no cursor,
   véu de transição, máquina de escrever, tilt 3D em todo card, tipografia
   deslizando com o mouse, gradiente em loop infinito). Somados, faziam a
   página parecer uma demonstração de recursos em vez de um site de
   consultoria. Restaram três, todos discretos.
   ========================================================================= */

/* 1) ENTRADA AO ROLAR
   Sobe alguns pixels e revela. Curto e sem desfoque: o texto precisa estar
   legível assim que aparece, não meio segundo depois. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* Escalonamento entre itens vizinhos — pequeno o bastante para dar ritmo
   sem que o visitante fique esperando o conteúdo chegar. */
.reveal.d1 { transition-delay: 0.06s; }
.reveal.d2 { transition-delay: 0.12s; }
.reveal.d3 { transition-delay: 0.18s; }
.reveal.d4 { transition-delay: 0.24s; }

/* 2) PROGRESSO DE LEITURA
   Fio de 2px no topo. Sem brilho, sem sombra: informa onde a pessoa está
   na página e não disputa atenção com o conteúdo. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 200;
  background: linear-gradient(90deg, var(--color-magenta), var(--color-blue), var(--color-cyan));
  opacity: 0.85;
}

/* 3) ESTRELAS
   Pontos minúsculos que acendem e apagam devagar, sem sair do lugar. O pico
   de opacidade é baixo de propósito: sobre o fundo claro do herói elas
   funcionam como textura, não como animação. */
.estrela {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  animation: cintila var(--dur, 6s) ease-in-out var(--atraso, 0s) infinite;
  will-change: opacity;
}

@keyframes cintila {
  0%,
  100% { opacity: 0; }
  50% { opacity: var(--pico, 0.3); }
}

/* 4) CARROSSEL (faixa de cards do feed) */
.strip-wrap {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.strip-wrap::-webkit-scrollbar { display: none; }

/* Só o contêiner de rolagem mora aqui. O layout da faixa (flex no celular,
   grade no desktop) fica no componente: antes o `display:inline-flex` desta
   regra competia com o `md:grid` do markup e esticava os cards. */

/* ===== Quem pede menos movimento recebe a página parada ===== */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
  .estrela { animation: none; opacity: 0.18; }
  .strip-wrap { scroll-behavior: auto; }
}