/* =============================================================================
   Movimento — keyframes, revelação ao rolar e preferências de movimento.
   Só anima opacity, translate, scale e rotate (exceção: largura do indicador
   das abas e stroke de SVG). Animações de entrada usam fill-mode backwards.
   ============================================================================= */

@keyframes fa-fade-in {
  from { opacity: 0; }
}

@keyframes fa-rise-in {
  from { opacity: 0; translate: 0 0.75rem; }
}

@keyframes fa-drop-in {
  from { opacity: 0; translate: 0 -0.75rem; }
}

@keyframes fa-scale-in {
  from { opacity: 0; scale: 0.94; }
}

@keyframes fa-grow-y {
  from { scale: 1 0; }
}

@keyframes fa-bump {
  50% { scale: 1.06; }
}

@keyframes fa-float {
  50% { translate: 0 -0.6rem; }
}

@keyframes fa-spin {
  to { rotate: 360deg; }
}

@keyframes fa-blink {
  50% { opacity: 0; }
}

@keyframes fa-pulse-ring {
  from { scale: 1; opacity: 0.6; }
  to { scale: 2.6; opacity: 0; }
}

@keyframes fa-marquee {
  to { translate: -100% 0; }
}

@keyframes fa-flow-y {
  0% { translate: 0 0; opacity: 0; }
  10%, 90% { opacity: 1; }
  100% { translate: 0 100%; opacity: 0; }
}

@keyframes fa-draw {
  from { stroke-dashoffset: 100; }
}

/* Revelação ao rolar: só com JS ativo (sem JS, tudo aparece). */
.js .reveal {
  opacity: 0;
  translate: 0 1.5rem;
  transition: opacity var(--fa-dur-reveal) var(--fa-ease-out), translate var(--fa-dur-reveal) var(--fa-ease-out),
    scale var(--fa-dur-reveal) var(--fa-ease-out);
  transition-delay: calc(var(--i, 0) * var(--fa-stagger-step));
}

.js .reveal--scale {
  translate: 0 0;
  scale: 0.95;
}

.js .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* Gráfico do hero: a linha se desenha quando entra na tela */
.js .is-visible .mock__line {
  stroke-dasharray: 100;
  animation: fa-draw var(--fa-dur-draw) var(--fa-ease-out) backwards;
}

.js .is-visible .mock__area {
  animation: fa-fade-in var(--fa-dur-draw) var(--fa-ease-out) backwards;
}

.js .is-visible .mock__point {
  animation: fa-scale-in var(--fa-dur-slow) var(--fa-ease-spring) var(--fa-dur-draw) backwards;
}

/* Contínuas pausam fora da tela (classe aplicada pelo JS) */
.is-offscreen *,
.is-offscreen *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: var(--fa-dur-instant) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--fa-dur-instant) !important;
    transition-delay: 0s !important;
  }

  .marquee__track,
  .flow__packet,
  .float-badge,
  .cta-band__mark,
  .live-dot::after {
    animation: none !important;
  }

  .marquee {
    flex-wrap: wrap;
    justify-content: center;
  }

  .marquee__track[aria-hidden='true'] {
    display: none;
  }

  .marquee__track {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--fa-space-2);
  }
}