/* ============================================
   Octa Motion — biblioteca de animação 2D global
   Reutilizada em todas as landings via data-octa-anim-*
   Tokens herdados de landing.css (vars --space, --radius).
   ============================================ */

/* Estado inicial dos elementos animados (antes do JS rodar).
   data-octa-anim-* só fica visível após .is-in (Anime.js seta) ou
   quando prefers-reduced-motion=reduce (revela imediato). */
[data-octa-anim] {
  will-change: opacity, transform;
}

/* Estado pré-animação por tipo (default = up) */
[data-octa-anim="fade-up"]:not(.is-in) {
  opacity: 0;
  transform: translateY(24px);
}
[data-octa-anim="fade-up"][data-octa-anim-from="down"]:not(.is-in)  { transform: translateY(-24px); }
[data-octa-anim="fade-up"][data-octa-anim-from="left"]:not(.is-in)  { transform: translateX(-24px); }
[data-octa-anim="fade-up"][data-octa-anim-from="right"]:not(.is-in) { transform: translateX(24px); }
[data-octa-anim="fade-up"][data-octa-anim-from="scale"]:not(.is-in) { transform: scale(0.94); }

[data-octa-anim="fade-up"][data-octa-anim-distance="sm"]:not(.is-in) { transform: translateY(14px); }
[data-octa-anim="fade-up"][data-octa-anim-distance="lg"]:not(.is-in) { transform: translateY(40px); }
[data-octa-anim="fade-up"][data-octa-anim-distance="sm"][data-octa-anim-from="left"]:not(.is-in)  { transform: translateX(-14px); }
[data-octa-anim="fade-up"][data-octa-anim-distance="sm"][data-octa-anim-from="right"]:not(.is-in) { transform: translateX(14px); }
[data-octa-anim="fade-up"][data-octa-anim-distance="lg"][data-octa-anim-from="left"]:not(.is-in)  { transform: translateX(-40px); }
[data-octa-anim="fade-up"][data-octa-anim-distance="lg"][data-octa-anim-from="right"]:not(.is-in) { transform: translateX(40px); }

[data-octa-anim="fade-in"]:not(.is-in) {
  opacity: 0;
}
[data-octa-anim="scale-in"]:not(.is-in) {
  opacity: 0;
  transform: scale(0.96);
}
[data-octa-anim="slide-x"]:not(.is-in) {
  opacity: 0;
  transform: translateX(-24px);
}

/* Stagger container — filhos diretos com data-octa-anim-stagger ficam invisíveis até o IO disparar */
[data-octa-anim="stagger"]:not(.is-in) > * {
  opacity: 0;
  transform: translateY(20px);
}
[data-octa-anim="stagger"][data-octa-anim-from="left"]:not(.is-in) > *  { transform: translateX(-20px); }
[data-octa-anim="stagger"][data-octa-anim-from="right"]:not(.is-in) > * { transform: translateX(20px); }
[data-octa-anim="stagger"][data-octa-anim-from="scale"]:not(.is-in) > * { transform: scale(0.94); }
[data-octa-anim="stagger"][data-octa-anim-from="down"]:not(.is-in) > *  { transform: translateY(-20px); }

/* Estado pós-animação — limpa will-change para liberar GPU */
[data-octa-anim].is-in {
  will-change: auto;
}

/* CTA pulse one-shot ao entrar viewport */
@keyframes octa-anim-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
[data-octa-anim-pulse].is-in {
  animation: octa-anim-pulse 700ms cubic-bezier(0.16, 1, 0.3, 1) 200ms 1 both;
}

/* Hover lift — aplicável em qualquer card, CTA, link.
   Anima só transform (composta, sem repaint). */
.octa-anim-hover-lift {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.octa-anim-hover-lift:hover {
  transform: translateY(-2px);
}

/* Marquee otimização: força translate3d (composição GPU)
   Só aplica em selectors marcados — não invadir CSS legado de marquee */
[data-octa-marquee] {
  will-change: transform;
}
[data-octa-marquee] > * {
  transform: translate3d(0, 0, 0);
}

/* Reduced motion — remove TUDO */
@media (prefers-reduced-motion: reduce) {
  [data-octa-anim],
  [data-octa-anim="fade-up"]:not(.is-in),
  [data-octa-anim="fade-in"]:not(.is-in),
  [data-octa-anim="scale-in"]:not(.is-in),
  [data-octa-anim="slide-x"]:not(.is-in),
  [data-octa-anim="stagger"]:not(.is-in) > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  .octa-anim-hover-lift { transition: none !important; }
  .octa-anim-hover-lift:hover { transform: none !important; }
}