/* ==========================================================================
   ANIMAÇÕES — entrada do hero e "revelar ao rolar"
   ========================================================================== */

/* Entrada do hero ao carregar. Atraso vem de style="--d:250ms" */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.hero-in { animation: hero-in .9s cubic-bezier(.22,.8,.24,1) var(--d, 0ms) backwards; }

/* Revelar ao rolar: o JS (js/componentes/revelar.js) adiciona .reveal e depois .is-visible */
@keyframes reveal-up    { from { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(6px); } }
@keyframes reveal-left  { from { opacity: 0; transform: translateX(-56px); filter: blur(6px); } }
@keyframes reveal-right { from { opacity: 0; transform: translateX(56px);  filter: blur(6px); } }

.reveal { opacity: 0; }
.reveal.is-visible {
  opacity: 1;
  animation: reveal-up .85s cubic-bezier(.22,.8,.24,1) var(--reveal-delay, 0ms) backwards;
}
.reveal[data-reveal="left"].is-visible  { animation-name: reveal-left; }
.reveal[data-reveal="right"].is-visible { animation-name: reveal-right; }

/* Acessibilidade: quem prefere menos movimento vê tudo direto */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; }
  .reveal.is-visible, .hero-in { animation: none !important; }
}