/* =========================================================
   home-motion.css — movimento, estados de revelação e superfícies do
   navegador da LANDING PAGE. Carregado SÓ pelo index.html, depois de
   home.css. Tudo atrás de `.page-home`.

   O CONTRATO QUE NÃO MUDA (herdado do mundo anterior, porque era a
   regra certa): todo o estado escondido vive atrás de `html.js-motion`,
   uma classe que só o script em linha do <head> instala e que um
   cão-de-guarda retira aos 2.5s se js/home-motion.js não se anunciar
   pronto. Sem JS, com o script em falta, ou sob movimento reduzido,
   NENHUMA destas regras corresponde e a página desenha-se inteira.
   Nunca escrevas uma revelação cujo estado escondido seja o estado por
   omissão do documento.

   A GRAMÁTICA: uma mola crítica (sem ressalto) em tudo -- `--ease-spring`,
   que o JS substitui por um `linear()` amostrado. Cada revelação parte
   de um estado já visível por omissão e chega ao seu estado final; a
   transição CSS retoma sempre do valor actual, por isso é interruptível
   por construção. Um só momento autorado: o mês a assentar no primeiro
   tela. O resto é confirmação.
   ========================================================= */

/* ---------- 1. Revelação de entrada (um elemento inteiro, nunca palavras) ---------- */

html.js-motion .page-home .rv-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-spring),
              transform var(--dur-slow) var(--ease-spring);
  transition-delay: var(--rv-delay, 0ms);
  will-change: opacity, transform;
}

html.js-motion .page-home .rv-in.is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ---------- 2. O mês assenta: barras a estender, marcadores a pousar ---------- */

html.js-motion .page-home .month {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: opacity var(--dur-slow) var(--ease-spring),
              transform 720ms var(--ease-spring);
  transition-delay: 120ms;
}

html.js-motion .page-home .month.is-revealed { opacity: 1; transform: none; }

html.js-motion .page-home .month__bar {
  transform: scaleX(0);
  transition: transform 640ms var(--ease-spring);
  transition-delay: calc(320ms + var(--i, 0) * 70ms);
}

html.js-motion .page-home .month.is-revealed .month__bar { transform: scaleX(1); }

html.js-motion .page-home .month__marker {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dur-base) var(--ease-spring),
              transform var(--dur-slow) var(--ease-spring);
  transition-delay: calc(420ms + var(--i, 0) * 70ms);
}

html.js-motion .page-home .month.is-revealed .month__marker { opacity: 1; transform: none; }

/* ---------- 3. Movimento reduzido: o ESTADO FINAL VISÍVEL, escrito ---------- */

@media (prefers-reduced-motion: reduce) {
  html.js-motion .page-home .rv-in,
  html.js-motion .page-home .month,
  html.js-motion .page-home .month__bar,
  html.js-motion .page-home .month__marker {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .page-home .btn,
  .page-home .site-header,
  .page-home .faq-item,
  .page-home .faq-item summary::after,
  .page-home .primary-nav a:not(.btn),
  .page-home .hero-cta-secondary { transition: none; }
  .page-home .btn-primary:active,
  .page-home .btn-secondary:active { transform: none; }
}

/* ---------- 4. Transparência e contraste reduzidos: o cabeçalho volta a sólido ---------- */

@media (prefers-reduced-transparency: reduce) {
  .page-home .site-header,
  .page-home .site-header.is-scrolled {
    background: var(--color-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: var(--line);
  }
}

@media (prefers-contrast: more) {
  .page-home .site-header,
  .page-home .site-header.is-scrolled {
    background: var(--color-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: var(--line-strong);
  }
  .page-home { --line: var(--color-control-edge); }
}

/* ---------- 5. Superfícies do navegador: também são desenho ---------- */

html:has(body.page-home) {
  scrollbar-color: var(--color-control-edge) transparent;
  scrollbar-width: thin;
}

.page-home .hero-trade,
.page-home .footer-copyright { font-variant-numeric: tabular-nums; }