/* ==========================================================================
   Camada de movimento (mesma linguagem da página inicial v4).
   Só animação e microinteração: nada aqui muda texto ou estrutura.
   Tudo que começa escondido depende de classes que o movimento.js coloca;
   sem JS (ou com movimento reduzido) a página aparece completa e parada.
   ========================================================================== */

/* Barra de progresso de leitura (criada pelo JS) */
.progresso { position: fixed; inset: 0 0 auto; z-index: calc(var(--z-progress) + 10); height: 3px; pointer-events: none; }
.progresso span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-300), var(--white) 60%, var(--blue-300)); box-shadow: 0 0 12px rgba(127, 176, 232, 0.8); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* Cabeçalho: logo encolhe um pouco depois de rolar */
.header .brand__logo { transition: transform 0.35s var(--ease-out); transform-origin: 0 50%; }
.header.is-scrolled .brand__logo { transform: scale(0.88); }

/* Títulos que entram palavra por palavra */
.palavras .pw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.palavras .pw > span { display: inline-block; }
.palavras em .pw {
  padding: 0.08em 0.14em 0.18em;
  margin: -0.08em -0.14em -0.18em;
}
.mv .palavras .pw > span { transform: translateY(105%); transition: transform var(--dur-4) var(--ease-out) calc(var(--w, 0) * 55ms); }
.mv .palavras.is-in .pw > span { transform: none; }

/* Abertura: "9" ao fundo e cartões com parallax suave */
.mv .c9hero .phead__ghost { translate: 0 var(--par, 0px); }
.mv .c9hero__visual { translate: 0 var(--par, 0px); }
.mv .c9hero__checks li { opacity: 0; transform: translateX(-14px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.mv.is-ready .c9hero__checks li { opacity: 1; transform: none; }
.mv.is-ready .c9hero__checks li:nth-child(1) { transition-delay: 0.55s; }
.mv.is-ready .c9hero__checks li:nth-child(2) { transition-delay: 0.65s; }
.mv.is-ready .c9hero__checks li:nth-child(3) { transition-delay: 0.75s; }
.c9hero__checks .ico { transition: transform 0.35s var(--ease-out); }
.c9hero__checks li:hover .ico { transform: scale(1.18) rotate(-8deg); }

/* Números: entram em sequência, com linha que se desenha */
.mv .c9stats__list li { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.mv .c9stats__list.is-in li { opacity: 1; transform: none; }
.mv .c9stats__list.is-in li:nth-child(2) { transition-delay: 0.1s; }
.mv .c9stats__list.is-in li:nth-child(3) { transition-delay: 0.2s; }
.mv .c9stats__list.is-in li:nth-child(4) { transition-delay: 0.3s; }
.c9stats__list li::after { content: ""; position: absolute; left: clamp(1.1rem, 2.2vw, 2rem); right: clamp(1.1rem, 2.2vw, 2rem); bottom: 0; height: 2px; border-radius: 2px; background: var(--blue-500); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-4) var(--ease-out) 0.4s; }
.mv .c9stats__list.is-in li::after { transform: scaleX(0.35); }
.c9stats__list li:hover::after { transform: scaleX(1); transition-delay: 0s; }

/* Cartões que reagem ao mouse: sobem e ganham uma luz que segue o ponteiro */
.reage { position: relative; isolation: isolate; transition: transform 0.35s var(--ease-out), box-shadow 0.35s; }
.reage::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgba(15, 98, 193, 0.10), transparent 60%); opacity: 0; transition: opacity 0.35s; pointer-events: none; }
.on-dark .reage::after, .reage.on-dark::after { background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.12), transparent 60%); }
@media (hover: hover) and (pointer: fine) {
  .reage:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -36px rgba(3, 22, 48, 0.55); }
  .reage:hover::after { opacity: 1; }
}
/* Queda dos números 01/02/03: a pose de :hover travava no toque e
   o número ficava torto. A classe .is-cai toca um ciclo e volta sozinha. */
.c9why__n, .c9how__n { transform: none; }
.c9why__n.is-cai, .c9how__n.is-cai { animation: c9n-cai 0.7s var(--ease-out); }
@keyframes c9n-cai {
  0%, 100% { transform: none; }
  40% { transform: translateY(0.18em) rotate(-8deg); }
}

/* Mapa do rodapé: revela deslizando */
.mv .footer__mapa-frame { clip-path: inset(0 0 0 100%); transition: clip-path 1.3s var(--ease-out); }
.mv .footer__mapa-frame.is-in { clip-path: inset(0); }

/* Parceiros: faixa contínua (o JS duplica a lista só como enfeite, oculta de leitores de tela) */
.parceiros-faixa { display: flex; width: max-content; animation: corre 34s linear infinite; }
.parceiros-faixa:hover, .parceiros-faixa:focus-within { animation-play-state: paused; }
.footer__parceiros .parceiros-faixa .parceiros { display: flex; flex-wrap: nowrap; width: auto; gap: var(--space-4); padding-right: var(--space-4); }
.footer__parceiros .parceiros-faixa .parceiros li { flex: none; grid-column: auto; order: 0; }
.parceiros-janela { justify-self: stretch; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, var(--black) 6%, var(--black) 94%, transparent); mask-image: linear-gradient(90deg, transparent, var(--black) 6%, var(--black) 94%, transparent); }
.parceiros-janela .parceiros li { transition: transform 0.3s var(--ease-out); }
.parceiros-janela .parceiros li:hover { transform: translateY(-4px) scale(1.04); }
@keyframes corre { to { transform: translateX(-50%); } }

@media (max-width: 1023px) {
  .mv .c9hero__visual { translate: none; }
}
@media (max-width: 699px) {
  .footer__parceiros .parceiros-faixa .parceiros { gap: 0.6rem; padding-right: 0.6rem; }
  .footer__parceiros .parceiros-faixa .parceiros li { min-width: 130px; height: 84px; }
  .footer__parceiros .parceiros-faixa .parceiros img { max-width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .mv .palavras .pw > span, .mv .c9hero__checks li, .mv .c9stats__list li, .mv .footer__mapa-frame { transform: none; opacity: 1; clip-path: none; transition: none; }
  .mv .c9hero .phead__ghost, .mv .c9hero__visual { translate: none; }
  .reage, .reage:hover { transform: none; transition: none; }
  .c9why__n, .c9how__n, .c9why__n.is-cai, .c9how__n.is-cai { animation: none; transform: none; }
  .parceiros-faixa { animation: none; width: auto; }
  .footer__parceiros .parceiros-faixa .parceiros { flex-wrap: wrap; justify-content: center; }
  .parceiros-faixa > ul[aria-hidden] { display: none; }
  .parceiros-janela { -webkit-mask-image: none; mask-image: none; }
}