/* animations.css — animações próprias da landing (scroll-reveal + float das formas).
   Reaproveita a linguagem visual do original (fade + slide-up suave) sem framer-motion.
   Regra de ouro: só esconde/anima quando o JS marca (.js-anim) e só abaixo da dobra,
   então sem JS (ou acima da dobra) nada fica invisível. */

/* estado inicial do reveal (aplicado pelo reveal.js só a elementos abaixo da dobra) */
.js-anim [data-fs-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.js-anim [data-fs-reveal].fs-in {
  opacity: 1;
  transform: none;
}

/* variações de direção (o reveal.js escolhe conforme a coluna) */
.js-anim [data-fs-reveal="left"]  { transform: translateX(-32px); }
.js-anim [data-fs-reveal="right"] { transform: translateX(32px); }
.js-anim [data-fs-reveal="zoom"]  { transform: scale(.94); }
.js-anim [data-fs-reveal="left"].fs-in,
.js-anim [data-fs-reveal="right"].fs-in,
.js-anim [data-fs-reveal="zoom"].fs-in { transform: none; }

/* --- flutuação das formas decorativas ---
   anima a propriedade `translate` (independente de `transform`), então o rotate-XX
   do Tailwind nas formas continua intacto. */
@keyframes fs-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}
.fs-float {
  animation: fs-float var(--fs-dur, 6s) ease-in-out var(--fs-delay, 0s) infinite;
}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-fs-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fs-float { animation: none !important; }
}