@keyframes girar{ to{ background-position:0 -67.88px; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .poste{ animation:none; }
  *{ transition-duration:.01ms !important; }
}

/* ── entrada do herói, no carregamento ──────────────────────────
   é CSS puro de propósito: roda sem JS e termina em opacity:1, então
   o conteúdo nunca fica preso invisível se algo falhar. mesma ideia
   do comentário do .js-anima lá embaixo. */
@keyframes surge{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:none; }
}
@keyframes surge-alto{
  from{ opacity:0; transform:translateY(40px); }
  to{ opacity:1; transform:none; }
}
/* o halo já usa translateX(-50%) para centralizar: se a animação animasse
   `transform` cru, ela apagaria a centralização no meio do caminho */
@keyframes surge-halo{
  from{ opacity:0; transform:translateX(-50%) translateY(40px); }
  to{ opacity:1; transform:translateX(-50%); }
}

.hero__texto > *{ animation:surge .9s cubic-bezier(.22,.61,.36,1) both; }
.hero__texto > *:nth-child(1){ animation-delay:.05s; }
.hero__texto > *:nth-child(2){ animation-delay:.15s; }
.hero__texto > *:nth-child(3){ animation-delay:.25s; }
.hero__texto > *:nth-child(4){ animation-delay:.35s; }
.hero__texto > *:nth-child(5){ animation-delay:.45s; }
.hero__texto > *:nth-child(6){ animation-delay:.55s; }
.hero__fotos{ animation:surge-alto 1.1s cubic-bezier(.22,.61,.36,1) .3s both; }
.hero__halo{ animation:surge-halo 1.4s cubic-bezier(.22,.61,.36,1) .1s both; }

@media (prefers-reduced-motion:reduce){
  .hero__texto > *,
  .hero__fotos,
  .hero__halo{ animation:none; }
}

/* ── orbes da agenda: deriva bem lenta, só para o vidro não ficar
   com um fundo estático atrás ── */
@keyframes deriva{
  from{ transform:translate3d(0,0,0); }
  50% { transform:translate3d(3%,4%,0); }
  to  { transform:translate3d(0,0,0); }
}
.agenda__orbe--1{ animation:deriva 19s ease-in-out infinite; }
.agenda__orbe--2{ animation:deriva 23s ease-in-out infinite reverse; }

@media (prefers-reduced-motion:reduce){
  .agenda__orbe{ animation:none; }
}

/* ── entrada por scroll ─────────────────────────────────────── */
/* padrão: VISÍVEL. o conteúdo nunca depende do JS pra aparecer.
   o esconde-esconde só acontece se o JS confirmar que consegue revelar. */
.js-anima .revela{
  opacity:0; transform:translateY(24px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),
             transform .75s cubic-bezier(.22,.61,.36,1);
}
.js-anima .revela.visivel{ opacity:1; transform:none; }
.revela--atraso{ transition-delay:.16s; }

/* quem pede menos movimento no sistema não recebe nenhum */
@media (prefers-reduced-motion:reduce){
  .js-anima .revela{ opacity:1; transform:none; transition:none; }
  .sobre__foto{ transform:none !important; }
}