/* enviquo — camada de movimento + ajuste tipográfico (26/07/2026; revisão 27/07)
   Pedido do Anderson: o site estava estático; adicionar transições de rolagem,
   parallax, hover e motion graphics. Regras que esta camada obedece:
   - Só transform/opacity animam (compositor). Exceções pontuais e documentadas:
     stroke-dashoffset nos traços SVG do flow (roda UMA vez, área minúscula) e
     cor/sombra em hover (paint-only, sem layout — a fundação já transiciona
     background/border/color nos botões).
   - Todo movimento contínuo/de entrada vive sob prefers-reduced-motion: no-preference.
   - Hover só em @media (hover:hover) and (pointer:fine) — no toque, o movimento
     vem da rolagem (reveal + parallax suave), nunca de hover.
   - Estados escondidos só existem com html.js (sem JS a página fica inteira).
   - ESPECIFICIDADE vs FUNDAÇÃO: html.js .rv / .rv-in (base.css, 0-2-1) vence
     transition E transform de seletor simples (0-1-0/0-2-0). Elemento .rv só
     recebe hover via html.js .rv-done… — o site.js marca .rv-done quando o
     reveal termina. Sem isso o hover dos cards revelados fica morto. */

/* ————— 1. TRILHO DO CAMPO DE VELOCIDADE (o "disparo" vivo) ————— */
/* .tex-track: 6 cópias da textura lado a lado (HTML); anda -1/6 (uma cópia
   exata) e recomeça = loop perfeito. As 5 cópias restantes cobrem o viewport
   durante o deslocamento (5 × ~598px na altura máxima ≈ 2990px ≥ 2560).
   Com 3 cópias o fim do ciclo expunha buraco a partir de 1024px de largura. */
.tex-esteira { overflow: hidden; }
.tex-track {
  display: flex;
  align-items: center;
  width: max-content;
}
/* o PNG da textura tem uma moldura clara embutida nas quatro bordas; cada
   cópia entra com sangria (altura maior + margens negativas) e o container
   com overflow hidden corta a moldura, sumindo com a emenda do loop */
.tex-track img {
  display: block;
  height: calc(100% + 10px);
  width: auto;
  flex: none;
  margin-inline: -7px;
}
.s01-speed .tex-track { height: clamp(56px, 9vw, 110px); }
.s06-cta-faixa { background: none; }
.s06-cta-faixa .tex-track { height: clamp(72px, 9vw, 140px); }
@media (prefers-reduced-motion: no-preference) {
  /* will-change aqui dentro: sob reduce a esteira é estática e não deve
     reservar camada de compositor à toa */
  .tex-track { animation: tex-anda 56s linear infinite; will-change: transform; }
  @keyframes tex-anda {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-16.6667%, 0, 0); }
  }
}

/* ————— 2. PARALLAX (aplicado pelo site.js via translate3d) ————— */
.prlx { will-change: transform; }

/* wrap do banner §8: existe SÓ para receber o parallax (o .s06-banner-media
   é .rv, então o site.js aplica o transform no PAI; sem o wrap o pai seria
   .container.s06-banner-grid e o TEXTO do banner andaria junto).
   min-width: 0 porque o card original zerava o mínimo da célula da grid via
   overflow:hidden — sem isso o img de 1600px estoura a coluna. */
.s06-banner-media-wrap { min-width: 0; }

/* o banner-img (§5c) preenche a célula com object-fit: cover a partir de
   768px (03css); o parallax translada até ±30px e exporia faixa vazia nas
   bordas — a escala compensa (±10% da célula medida em 341px a 1920 = 34px
   de folga por lado ≥ teto de 30px; medição na sonda de QA). Só quando o
   parallax está ativo: .prlx entra via site.js, que nem liga o parallax
   sob prefers-reduced-motion. */
@media (min-width: 768px) {
  .s03-banner-img.prlx { scale: 1.2; }
}

/* ————— 3. ENTRADAS LIGADAS AO REVEAL (.rv-in que a fundação já marca) ————— */
@media (prefers-reduced-motion: no-preference) {

  /* barras de gráfico crescem do chão (hero e dashboard) */
  html.js .rv:not(.rv-in) .s01-bar,
  html.js .rv:not(.rv-in) .s03-bar,
  html.js .rv:not(.rv-in) .s05-grafico-barras > span {
    transform: scaleY(0.12);
  }
  .s01-bar, .s03-bar, .s05-grafico-barras > span {
    transform-origin: bottom;
    transition: transform 1.3s var(--ease-out-expo);
  }
  .s01-group:nth-child(2) .s01-bar, .s03-grupo:nth-child(2) .s03-bar { transition-delay: 100ms; }
  .s01-group:nth-child(3) .s01-bar, .s03-grupo:nth-child(3) .s03-bar { transition-delay: 200ms; }
  .s01-group:nth-child(4) .s01-bar, .s03-grupo:nth-child(4) .s03-bar { transition-delay: 300ms; }
  .s01-group:nth-child(5) .s01-bar, .s03-grupo:nth-child(5) .s03-bar { transition-delay: 400ms; }
  .s01-group:nth-child(6) .s01-bar, .s03-grupo:nth-child(6) .s03-bar { transition-delay: 500ms; }

  /* números de seção e degraus dão um "pop" discreto. A variante descendente
     existe porque os círculos 02/03 NÃO carregam .rv próprio — revelam via
     header.sec-head.rv (conferido no HTML montado). */
  html.js .num-circulo.rv:not(.rv-in),
  html.js .rv:not(.rv-in) .num-circulo,
  html.js .rv:not(.rv-in) .s05-num {
    transform: translateY(14px) scale(0.82);
  }
  .num-circulo, .s05-num { transition: transform 0.9s var(--ease-out-expo), opacity 0.8s ease; }

  /* selos VERIFICADO do mockup de DNS pipocam em sequência */
  html.js .rv:not(.rv-in) .s03-status { opacity: 0; transform: scale(0.85); }
  .s03-status { transition: transform 0.7s var(--ease-out-expo), opacity 0.6s ease; }
  .s03-dns-item:nth-of-type(2) .s03-status { transition-delay: 220ms; }
  .s03-dns-item:nth-of-type(3) .s03-status { transition-delay: 440ms; }

  /* donut entra girando até o lugar */
  html.js .rv:not(.rv-in) .s03-donut { transform: rotate(-80deg) scale(0.9); opacity: 0; }
  .s03-donut { transition: transform 1.1s var(--ease-out-expo), opacity 0.8s ease; }

  /* flow builder: traços se desenham, aresta vermelha por último (site.js
     seta pathLength=1). Gate html.js no estado escondido: sem JS não existe
     pathLength=1 e o dasharray viraria pontilhado permanente no traço.
     Os delays ficam em .rv-in … (0-3-0) e vencem o shorthand (0-2-1). */
  html.js .s04-edge { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s ease-out; }
  html.js .rv-in .s04-edge { stroke-dashoffset: 0; }
  .rv-in .s04-edge:nth-of-type(2) { transition-delay: 280ms; }
  .rv-in .s04-edge:nth-of-type(3) { transition-delay: 560ms; }
  .rv-in .s04-edge:nth-of-type(4),
  .rv-in .s04-edge:nth-of-type(5) { transition-delay: 860ms; }

  /* chips do hero flutuam de leve, cada um no seu tempo (a lista tem 8
     filhos: 6 chips + avatares + selo LGPD — todos defasados) */
  .s01-float { animation: chip-flutua 9s ease-in-out infinite alternate; }
  .s01-float:nth-child(2) { animation-delay: -1.2s; }
  .s01-float:nth-child(3) { animation-delay: -2.6s; }
  .s01-float:nth-child(4) { animation-delay: -3.8s; }
  .s01-float:nth-child(5) { animation-delay: -5.1s; }
  .s01-float:nth-child(6) { animation-delay: -6.3s; }
  .s01-float:nth-child(7) { animation-delay: -1.9s; }
  .s01-float:nth-child(8) { animation-delay: -4.4s; }
  @keyframes chip-flutua {
    from { transform: translate3d(0, -3px, 0); }
    to   { transform: translate3d(0, 4px, 0); }
  }
}

/* ————— 3b. ESCADA DE APRENDIZADO (desktop, uma execução por reveal) —————
   O ::after carrega o fundo do degrau para o scaleY não deformar conteúdo.
   O ::before da lista cobre a base Ink com um único traço Signal crescente. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .s05-escada {
    position: relative;
  }

  .s05-degrau {
    isolation: isolate;
    background: none;
    border-color: transparent;
    border-radius: 0;
  }

  .s05-degrau::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -1px;
    background: var(--enviquo-paper);
    border: 1px solid var(--gray-200);
    border-block-end: 0;
    border-radius: 12px 12px 0 0;
    transform: scaleY(1);
    transform-origin: bottom;
    transition: transform 1.1s var(--ease-out-expo);
  }

  .s05-degrau > * {
    position: relative;
    z-index: 1;
  }

  html.js .s05-degrau.rv:not(.rv-in)::after {
    transform: scaleY(0.28);
  }

  .s05-degrau:nth-child(1)::after { transition-delay: 0ms; }
  .s05-degrau:nth-child(2)::after { transition-delay: 120ms; }
  .s05-degrau:nth-child(3)::after { transition-delay: 240ms; }
  .s05-degrau:nth-child(4)::after { transition-delay: 360ms; }
  .s05-degrau:nth-child(5)::after { transition-delay: 480ms; }

  .s05-escada::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    background: var(--enviquo-signal);
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 1.4s var(--ease-out-expo) 300ms;
    pointer-events: none;
  }

  html.js .s05-escada:not(:has(.s05-degrau.rv-in))::before {
    transform: scaleX(0);
  }

  .s05-degrau:nth-child(5).rv-in .s05-num {
    animation: s05-conversao-pulso 600ms var(--ease-out-expo) 1.2s 1;
  }

  @keyframes s05-conversao-pulso {
    0%,
    100% { transform: scale(1); }
    50% { transform: scale(1.12); }
  }
}

/* fallback sem movimento: nada fica escondido nem deslocado */
@media (prefers-reduced-motion: reduce) {
  .tex-track { animation: none; }
  .s04-edge { stroke-dasharray: none; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .s05-escada {
    position: relative;
  }

  .s05-escada::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    background: var(--enviquo-signal);
    transform: scaleX(1);
    transform-origin: left;
    transition: none;
    animation: none;
    pointer-events: none;
  }

  html.js .s05-degrau.rv,
  html.js .s05-degrau.rv .s05-num {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .s05-degrau::after {
    content: none;
  }
}

/* ————— 4. HOVER (só ponteiro fino; no toque não existe hover) —————
   Seletores em dupla: o simples serve elemento SEM .rv (e o caso sem JS);
   o gêmeo html.js .rv-done… (0-3-1+) vence a fundação nos elementos .rv
   depois que o reveal termina. Antes disso a fundação é dona da transição
   (de propósito: o reveal não pode ser interrompido por hover). */
@media (hover: hover) and (pointer: fine) {

  /* cartões ganham elevação real */
  .card,
  .s05-motivo, .s05-resultado, .s05-stat,
  .s06-post, .s02-mock, .s03-mock, .s04-mock-card,
  html.js .rv-done:is(.card, .s05-motivo, .s05-resultado, .s05-stat, .s06-post, .s02-mock, .s03-mock, .s04-mock-card) {
    transition: transform 300ms var(--ease-out-expo),
                box-shadow 300ms ease,
                border-color 300ms ease;
  }
  .s05-motivo:hover, .s05-resultado:hover, .s05-stat:hover,
  .s02-mock:hover, .s03-mock:hover, .s04-mock-card:hover,
  html.js .rv-done:is(.s05-motivo, .s05-resultado, .s05-stat, .s02-mock, .s03-mock, .s04-mock-card):hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 14px 34px rgba(10, 10, 10, 0.10);
    border-color: var(--gray-300);
  }

  /* cards de blog: sobe + zoom sutil na foto + título esquenta
     (.s06-post não carrega .rv — conferido no HTML montado) */
  .s06-post:hover { transform: translate3d(0, -5px, 0); box-shadow: 0 16px 38px rgba(10, 10, 10, 0.12); }
  .s06-post-media { overflow: hidden; }
  .s06-post-media img { transition: transform 0.6s var(--ease-out-expo); }
  .s06-post:hover .s06-post-media img { transform: scale(1.045); }
  .s06-post-titulo { transition: color 200ms ease; }
  .s06-post:hover .s06-post-titulo { color: var(--signal-600); }

  /* navegação: filete Signal desliza por baixo do link (hover E foco) */
  .nav-links a { position: relative; }
  .nav-links a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -6px;
    height: 2px;
    background: var(--enviquo-signal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 240ms var(--ease-out-expo);
  }
  .nav-links a:hover::after,
  .nav-links a:focus-visible::after { transform: scaleX(1); }

  /* botões respondem antes do clique. :not(:active) preserva o press da
     fundação (.btn:active scale 0.97, base.css) — sem ele este hover, que
     carrega por último, venceria o active na cascata. A lista de transition
     PRESERVA a da fundação (transform 100ms = resposta do press ~100ms,
     apple-design) e soma a sombra. */
  .btn {
    transition:
      transform 100ms ease-out,
      box-shadow 180ms ease,
      background-color 150ms ease,
      border-color 150ms ease,
      color 150ms ease;
  }
  .btn:hover:not(:active) { transform: translate3d(0, -2px, 0); }
  .btn-signal:hover { box-shadow: 0 10px 24px rgba(230, 34, 8, 0.35); }
  .btn-ink:hover { box-shadow: 0 10px 22px rgba(10, 10, 10, 0.28); }

  /* chips flutuantes do hero: o li.chip É o próprio .s01-float e a animação
     chip-flutua é dona do transform dele — o hover responde só com sombra
     (transform aqui perderia para a animação e nunca apareceria) */
  .s01-float.chip:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); }
  html.js .rv-done.s01-float.chip { transition: box-shadow 200ms ease; }

  /* FAQ: linha inteira convida ao clique (cor de fundo apenas — nada de
     propriedade de layout em transição) */
  .s06-faq-item summary { transition: background-color 180ms ease; }
  .s06-faq-item summary:hover { background-color: var(--gray-50); }

  /* selos da faixa de prova acordam (todos carregam .rv → par com .rv-done) */
  .s01-selo,
  html.js .rv-done.s01-selo { transition: transform 200ms var(--ease-out-expo); }
  .s01-selo:hover,
  html.js .rv-done.s01-selo:hover { transform: translate3d(0, -3px, 0); }

  /* links do rodapé escurecem com sublinhado */
  .foot-links a { transition: color 160ms ease; }
  .foot-links a:hover { color: var(--gray-900); text-decoration: underline; text-underline-offset: 3px; }

  /* alvo de parallax recebe transform INLINE por frame (site.js): transition
     de transform aqui faria cada frame "elasticar" — e o transform inline já
     torna o lift por CSS inerte nesses nós. Ficam só as reações de pintura. */
  .prlx,
  html.js .rv-done.prlx { transition-property: box-shadow, border-color, background-color, color; }
}

/* ————— 5. AJUSTE TIPOGRÁFICO (auditoria 26/07: piso de leitura) —————
   Piso 12px para texto que informa (legendas, rótulos, código, th, status);
   11px só para ornamento puro: eixos de mockup (01–06 no hero, FEV–JUL no
   dashboard), período do painel e iniciais de avatar (aria-hidden e com o
   nome completo ao lado). Auditoria completa no README. */
.s01-panel-kicker, .s01-leg, .s01-selo-txt small,
.s02-mini-label, .s02-file, .s02-tag, .s02-saldo, .s02-custo, .s02-saldo-apos,
.s02-vars-lista code,
.s03-mock-head, .s03-mock-foot, .s03-dns-tipo, .s03-status, .s03-legenda-item,
.s03-foot-titulo, .s03-donut-lista li, .s03-tabela th,
.s04-card-title, .s04-status, .s04-node-kicker, .s04-flow-tag, .s04-flow-foot,
.s04-code-cap, .s04-badge-202, .s04-tabela th, .s04-papel,
.s05-mini-label {
  font-size: 0.75rem;
}
.s04-node, .s04-node-valor { font-size: 0.75rem; }
.s01-x, .s01-panel-periodo, .s03-eixo span, .s04-avatar { font-size: 0.6875rem; }