/* Instituto Interagir — ajustes da versao estatica (HTML + JS, sem React).
   O app.css e o Tailwind ja compilado; aqui ficam so os estados que antes
   eram controlados pelo React. */

/* Paineis de navegacao nascem fechados e sao alternados pelo atributo [hidden]. */
.dropdown-panel[hidden],
.mobile-menu[hidden] {
  display: none;
}

/* O hero da home e centralizado por transform:translateY(-50%), mas a animacao
   de entrada (@keyframes appear) termina em translateY(0) com fill-mode both --
   apagava a centralizacao e empurrava o titulo 189px para fora do hero, cortando
   a ultima linha. Mesma animacao, agora preservando o -50%. */
@keyframes hero-appear {
  from {
    opacity: 0;
    transform: translateY(calc(-50% + 8px)) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

.home-hero-content {
  animation-name: hero-appear;
}

/* Ancoras internas (indice das areas de atuacao, "Explore os projetos"). */
html {
  scroll-behavior: smooth;
}

/* O header e sticky: o alvo da ancora nao pode ficar escondido atras dele. */
[id^="item-"],
#projetos {
  scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Foco visivel para navegacao por teclado. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}