/* =============================================================================
   LIF3 · motion.css v2.0 — animações de interface e de marca
   Depende de tokens.css. Comportamento (gatilhos, timelines do logo) em motion.js.
   Documentação completa: motion.md (catálogo M01–M16).

   Regras que valem para tudo aqui:
   - Só transform, opacity, clip-path e stroke-dashoffset.
   - Nunca transition: all. Nunca scale(0). Nenhuma curva com overshoot.
   - Hover com movimento só em ponteiro fino (@media (hover: hover) and (pointer: fine)).
   - prefers-reduced-motion: reduz, não zera (fades ficam, deslocamentos somem).
   ============================================================================= */

/* ---------- M12 · Botão: press e hover ------------------------------------------ */
.lif3-botao {
  transition:
    transform var(--t-pressao) var(--ease-saida),
    box-shadow var(--t-ui) ease,
    background-color var(--t-ui) ease,
    border-color var(--t-ui) ease,
    color var(--t-ui) ease;
}
.lif3-botao:active { transform: scale(0.97); }
.lif3-botao .lif3-seta { display: inline-block; transition: transform var(--t-ui) var(--ease-saida); }
.lif3-botao:focus-visible { outline: 2px solid var(--lif3-lime); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .lif3-botao:not(.lif3-botao--contorno):hover { box-shadow: var(--brilho-lime); }
  [data-tema="claro"] .lif3-botao:not(.lif3-botao--contorno):hover { box-shadow: none; background-color: var(--lif3-graphite); }
  .lif3-botao--contorno:hover { border-color: var(--lime-70); color: var(--acento); }
  [data-tema="claro"] .lif3-botao--contorno:hover { border-color: var(--lif3-black); }
  .lif3-botao:hover .lif3-seta { transform: translateX(3px); }
}

/* Variante de CTA de marketing: o preenchimento entra com a borda cortada a 60° */
.lif3-botao--corte::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--lif3-lime);
  clip-path: polygon(-30% 0, -30% 0, calc(-30% - 26px) 100%, -30% 100%);
  transition: clip-path var(--t-estado) var(--ease-saida);
}
@media (hover: hover) and (pointer: fine) {
  .lif3-botao--corte:hover { color: var(--lif3-black); border-color: var(--lif3-lime); }
  .lif3-botao--corte:hover::before { clip-path: polygon(-30% 0, calc(100% + 26px) 0, 100% 100%, -30% 100%); }
}

/* ---------- M13 · Card de dado: hover ------------------------------------------- */
.lif3-card {
  border: 1px solid var(--linha);
  transition: transform var(--t-ui) var(--ease-saida), border-color var(--t-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
  .lif3-card:hover { transform: translateY(-2px); border-color: var(--lime-40); }
  [data-tema="claro"] .lif3-card:hover { border-color: var(--linha-forte); }
}

/* ---------- Revelar ao rolar (marketing). motion.js põe data-visivel uma vez ----- */
.lif3-js .lif3-revelar {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--t-entrada) var(--ease-troca);
}
.lif3-js .lif3-revelar[data-visivel] { clip-path: inset(0 0 0 0); }

/* Entrada escalonada de grupo: cada filho com style="--i:n" */
.lif3-js .lif3-subir > * {
  opacity: 0; transform: translateY(8px);
  transition: opacity 300ms var(--ease-saida), transform 300ms var(--ease-saida);
  transition-delay: calc(min(var(--i, 0), 8) * var(--escalonar));
}
.lif3-js .lif3-subir[data-visivel] > * { opacity: 1; transform: none; }

/* ---------- M04 · Título: linhas sobem de uma máscara ---------------------------- */
/* folga em cima para acento e til (AÇÃO, INTELIGÊNCIA) não serem cortados pela máscara */
.lif3-titulo-animado .linha { display: block; overflow: hidden; padding: 0.14em 0 0.06em; margin: -0.14em 0 -0.06em; }
.lif3-titulo-animado .linha > span { display: inline-block; }
.lif3-js .lif3-titulo-animado .linha > span {
  transform: translateY(108%);
  transition: transform 760ms var(--ease-fluxo);
  transition-delay: calc(var(--i, 0) * var(--escalonar-fluxo));
}
.lif3-js .lif3-titulo-animado .linha.lif3-acento > span { transition-delay: calc(var(--i, 0) * var(--escalonar-fluxo) + 120ms); }
.lif3-js .lif3-titulo-animado[data-visivel] .linha > span { transform: none; }
/* trilho sob o título (opcional): <i class="lif3-trilho"></i> */

/* ---------- M09 · Elementos gráficos ------------------------------------------- */
.lif3-trilho { display: block; height: 1px; background: var(--lif3-lime); }
.lif3-js .lif3-trilho {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 700ms var(--ease-fluxo) var(--atraso, 0ms);
}
.lif3-js [data-visivel] .lif3-trilho, .lif3-js .lif3-trilho[data-visivel] { transform: scaleX(1); }

.lif3-arco { fill: none; stroke: var(--lif3-lime); stroke-width: 1; }
.lif3-js .lif3-arco { stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--ease-troca) var(--atraso, 0ms); }
.lif3-js [data-visivel] .lif3-arco, .lif3-js .lif3-arco[data-visivel] { stroke-dashoffset: 0; }

.lif3-cruz { display: inline-block; }
.lif3-js .lif3-cruz { opacity: 0; transform: rotate(-90deg) scale(0.8);
  transition: opacity 400ms var(--ease-saida), transform 400ms var(--ease-saida); transition-delay: var(--atraso, 0ms); }
.lif3-js [data-visivel] .lif3-cruz, .lif3-js .lif3-cruz[data-visivel] { opacity: 1; transform: none; }

.lif3-js .lif3-fluxo-anim { clip-path: inset(0 100% 0 0); transition: clip-path 700ms var(--ease-fluxo) var(--atraso, 0ms); }
.lif3-js [data-visivel] .lif3-fluxo-anim, .lif3-js .lif3-fluxo-anim[data-visivel] { clip-path: inset(0 0 0 0); }

/* ---------- M06 · Barras de crescimento ----------------------------------------- */
.lif3-barras { display: flex; align-items: flex-end; gap: 4px; }
.lif3-barras > i {
  display: block; flex: 1; min-width: 4px; height: calc(var(--v, 50) * 1%);
  background: var(--lif3-lime); opacity: calc(0.35 + var(--v, 50) / 160);
  transform-origin: bottom;
}
.lif3-js .lif3-barras > i {
  transform: scaleY(0);
  transition: transform 600ms var(--ease-saida);
  transition-delay: calc(min(var(--i, 0), 14) * 40ms);
}
.lif3-js .lif3-barras[data-visivel] > i { transform: scaleY(1); }
.lif3-barras > i:last-child { opacity: 1; }

/* ---------- M07 · Linha de tendência ------------------------------------------- */
.lif3-linha path[data-linha] { fill: none; stroke: var(--lif3-lime); stroke-width: 2; stroke-linecap: round; }
.lif3-js .lif3-linha path[data-linha] {
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--t-cinema) var(--ease-troca); }
.lif3-js .lif3-linha path[data-area] { opacity: 0; transition: opacity 600ms ease 500ms; }
.lif3-js .lif3-linha circle[data-ponto] { opacity: 0; transform: scale(0.6); transform-box: fill-box; transform-origin: center;
  transition: opacity 300ms var(--ease-saida) 1000ms, transform 300ms var(--ease-saida) 1000ms; }
.lif3-js .lif3-linha[data-visivel] path[data-linha] { stroke-dashoffset: 0; }
.lif3-js .lif3-linha[data-visivel] path[data-area] { opacity: 1; }
.lif3-js .lif3-linha[data-visivel] circle[data-ponto] { opacity: 1; transform: none; }
.lif3-linha circle[data-anel] { fill: none; stroke: var(--lif3-lime); opacity: 0; transform-box: fill-box; transform-origin: center; }
.lif3-js .lif3-linha[data-visivel] circle[data-anel] { animation: lif3-anel 1200ms var(--ease-saida) 1200ms 2; }
@keyframes lif3-anel { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }

/* ---------- M10 · Varredura de sinal (brilho em diagonal de 60°) ---------------- */
.lif3-varredura { position: relative; overflow: hidden; isolation: isolate; }
.lif3-varredura::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none; z-index: 2;
  background: linear-gradient(120deg, transparent 38%, rgba(245, 245, 245, 0.22) 47%, rgba(198, 255, 0, 0.30) 50%, transparent 60%);
  transform: translateX(-110%);
}
.lif3-js .lif3-varredura[data-visivel]::after { animation: lif3-varrer 900ms var(--ease-troca) 1 both; animation-delay: var(--atraso, 200ms); }
@media (hover: hover) and (pointer: fine) {
  .lif3-varredura--hover::after { transition: transform 650ms var(--ease-troca); }
  .lif3-varredura--hover:hover::after { transform: translateX(110%); }
}
@keyframes lif3-varrer { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* ---------- M11 · Índice de seção "01 | INTRODUÇÃO" ----------------------------- */
.lif3-js .lif3-rotulo[data-lif3-secao] i { transform: scaleY(0); transform-origin: top; transition: transform 300ms var(--ease-saida) 120ms; }
.lif3-js .lif3-rotulo[data-lif3-secao] > span { opacity: 0; transform: translateX(-6px); transition: opacity 300ms var(--ease-saida) 220ms, transform 300ms var(--ease-saida) 220ms; }
.lif3-js .lif3-rotulo[data-lif3-secao][data-visivel] i { transform: none; }
.lif3-js .lif3-rotulo[data-lif3-secao][data-visivel] > span { opacity: 1; transform: none; }
/* número sobe como odômetro */
.lif3-rotulo[data-lif3-secao] b { display: inline-block; overflow: hidden; vertical-align: bottom; }
.lif3-rotulo[data-lif3-secao] b > em { display: inline-block; font-style: normal; }
.lif3-js .lif3-rotulo[data-lif3-secao] b > em { transform: translateY(105%); transition: transform 300ms var(--ease-saida); }
.lif3-js .lif3-rotulo[data-lif3-secao][data-visivel] b > em { transform: none; }

/* ---------- M03 · Carregador "três fluxos" -------------------------------------- */
.lif3-carregador { --c: var(--lif3-lime); display: inline-grid; gap: 3px; width: 34px; }
.lif3-carregador > i {
  position: relative; display: block; height: 6px; border-radius: 0 6px 6px 0; overflow: hidden;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  clip-path: polygon(3.5px 0, 100% 0, 100% 100%, 0 100%);
}
.lif3-carregador > i:nth-child(1) { margin-left: 5px; }
.lif3-carregador > i:nth-child(2) { margin-left: 7px; }
.lif3-carregador > i::after {
  content: ""; position: absolute; inset: 0; background: var(--c);
  transform: scaleX(0); transform-origin: left;
  animation: lif3-fluxo-carga 1400ms var(--ease-troca) infinite;
}
.lif3-carregador > i:nth-child(2)::after { animation-delay: 140ms; }
.lif3-carregador > i:nth-child(3)::after { animation-delay: 280ms; }
@keyframes lif3-fluxo-carga {
  0% { transform: scaleX(0); opacity: 1; }
  45% { transform: scaleX(1); opacity: 1; }
  80% { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(0); opacity: 0; }
}
[data-tema="claro"] .lif3-carregador { --c: var(--lif3-black); }

/* ---------- M14 · Pulso neon (ambiente: só hero e vídeo) ------------------------ */
.lif3-neon { position: relative; isolation: isolate; }
.lif3-neon::before {
  content: ""; position: absolute; inset: 8% 10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(198, 255, 0, 0.30), rgba(198, 255, 0, 0.08) 55%, transparent 75%);
  animation: lif3-respirar 4s ease-in-out infinite alternate;
}
.lif3-neon[data-pausado]::before { animation-play-state: paused; }
@keyframes lif3-respirar { from { opacity: 0.45; transform: scale(0.96); } to { opacity: 0.9; transform: scale(1.04); } }

/* ---------- M15 · Rastros de luz (ambiente: só hero e vídeo) -------------------- */
.lif3-rastros { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lif3-rastros > i {
  position: absolute; left: 0; height: 1px; width: 28%;
  background: linear-gradient(90deg, transparent, rgba(198, 255, 0, 0.55) 70%, rgba(245, 245, 245, 0.9));
  transform: translateX(-120%);
  animation: lif3-rastro var(--d, 3.6s) linear var(--a, 0s) infinite;
}
.lif3-rastros[data-pausado] > i { animation-play-state: paused; }
@keyframes lif3-rastro { from { transform: translateX(-120%); } to { transform: translateX(460%); } }

/* ---------- M08 · 0 → 1 → SCALE --------------------------------------------------- */
.lif3-escala { display: inline-flex; align-items: center; gap: 14px; font-family: var(--fonte-display);
  font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-3); }
.lif3-escala > span:nth-of-type(2) { color: var(--texto); }
.lif3-escala > b { font-weight: 700; color: var(--acento); }
.lif3-escala > i { position: relative; display: block; width: 28px; height: 1px; background: currentColor; }
.lif3-escala > i::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

/* Estados iniciais de quem é animado por JS ao entrar na tela (evita ver o final e depois o zero) */
.lif3-js [data-lif3-escala]:not([data-visivel]) > *,
.lif3-js [data-lif3-contar]:not([data-visivel]),
.lif3-js [data-lif3-assinatura]:not([data-visivel]) svg,
.lif3-js [data-lif3-icone]:not([data-visivel]) svg { opacity: 0; }

/* ---------- Acessibilidade: movimento reduzido ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lif3-botao:active { transform: none; }
  .lif3-revelar { clip-path: none; opacity: 0; transition: opacity 200ms ease; }
  .lif3-revelar[data-visivel] { opacity: 1; }
  .lif3-subir > * { transform: none; transition: opacity 200ms ease; transition-delay: 0ms; }
  .lif3-titulo-animado .linha > span { transform: none; opacity: 0; transition: opacity 200ms ease; }
  .lif3-titulo-animado[data-visivel] .linha > span { opacity: 1; }
  .lif3-trilho, .lif3-cruz, .lif3-fluxo-anim, .lif3-barras > i { transform: none; clip-path: none; transition: opacity 200ms ease; }
  .lif3-arco, .lif3-linha path[data-linha] { stroke-dashoffset: 0; transition: none; }
  .lif3-linha path[data-area], .lif3-linha circle[data-ponto] { transform: none; transition: opacity 200ms ease; }
  .lif3-js .lif3-linha[data-visivel] circle[data-anel] { animation: none; }
  .lif3-varredura::after { display: none; }
  .lif3-rotulo[data-lif3-secao] i, .lif3-rotulo[data-lif3-secao] span { transform: none; }
  .lif3-carregador > i::after { transform: scaleX(1); animation: lif3-carga-calma 1600ms ease-in-out infinite alternate; }
  .lif3-carregador > i:nth-child(2)::after { animation-delay: 200ms; }
  .lif3-carregador > i:nth-child(3)::after { animation-delay: 400ms; }
  .lif3-neon::before { animation: none; opacity: 0.6; }
  .lif3-rastros { display: none; }
  .lif3-card:hover { transform: none; }
}
@keyframes lif3-carga-calma { from { opacity: 0.25; } to { opacity: 1; } }

/* ---------- Modo parado: renders de PNG/PDF, prints, vídeo exportado quadro a quadro
   <html data-lif3-movimento="parado"> — motion.js não liga .lif3-js e nada anima. */
[data-lif3-movimento="parado"] *, [data-lif3-movimento="parado"] *::before, [data-lif3-movimento="parado"] *::after {
  animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important;
}