/* animations.css (guia-v2)
   Estados iniciais e kill-switch de acessibilidade para as animações GSAP.

   Princípio: TODO conteúdo é legível SEM JavaScript e SOB prefers-reduced-motion.
   - Os elementos de conteúdo (cards, .section-heading, .split-diagram) NÃO recebem
     a classe .reveal por padrão no HTML — logo ficam visíveis quando o JS não roda.
     O JS anima esses elementos via gsap.fromTo({autoAlpha:0,...}) e, sob
     reduced-motion / GSAP ausente, faz early return, deixando-os no estado natural
     do CSS (visíveis).
   - A classe utilitária .reveal existe para uso opcional; se aplicada, é neutralizada
     sob reduced-motion para não sumir.
     Aqui apenas coordenamos a ANIMAÇÃO: quando o JS/GSAP dirige o flutuar, desligamos
     o keyframe CSS via .js-anim (setado pelo JS) para evitar dupla animação no
     transform. Sob reduced-motion, nada se move. */

/* Classe utilitária opcional de reveal (não aplicada por padrão no HTML). */
.reveal{opacity:0;transform:translateY(24px)}

/* Timeline scrub — reforço do estado (a base já vem de components.css). */
.timeline-scrub article{transition:opacity .3s ease}

@media (prefers-reduced-motion: reduce){
  /* Nada some. */
  .reveal{opacity:1 !important;transform:none !important}
  /* .timeline-scrub article nasce em opacity:.5 e só o GSAP aplica
     .is-active — que nunca roda aqui. Sem esta linha os 4 marcos da
     transição ficam esmaecidos para sempre. DESIGN.md §5: nenhum
     elemento pode depender de animação para ficar legível. */
  .timeline-scrub article{opacity:1 !important}
}