/* LurIA — animações da home (par de js/motion.js).

   COMO DESLIGAR: tudo aqui só vale com html.motion. Veja o topo de js/motion.js.
   Sem JS ou com prefers-reduced-motion, a página fica estática e completa.
   Só transform/opacity animam (exceções comentadas). Durações 0,3–0,7 s, ease-out.
   Cores sempre pelas variáveis do tema, então claro e escuro funcionam sozinhos. */

:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --m-fast: .3s;
  --m-base: .5s;
  --m-slow: .7s;
}

/* ===================== Base ===================== */

/* Barra de progresso de leitura */
.scroll-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20; background: var(--brand); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
html:not(.motion) .scroll-bar { display: none; }

/* Cabeçalho: some ao descer, volta ao subir */
.motion .site-header { transition: transform var(--m-fast) var(--ease-out), box-shadow .25s ease; }
.motion .site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-scrolled { box-shadow: 0 6px 20px -14px rgba(11,13,18,.35); }

/* Revelar ao rolar: uma vez por bloco (o JS só marca o que está fora da tela ao carregar) */
.motion [data-reveal] { opacity: 0; transform: translateY(16px);
  transition: opacity var(--m-base) var(--ease-out), transform var(--m-base) var(--ease-out);
  transition-delay: var(--d, 0s); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Sublinhado que cresce nos links do menu */
.lu-nav ul a { position: relative; }
.lu-nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--m-fast) var(--ease-out); }
.lu-nav ul a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .lu-nav ul a:hover::after { transform: scaleX(1); } }

/* ===================== Hero ===================== */
@keyframes luUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes luRise { from { transform: translateY(14px); } to { transform: none; } }
@keyframes luFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes luPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes luDraw { to { stroke-dashoffset: 0; } }

/* Título: só sobe, sem fade — elemento com opacidade 0 não conta como LCP e atrasaria a métrica.
   Subtítulo, botões e selos: fade + leve subida, stagger curto. Tudo termina em até 0,7 s. */
.motion .hero .lu-display { animation: luRise var(--m-base) var(--ease-out) both; }
.motion .hero .lu-lead { animation: luUp var(--m-base) var(--ease-out) .06s both; }
.motion .hero .ctas { animation: luUp var(--m-base) var(--ease-out) .12s both; }
.motion .hero .trust { animation: luUp var(--m-base) var(--ease-out) .18s both; }

/* Diagrama: as linhas ativas se desenham (stroke-dashoffset — exceção à regra transform/opacity:
   só repinta um SVG pequeno, sem layout), as tracejadas e os nós aparecem por fade. */
.motion .hub .ln.on { stroke-dasharray: 1; stroke-dashoffset: 1; animation: luDraw var(--m-slow) var(--ease-out) .3s forwards; }
.motion .hub .ln.on:nth-of-type(3) { animation-delay: .38s; }
.motion .hub .ln.on:nth-of-type(5) { animation-delay: .55s; }
.motion .hub .ln.on:nth-of-type(7) { animation-delay: .63s; }
.motion .hub .ln:not(.on) { animation: luFade var(--m-base) ease-out .45s both; }
.motion .hub .core { animation: luPop var(--m-base) var(--ease-out) .15s both; }
.motion .hub .n { animation: luFade .4s ease-out .3s both; }
.motion .hub .n:nth-of-type(n+5) { animation-delay: .6s; }

/* Pulsos: o JS liga por alguns segundos quando o diagrama aparece e quando o mouse passa
   por ele; fora disso somem e o relógio do SVG pausa (WCAG 2.2.2: nada se move > 5 s sem pedir). */
.hub .flow { fill: var(--brand); }
html:not(.motion) .hub .flow { display: none; }
.motion .hub .flow { opacity: 0; transition: opacity .4s ease-out; }
.motion .hub.is-flowing .flow { opacity: 1; }
.hub .n { transition: border-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .hub .n:hover { border-color: var(--brand); } }

/* Botões: resposta ao pressionar; efeito magnético (JS) usa a propriedade translate,
   que não briga com o transform do :active. */
.lu-btn:active { transform: scale(.97); }
.motion [data-magnetic] { transition: background .15s, border-color .15s, color .15s, transform .15s var(--ease-out), translate .35s var(--ease-out); }
.motion [data-magnetic].is-magnet { transition-duration: .15s, .15s, .15s, .15s, .12s; }

/* Secundário: preenchimento que corre da esquerda no hover (só com mouse) */
.lu-btn-secondary { position: relative; isolation: isolate; overflow: hidden; }
.lu-btn-secondary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brand-soft); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .lu .lu-btn-secondary:hover { border-color: var(--brand); }
  .lu-btn-secondary:hover::before { transform: scaleX(1); }
}
.lu-btn-secondary:focus-visible::before { transform: scaleX(1); }
/* ===================== Calculadora ===================== */
.lu-range input[type=range]::-webkit-slider-thumb { transition: transform .2s var(--ease-out); }
.lu-range input[type=range]:hover::-webkit-slider-thumb, .lu-range input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18); }

/* ===================== Cases ===================== */
/* Entrada dos cards, count-up das métricas e FLIP do filtro ficam no JS (WAAPI).
   Aqui: resposta ao mouse (só em quem tem mouse) e ao abrir um case. */
.lu-metric { transition: translate var(--m-fast) var(--ease-out), box-shadow var(--m-fast) ease, border-color var(--m-fast) ease, opacity var(--m-base) var(--ease-out), transform var(--m-base) var(--ease-out); }
.lu-cases summary > div, .lu-cases .n { transition: translate var(--m-fast) var(--ease-out), color .2s; }
.lu-filter button { transition: background .2s, color .2s, border-color .2s, transform .15s var(--ease-out); }
.lu-filter button:active { transform: scale(.97); }
.motion .lu-cases details[open] .case-body { animation: luUp var(--m-fast) var(--ease-out) both; }
@media (hover: hover) and (pointer: fine) {
  .lu-metric:hover { translate: 0 -3px; box-shadow: 0 1px 2px rgba(11,13,18,.04), 0 18px 36px -18px rgba(11,13,18,.28); border-color: var(--line-strong); }
  .lu-cases summary:hover > div { translate: 4px 0; }
  .lu-cases summary:hover .n { color: var(--brand); }
  .lu-filter button:hover { border-color: var(--ink); }
}
/* ===================== Mapa de integrações ===================== */
/* Entrada ao rolar: [data-reveal] (base). Troca de aba: painel com data-shown (JS). */
.motion .lu-map[data-shown] .lu-card { animation: luUp var(--m-fast) var(--ease-out) both; }
.motion .lu-map[data-shown] .lu-card:nth-child(2) { animation-delay: .05s; }
.motion .lu-map[data-shown] .lu-card:nth-child(3) { animation-delay: .1s; }
.lu-map .lu-card { transition: translate var(--m-fast) var(--ease-out), box-shadow var(--m-fast) ease, border-color var(--m-fast) ease, opacity var(--m-base) var(--ease-out), transform var(--m-base) var(--ease-out); }
.lu-link .node { transition: background .2s, color .2s; }
.lu-link .arrow { display: inline-block; transition: transform var(--m-fast) var(--ease-out); }
.lu-tabs button { transition: background .2s, color .2s, transform .15s var(--ease-out); }
.lu-tabs button:active { transform: scale(.97); }
.what i { transition: background .25s, color .25s; }
@media (hover: hover) and (pointer: fine) {
  .lu-map .lu-card:hover { translate: 0 -3px; box-shadow: 0 1px 2px rgba(11,13,18,.04), 0 18px 36px -18px rgba(11,13,18,.28); border-color: var(--line-strong); }
  .lu-link:hover .arrow { transform: scaleX(1.3); }
  .lu-link:hover .node { background: var(--brand); color: var(--on-brand); }
  .lu-tabs button:hover { color: var(--ink); }
  .what div:hover i { background: var(--brand); color: var(--on-brand); }
}
/* ===================== Como funciona ===================== */
/* Linha que liga os números das 3 etapas (sempre visível; com motion ela se desenha).
   Vai do centro do 1º número (44px → 22px) ao centro do 3º, atrás dos números. */
.lu-steps { position: relative; }
.lu-step { position: relative; z-index: 1; }
.lu-steps::before { content: ""; position: absolute; z-index: 0; top: 21px; left: 22px; right: calc((100% - 2 * var(--space-5)) / 3 - 22px); height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--brand) 35%, transparent); transform-origin: 0 50%; }
@media (max-width: 680px) { .lu-steps::before { display: none; } }
.motion .lu-steps[data-steps]::before { transform: scaleX(0); transition: transform var(--m-slow) var(--ease-out) .15s; }
.motion .lu-steps[data-steps] .lu-step { opacity: 0; transform: translateY(12px); transition: opacity var(--m-base) var(--ease-out), transform var(--m-base) var(--ease-out); }
.motion .lu-steps[data-steps] .lu-step:nth-child(2) { transition-delay: .3s; }
.motion .lu-steps[data-steps] .lu-step:nth-child(3) { transition-delay: .55s; }
.motion .lu-steps.is-in::before { transform: scaleX(1); }
.motion .lu-steps.is-in .lu-step { opacity: 1; transform: none; }
/* ===================== FAQ ===================== */
/* Abre e fecha com transição de altura do próprio <details> (::details-content +
   interpolate-size). Exceção consciente à regra transform/opacity: é a única forma de
   empurrar o conteúdo abaixo sem salto, e é resposta a um clique (não conta como CLS).
   Navegadores sem suporte abrem na hora, como hoje. O texto entra com fade curto. */
.motion .lu-faq { interpolate-size: allow-keywords; }
.motion .lu-faq details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete; }
.motion .lu-faq details[open]::details-content { block-size: auto; }
.motion .lu-faq details[open] p { animation: luFade var(--m-fast) ease-out .05s both; }
/* margem vira padding: a margem "vazaria" da área que anima e daria um salto de 12px no fim */
.motion .lu-faq details p { margin-top: 0; padding-top: var(--space-3); }
.lu-faq summary::after { transition: transform var(--m-fast) var(--ease-out); }
.lu-faq details { transition: border-color .25s ease, opacity var(--m-base) var(--ease-out), transform var(--m-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .lu-faq details:hover { border-color: var(--line-strong); } }
/* ===================== Formulário ===================== */
/* Indicador no botão enquanto envia; ao concluir, o formulário some com fade e o check
   se desenha (círculo, depois o traço). A confirmação ocupa o mesmo espaço: zero CLS. */
@keyframes luSpin { to { transform: rotate(1turn); } }
.motion .lu-btn .spin { animation: luSpin .7s linear infinite; }
.motion .contact-form { transition: opacity var(--m-fast) ease-out, visibility 0s linear var(--m-fast); }
.motion .is-sent .contact-form { opacity: 0; }
.motion .form-done:not([hidden]) { animation: luFade var(--m-fast) ease-out .15s both; }
.motion .form-done .check circle, .motion .form-done .check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .form-done:not([hidden]) .check circle { animation: luDraw var(--m-base) var(--ease-out) .25s forwards; }
.motion .form-done:not([hidden]) .check path { animation: luDraw .35s var(--ease-out) .6s forwards; }
.motion .form-done:not([hidden]) .t, .motion .form-done:not([hidden]) p { animation: luUp var(--m-fast) var(--ease-out) .5s both; }

/* ===================== Movimento reduzido ===================== */
/* Sem deslocamentos nem loops; o conteúdo aparece completo (html.motion nem é posto,
   mas isto cobre quem muda a preferência com a página aberta). */
@media (prefers-reduced-motion: reduce) {
  .lu *, .lu *::before, .lu *::after { animation: none !important; transition-duration: 0s !important; translate: none !important; }
  .motion [data-reveal] { opacity: 1; transform: none; }
}