/* =========================================================
   Páginas internas · camada de movimento (calculadora, formulário,
   termos, privacidade e blog). Mesma linguagem da home e das LPs de IA.
   Só acrescenta: tudo aqui usa o prefixo sm- ou complementa uma classe que a
   página já tem, e nenhuma regra muda layout. Carregado depois do <style>
   inline de cada página. Com prefers-reduced-motion nada se move.
   ========================================================= */
:root {
  --sm-ease: cubic-bezier(.23, 1, .32, 1);
  --sm-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1, 1.083 30.2%, 1.018 36.4%, .996 39.7%, .985 43.3%, .986 49.8%, 1.001 63.7%, 1);
}

/* ---------- Progresso de leitura (só onde a página não tem o seu) ---------- */
.sm-progress { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 90; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #4E26DE, #8009AF 60%, #F13615); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .sm-progress { animation: sm-grow linear both; animation-timeline: scroll(root); }
  }
}
@keyframes sm-grow { to { transform: scaleX(1); } }

/* ---------- Botão principal: reflexo que atravessa ---------- */
.btn-primary { position: relative; isolation: isolate; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 66%); transform: translateX(-120%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover::after { transform: translateX(120%); transition: transform 700ms var(--sm-ease); }
}

/* ---------- Título: palavra por palavra, destaque sublinhado ---------- */
.sm-title .sm-ul { position: relative; }
.sm-title .sm-ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .09em; border-radius: 1em; background: linear-gradient(90deg, #4E26DE, #8009AF 60%, #F13615); transform-origin: 0 50%; opacity: .9; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  /* a entrada própria do título (quando a página tem) continua: as palavras animam por dentro dela */
  .sm-title .sm-w { display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(6px); animation: sm-word 700ms var(--sm-ease) forwards; animation-delay: calc(var(--i) * 45ms + 100ms); }
  .sm-title .sm-ul::after { transform: scaleX(0); animation: sm-underline 800ms var(--sm-ease) forwards; animation-delay: var(--ul, 700ms); }
}
@keyframes sm-word { to { opacity: 1; transform: none; filter: none; } }
@keyframes sm-underline { to { transform: scaleX(1); } }

/* ---------- Revelação ao rolar ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-sm .sm-rv { opacity: 0; transform: translateY(16px); filter: blur(3px); transition: opacity 800ms var(--sm-ease), transform 800ms var(--sm-ease), filter 800ms var(--sm-ease); transition-delay: calc(var(--sm-d, 0) * 80ms); }
  .js-sm .sm-rv.sm-in { opacity: 1; transform: none; filter: none; }
}

/* ---------- Documentos (termos, privacidade) ---------- */
/* o item ativo do índice ganha um traço que cresce com mola */
.toc a { position: relative; }
.toc a::after { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; border-radius: 2px; background: var(--accent); transform: scaleY(0); transition: transform 450ms var(--sm-spring); }
.toc a.on::after { transform: scaleY(1); }
/* o número da seção salta quando ela chega na leitura */
.doc-card h2.sec .num { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js-sm .doc-card h2.sec .num { transform: scale(.6); opacity: .3; transition: transform 600ms var(--sm-spring), opacity 300ms ease; }
  .js-sm .doc-card h2.sec.sm-in .num { transform: none; opacity: 1; }
}

/* ---------- Formulário de contato ---------- */
/* o filete do topo do cartão vira a barra de progresso do preenchimento */
.form-card::before { transform-origin: 0 50%; transform: scaleX(var(--sm-p, 1)); transition: transform 500ms var(--sm-ease); }
/* opção marcada assenta com mola */
@media (prefers-reduced-motion: no-preference) {
  .choice input:checked + span { animation: sm-pick 420ms var(--sm-spring); }
  .choice input:checked + span::before { animation: sm-pick 420ms var(--sm-spring); }
}
@keyframes sm-pick { 0% { transform: scale(.92); } 100% { transform: none; } }
.modstrip-row .chip { transition: transform 450ms var(--sm-spring), border-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .modstrip-row .chip:hover { transform: translateY(-2px); } }

/* ---------- Blog ---------- */
.blog-card { position: relative; isolation: isolate; }
.blog-card::before { content: ""; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -40%), rgba(78,38,222,.08), transparent 45%); opacity: 0; transition: opacity 300ms ease; pointer-events: none; }
.blog-card .thumb img { transition: transform 700ms var(--sm-ease); }
@media (hover: hover) and (pointer: fine) {
  .blog-card:hover::before { opacity: 1; }
  .blog-card:hover .thumb img { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .sm-title .sm-ul::after { transform: none; }
}