/* ============================================================
   Vanda Ponto — Polish de aquisição (landing + cadastro)
   Escopo: SOMENTE index.html e cadastro.html. Não altera
   vanda-ui.css nem ponto.css (donos: outras pessoas).

   Diretrizes aplicadas:
   - apple-design: hierarquia por peso+tamanho+leading, tracking
     óptico, materiais/profundidade, restrição, foco visível.
   - transitions.dev: escala de tokens de motion (duração/easing/
     distância/escala/blur) + assimetria open/close, hover in/out,
     stagger, reduced-motion.

   Tokens de motion (transitions.dev):
     --sp-dur-stagger 40ms · --sp-dur-quick 150ms · --sp-dur-fast 250ms
     --sp-dur-slow 400ms · --sp-dur-very-slow 500ms
     --sp-ease  cubic-bezier(.22,1,.36,1)  (smooth-out; open/close/slide)
     --sp-ease-bounce cubic-bezier(.34,1.36,.64,1)  (entradas c/ momentum)
     --sp-dist-base 8px · --sp-dist-medium 12px · --sp-blur-small 2px
   ============================================================ */
:root{
  --sp-dur-stagger:40ms;
  --sp-dur-quick:150ms;
  --sp-dur-fast:250ms;
  --sp-dur-slow:400ms;
  --sp-dur-very-slow:500ms;
  --sp-ease:cubic-bezier(.22,1,.36,1);      /* smooth-out — o default para chrome/superfícies */
  --sp-ease-bounce:cubic-bezier(.34,1.36,.64,1);
  --sp-dist-base:8px;
  --sp-dist-medium:12px;
  --sp-blur-small:2px;
}

/* ============================================================
   1) LANDING (index.html)
   O <style> da página já traz .reveal + stagger e hover de CTA.
   Aqui só ELEVAMOS: entrada do herói no load, dominância do CTA
   primário, e um toque de material/craft — sem trocar a marca.
   ============================================================ */

/* --- Entrada do herói no load (staggered, smooth-out) ---
   O texto do herói não animava (só o card .demo tinha .reveal).
   Fazemos a coluna de texto subir por elementos, escalonada. */
.hero-copy > *{
  opacity:0;
  transform:translateY(var(--sp-dist-medium));
  animation:sp-hero-in var(--sp-dur-slow) var(--sp-ease) forwards;
}
.hero-copy > .kicker{ animation-delay:60ms; }
.hero-copy > h1{ animation-delay:120ms; }
.hero-copy > .hero-sub{ animation-delay:190ms; }
.hero-copy > .hero-actions{ animation-delay:260ms; }
.hero-copy > .trust{ animation-delay:330ms; }

@keyframes sp-hero-in{
  from{ opacity:0; transform:translateY(var(--sp-dist-medium)); filter:blur(var(--sp-blur-small)); }
  to{ opacity:1; transform:none; filter:none; }
}

/* O card .demo já tem .reveal via IntersectionObserver, mas no herói
   ele está acima da dobra — garantimos que apareça no load junto,
   com um leve atraso pra ler depois do texto. */
.hero .demo.reveal{
  animation:sp-hero-in var(--sp-dur-slow) var(--sp-ease) 300ms forwards;
}

/* --- CTA primário dominante (apple-design: o mais importante é o
   mais óbvio). Damos presença por peso/tamanho/sombra/anel, sem
   mudar a paleta. Vale pro herói e pra faixa de CTA. --- */
.hero-actions .btn-primary.btn-lg,
.cta-actions .btn-primary.btn-lg{
  font-weight:700;
  letter-spacing:-.015em;
  padding:16px 30px;
  box-shadow:0 10px 24px -10px rgba(22,101,52,.72), 0 2px 0 rgba(255,255,255,.14) inset;
}
/* anel de foco/realce sutil que "respira" só no primário do herói */
.hero-actions .btn-primary.btn-lg{
  position:relative;
}
.hero-actions .btn-primary.btn-lg::after{
  content:"";
  position:absolute; inset:-4px;
  border-radius:999px;
  border:1.5px solid rgba(22,163,74,.28);
  opacity:0;
  transform:scale(.96);
  transition:opacity var(--sp-dur-fast) var(--sp-ease), transform var(--sp-dur-fast) var(--sp-ease);
  pointer-events:none;
}
.hero-actions .btn-primary.btn-lg:hover::after{
  opacity:1;
  transform:scale(1);
}
/* Rebaixa visualmente os secundários ao lado do primário: viram
   claramente ações de apoio (hierarquia por contraste/peso). */
.hero-actions .btn-ghost.btn-lg{
  font-weight:600;
  color:var(--text-soft);
  background:transparent;
  border-color:var(--line);
}
.hero-actions .btn-ghost.btn-lg:hover{
  color:#12332c;
  background:#fff;
}

/* --- Hover-in rápido / hover-out suave nos cards (assimetria).
   Os cards já têm hover; deixamos o RETORNO um pouco mais macio. --- */
.feature,
.audience{
  transition:transform var(--sp-dur-fast) var(--sp-ease),
             box-shadow var(--sp-dur-fast) var(--sp-ease),
             border-color var(--sp-dur-fast) var(--sp-ease);
}
.feature:hover,
.audience:hover{
  transition:transform var(--sp-dur-quick) var(--sp-ease),
             box-shadow var(--sp-dur-quick) var(--sp-ease),
             border-color var(--sp-dur-quick) var(--sp-ease);
}

/* ============================================================
   2) CADASTRO (cadastro.html) — REGISTRO COMPLETO
   Usa vanda-ui.css + ponto.css (não editáveis). Só ADICIONAMOS
   camada de polish via body.vp-auth como escopo, sem renomear
   nenhum hook do cadastro.js. O formulário reusa o padrão
   seccionado numerado de funcionarios.html (.vp-employee-form-*).
   ============================================================ */

/* --- Cartão MAIS LARGO que o card de auth padrão (560px) ---
   apple-design: dar espaço ao formulário completo; grid de 2 colunas
   respira sem apertar. Mantemos a marca (mesmo material/sombra). --- */
body.vp-auth .r-main-wide{
  align-items:flex-start;               /* form alto: ancora no topo, não centraliza cortando */
  padding-top:clamp(16px, 4vh, 40px);
  padding-bottom:40px;
}
body.vp-auth .r-signup-card{
  max-width:760px;
  padding:28px 34px 26px;
}

/* --- Entrada do cartão (materializa: escala+blur+sobe, smooth-out) ---
   Primeira impressão: o cartão chega como um material, não um fade seco. --- */
body.vp-auth .r-card{
  animation:sp-card-in var(--sp-dur-slow) var(--sp-ease) both;
  will-change:transform, opacity;
}
@keyframes sp-card-in{
  from{ opacity:0; transform:translateY(var(--sp-dist-medium)) scale(.985); filter:blur(var(--sp-blur-small)); }
  to{ opacity:1; transform:none; filter:none; }
}

/* Cabeçalho: título + subtítulo empilhados ao lado do símbolo. */
body.vp-auth .r-signup-card .r-card-head{
  align-items:flex-start;
  gap:14px;
  margin-bottom:18px;
}
body.vp-auth .r-signup-card .r-card-sub{
  margin:4px 0 0;
}

/* --- Entrada escalonada das SEÇÕES numeradas no load (stagger).
   3 seções + consent + ações + link. Mantemos o total curto para
   o último bloco não parecer atrasado. --- */
body.vp-auth #signupFields > .sp-section,
body.vp-auth #signupFields > .vp-admin-active-field,
body.vp-auth #signupFields > .vp-auth-actions,
body.vp-auth #signupFields > .vp-auth-link{
  opacity:0;
  transform:translateY(var(--sp-dist-base));
  animation:sp-field-in var(--sp-dur-fast) var(--sp-ease) both;
}
body.vp-auth #signupFields > *:nth-child(1){ animation-delay:120ms; }
body.vp-auth #signupFields > *:nth-child(2){ animation-delay:160ms; }
body.vp-auth #signupFields > *:nth-child(3){ animation-delay:200ms; }
body.vp-auth #signupFields > *:nth-child(4){ animation-delay:240ms; }
body.vp-auth #signupFields > *:nth-child(5){ animation-delay:280ms; }
body.vp-auth #signupFields > *:nth-child(n+6){ animation-delay:320ms; }
@keyframes sp-field-in{
  from{ opacity:0; transform:translateY(var(--sp-dist-base)); }
  to{ opacity:1; transform:none; }
}

/* --- Título/craft: tracking óptico no título grande + ritmo --- */
body.vp-auth .r-card-title{
  letter-spacing:-.02em;
  line-height:1.1;
}
body.vp-auth .r-card-sub{
  color:var(--text-soft);
}

/* --- Seções: um respiro entre elas (o padrão de funcionários é
   pensado p/ modal; aqui damos separação suave, sem editar a base). --- */
body.vp-auth #signupFields > .sp-section{
  margin-bottom:20px;
}

/* CNPJ é o gatilho: leve destaque no input (o campo que "puxa" tudo). */
body.vp-auth .sp-cnpj-input{
  font-weight:600;
  letter-spacing:.01em;
}

/* Hint do CNPJ enquanto busca: shimmer suave = "vivo" (apple-design:
   estado em progresso deve parecer vivo, não travado). */
body.vp-auth .sp-cnpj-hint-busy{
  color:var(--text-soft);
  background:linear-gradient(90deg,var(--text-faint) 0%,var(--green) 40%,var(--text-faint) 80%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:sp-cnpj-shimmer 1.1s linear infinite;
}
@keyframes sp-cnpj-shimmer{
  from{ background-position:200% 0; }
  to{ background-position:-40% 0; }
}

/* --- Auto-fill: os campos "assentam" quando chegam do CNPJ ---
   apple-design: a mudança vinda do servidor deve parecer que o valor
   pousou — leve sobe+blur que decanta, sem ser gimmick. --- */
body.vp-auth .sp-settled{
  animation:sp-settle var(--sp-dur-fast) var(--sp-ease) both;
}
@keyframes sp-settle{
  from{ transform:translateY(calc(var(--sp-dist-base) * -.5)); filter:blur(var(--sp-blur-small)); }
  to{ transform:none; filter:none; }
}
/* A seção de empresa "acorda" (borda/realce entra) ao ser preenchida. */
body.vp-auth #empresaSection{
  transition:box-shadow var(--sp-dur-slow) var(--sp-ease);
}
body.vp-auth #empresaSection.sp-section-live{
  box-shadow:0 0 0 1px var(--green-line) inset;
  border-radius:14px;
}

/* Campo UF menor (2 chars): não precisa de coluna inteira. */
body.vp-auth .sp-field-uf .v-input{
  text-align:center;
  font-weight:600;
  letter-spacing:.08em;
}

/* Situação cadastral vira um "badge" de estado dentro do input readonly. */
body.vp-auth .sp-situacao-input{
  font-weight:600;
  background:var(--panel-soft);
  transition:color var(--sp-dur-fast) var(--sp-ease), background var(--sp-dur-fast) var(--sp-ease);
}
body.vp-auth .sp-situacao-input.sp-situacao-ok{
  color:var(--green); background:var(--success-soft);
}
body.vp-auth .sp-situacao-input.sp-situacao-warn{
  color:var(--warning-strong,var(--warning)); background:var(--warning-soft);
}

/* --- Foco de input: transição suave (a base tem .15s ease genérico;
   alinhamos ao token e ao anel de foco da marca, com leve lift). --- */
body.vp-auth .r-card .v-input{
  transition:border-color var(--sp-dur-fast) var(--sp-ease),
             box-shadow var(--sp-dur-fast) var(--sp-ease),
             background var(--sp-dur-fast) var(--sp-ease);
}
body.vp-auth .r-card .v-field:focus-within .v-label{
  color:var(--green);
  transition:color var(--sp-dur-fast) var(--sp-ease);
}

/* --- Toggle "mostrar senha": ícone e alvo com transição de token --- */
body.vp-auth .vp-password-toggle{
  transition:color var(--sp-dur-quick) var(--sp-ease),
             background var(--sp-dur-quick) var(--sp-ease);
}

/* --- Medidor de força: preenchimento no token + brilho no topo ---
   O JS escreve width/background inline; aqui só refinamos a curva
   e a duração (era .2s ease). Também tornamos o texto do rótulo
   um cross-fade suave quando muda. --- */
body.vp-auth .vp-strength-fill{
  transition:width var(--sp-dur-fast) var(--sp-ease),
             background var(--sp-dur-fast) var(--sp-ease);
  position:relative;
}
body.vp-auth .vp-strength-fill::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  pointer-events:none;
}
body.vp-auth .vp-strength-label strong{
  transition:color var(--sp-dur-quick) var(--sp-ease);
}

/* --- Regras de senha: o "cumpriu" agora tem um pop no marcador ---
   O JS alterna .ok; animamos a bolinha (::before) crescer com um
   leve bounce (entrada c/ momentum) e a cor entrar suave. --- */
body.vp-auth .vp-password-rule{
  transition:color var(--sp-dur-quick) var(--sp-ease);
}
body.vp-auth .vp-password-rule::before{
  transition:background var(--sp-dur-quick) var(--sp-ease),
             box-shadow var(--sp-dur-fast) var(--sp-ease),
             transform var(--sp-dur-fast) var(--sp-ease-bounce);
}
body.vp-auth .vp-password-rule.ok::before{
  transform:scale(1.18);
}

/* --- Checkbox de consentimento: realce suave no foco/hover --- */
body.vp-auth .vp-admin-active-field{
  transition:border-color var(--sp-dur-fast) var(--sp-ease),
             background var(--sp-dur-fast) var(--sp-ease);
}
body.vp-auth .vp-admin-active-field:focus-within{
  border-color:var(--green-line);
}

/* --- Feedback (erro / obrigado): entra com graça ---
   O JS liga/desliga a classe .show. A base usa display:flex sem
   animação. Como não podemos animar display, animamos quando .show
   está presente (entrada). Erro tem um micro-"nudge" lateral. --- */
body.vp-auth .vp-feedback.show{
  animation:sp-feedback-in var(--sp-dur-fast) var(--sp-ease) both;
}
@keyframes sp-feedback-in{
  from{ opacity:0; transform:translateY(calc(var(--sp-dist-base) * -1)); }
  to{ opacity:1; transform:none; }
}
/* Erro: entrada + micro-shake curto (segmentos), não repetitivo. */
body.vp-auth .vp-feedback.show.err{
  animation:sp-feedback-in var(--sp-dur-fast) var(--sp-ease) both,
            sp-err-nudge 320ms var(--sp-ease) both;
}
@keyframes sp-err-nudge{
  0%{ transform:translateX(0); }
  22%{ transform:translateX(-6px); }
  44%{ transform:translateX(5px); }
  66%{ transform:translateX(-3px); }
  100%{ transform:translateX(0); }
}
/* "Obrigado" (lead sem CNPJ): fields somem, feedback ok assume o
   palco — entrada mais generosa (emphasis moment). */
body.vp-auth .vp-feedback.show.ok{
  animation:sp-thankyou-in var(--sp-dur-very-slow) var(--sp-ease) both;
}
@keyframes sp-thankyou-in{
  from{ opacity:0; transform:translateY(var(--sp-dist-base)) scale(.99); filter:blur(var(--sp-blur-small)); }
  to{ opacity:1; transform:none; filter:none; }
}

/* --- Botão de envio: estado de loading/craft ---
   O JS injeta .vp-loading (spinner) + label. Damos ao primário do
   auth um lift no hover mais afinado e um "pressiona" no active. --- */
body.vp-auth .vp-auth-actions .v-btn-primary{
  transition:transform var(--sp-dur-fast) var(--sp-ease),
             box-shadow var(--sp-dur-fast) var(--sp-ease),
             filter var(--sp-dur-fast) var(--sp-ease);
  box-shadow:0 10px 22px -12px rgba(22,101,52,.72);
}
body.vp-auth .vp-auth-actions .v-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 26px -12px rgba(22,101,52,.78);
}
body.vp-auth .vp-auth-actions .v-btn-primary:active{
  transform:scale(.985);
  transition:transform 100ms ease-out;
}
body.vp-auth .vp-auth-actions .v-btn-primary:disabled{
  transform:none;
}

/* ============================================================
   ACESSIBILIDADE — reduced motion / transparency / contrast
   apple-design §14: reduced-motion não é "sem feedback", é um
   equivalente mais suave. Trocamos slides/blur por cross-fade curto
   e removemos overshoot; foco permanece visível.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  /* Landing */
  .hero-copy > *,
  .hero .demo.reveal{
    animation:sp-fade var(--sp-dur-quick) ease both;
    transform:none !important;
    filter:none !important;
  }
  .hero-actions .btn-primary.btn-lg::after{ transition:opacity var(--sp-dur-quick) ease; }

  /* Cadastro */
  body.vp-auth .r-card,
  body.vp-auth #signupFields > *,
  body.vp-auth .vp-feedback.show,
  body.vp-auth .vp-feedback.show.err,
  body.vp-auth .vp-feedback.show.ok{
    animation:sp-fade var(--sp-dur-quick) ease both;
    transform:none !important;
    filter:none !important;
  }
  /* Auto-fill do CNPJ: cross-fade curto no lugar do "settle" com blur. */
  body.vp-auth .sp-settled{
    animation:sp-fade var(--sp-dur-quick) ease both;
    transform:none !important;
    filter:none !important;
  }
  /* Sem shimmer no hint de busca — só cor estática. */
  body.vp-auth .sp-cnpj-hint-busy{
    animation:none;
    -webkit-text-fill-color:currentColor;
    background:none;
    color:var(--text-soft);
  }
  body.vp-auth #empresaSection{ transition:none; }
  body.vp-auth .vp-password-rule.ok::before{ transform:none; }
  body.vp-auth .vp-strength-fill{ transition:width var(--sp-dur-quick) ease, background var(--sp-dur-quick) ease; }
  body.vp-auth .vp-auth-actions .v-btn-primary:hover,
  body.vp-auth .vp-auth-actions .v-btn-primary:active{ transform:none; }
}
@keyframes sp-fade{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-contrast: more){
  body.vp-auth .vp-password-rule::before{ outline:1px solid rgba(16,51,44,.3); }
}

/* status do lookup de CNPJ no cadastro */
.v-hint-ok{color:var(--success,#1a7f4b);font-weight:500}
.v-hint-err{color:var(--danger,#c0392b);font-weight:500}