/* Motion — revelação ao rolar, micro-interações e feedback de toque.
   Só transform e opacity, para não disparar layout durante a animação.
   Tudo aqui é progressive enhancement: sem JS, o conteúdo aparece normalmente.
   Os tokens --mo-* vivem em tokens.css. */
/* ------------------------------------------------ revelação ao entrar na tela */

/* a classe só é aplicada pelo JS; sem JS nada fica escondido */
.js-mo [data-mo] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--mo-time) var(--mo-ease) var(--mo-delay, 0ms),
    transform var(--mo-time) var(--mo-ease) var(--mo-delay, 0ms);
  will-change: opacity, transform;
}

.js-mo [data-mo='left'] {
  transform: translate3d(-26px, 0, 0);
}

.js-mo [data-mo='right'] {
  transform: translate3d(26px, 0, 0);
}

.js-mo [data-mo='scale'] {
  transform: scale(0.955);
}

.js-mo [data-mo].is-mo-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ------------------------------------------------------- micro-interações */

/* cartões sobem de leve no ponteiro; no toque isso não dispara */
@media (hover: hover) and (pointer: fine) {
  .solution-card,
  .case-card,
  .benefit-card,
  .offer-card,
  .deliver-card,
  .metric,
  .acc-item {
    transition:
      transform var(--mo-hover) var(--mo-ease),
      border-color var(--mo-hover) var(--mo-ease),
      background-color var(--mo-hover) var(--mo-ease);
  }

  .solution-card:hover,
  .case-card:hover,
  .benefit-card:hover,
  .offer-card:hover {
    transform: translate3d(0, -5px, 0);
  }

  /* a seta dos botões desliza no sentido do clique */
  .primary-btn:hover span[aria-hidden],
  .pf-cta:hover span[aria-hidden],
  .nav-cta:hover span[aria-hidden],
  .text-link:hover span[aria-hidden] {
    transform: translate3d(3px, -3px, 0);
  }

  .marquee:hover .marquee-track,
  .segments:hover .segments-track {
    animation-play-state: paused;
  }
}

/* a seta em caixa do CTA já é grid; trocar por inline-block a descentralizava */
.primary-btn span[aria-hidden],
.pf-cta span[aria-hidden]:not(.pf-cta-seta),
.nav-cta span[aria-hidden],
.text-link span[aria-hidden] {
  display: inline-block;
}

.primary-btn span[aria-hidden],
.pf-cta span[aria-hidden],
.nav-cta span[aria-hidden],
.text-link span[aria-hidden] {
  transition: transform var(--mo-hover) var(--mo-ease);
}

/* feedback de toque: no mobile o hover não existe, então o retorno vem do :active */
.primary-btn:active,
.ghost-btn:active,
.pf-cta:active,
.pf-ghost:active,
.submit-btn:active,
.nav-cta:active,
.acc-trigger:active,
.solution-card:active,
.case-card:active {
  transform: scale(0.975);
  transition-duration: 90ms;
}

/* foco visível e consistente em todo o site */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--orange, #ff5701);
  outline-offset: 3px;
  border-radius: 4px;
}

/* header ganha fundo sólido depois que a página rola */
.site-header {
  transition:
    background-color 260ms var(--mo-ease),
    box-shadow 260ms var(--mo-ease),
    backdrop-filter 260ms var(--mo-ease);
}

.site-header.is-stuck {
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* imagens entram com um leve zoom-out ao carregar */
.js-mo img[data-mo-img] {
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity 520ms var(--mo-ease),
    transform 720ms var(--mo-ease);
}

.js-mo img[data-mo-img].is-mo-in {
  opacity: 1;
  transform: none;
}

/* números que contam sozinhos não podem pular de largura enquanto sobem */
[data-mo-count] {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- movimento reduzido */

@media (prefers-reduced-motion: reduce) {
  .js-mo [data-mo],
  .js-mo img[data-mo-img] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}