/* ==========================================================================
   DC Perícias — camada de movimento das páginas completas
   --------------------------------------------------------------------------
   Regra de ouro: nada aqui age sozinho. Todo estado inicial está preso a
   `html.dcp-pronto`, classe que só o dcp-motion.js coloca — e ele só coloca
   quando o usuário NÃO pediu menos movimento. Sem JS, com JS quebrado ou com
   prefers-reduced-motion, a página aparece completa, parada e legível.

   Vocabulário: o site é um documento técnico sobre a mesa. O movimento imita
   papel — a folha assenta, a luz passa rasante, o quadro respira. Nada salta.
   ========================================================================== */

/* --- 1. Revelação genérica de blocos ------------------------------------ */

html.dcp-pronto .dcp-rv{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .78s ease, transform .78s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--dcp-d, 0ms);
  will-change:opacity, transform;
}
html.dcp-pronto .dcp-rv.dcp-on{opacity:1; transform:none; will-change:auto;}

/* O herói entra um pouco mais alto e mais devagar: é a primeira leitura. */
html.dcp-pronto .hero .dcp-rv{
  transform:translateY(26px);
  transition-duration:.92s;
}

/* --- 2. Título-gancho: as palavras entram em foco ----------------------- */
/* Cada palavra chega desfocada e se resolve, uma logo atrás da outra. É a
   leitura ganhando nitidez — não a máquina de escrever, que já envelheceu.
   As palavras nunca quebram no meio e a caixa do título não muda de tamanho,
   então não há deslocamento de layout enquanto o efeito roda. */

.dcp-w{display:inline-block; white-space:nowrap;}
html.dcp-pronto .dcp-titulo .dcp-w{
  opacity:0;
  filter:blur(9px);
  transform:translateY(7px);
  transition:opacity .64s ease,
             filter .64s cubic-bezier(.16,1,.3,1),
             transform .64s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--dcp-d, 0ms);
}
html.dcp-pronto .dcp-titulo.dcp-nitido .dcp-w{
  opacity:1; filter:none; transform:none;
}

/* Fio dourado que corre sob o título depois que ele se resolve.
   Só no herói — em artigo o h1 já tem a linha de meta logo abaixo. */
html.dcp-pronto .hero h1.dcp-titulo{position:relative;}
html.dcp-pronto .hero h1.dcp-titulo::after{
  content:''; position:absolute; left:0; bottom:-.30em;
  height:2px; width:min(140px, 40%);
  background:linear-gradient(90deg, var(--gold,#d9b878), rgba(217,184,120,0));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1);
}
html.dcp-pronto .hero h1.dcp-titulo.dcp-riscou::after{transform:scaleX(1);}

/* --- 3. O quadro: a folha assenta, respira e recebe luz ----------------- */
/* O repouso do .doc-mock é uma rotação. Ela vive na variável para que a
   animação nunca zere a inclinação de origem em nenhum breakpoint. */

html.dcp-pronto .doc-mock{--dcp-rot:1.2deg;}
@media(max-width:860px){ html.dcp-pronto .doc-mock{--dcp-rot:0.6deg;} }

html.dcp-pronto .doc-mock{
  opacity:0;
  transform:rotate(calc(var(--dcp-rot) - 2.6deg)) translateY(34px) scale(.982);
  filter:blur(4px);
  transition:opacity 1s ease .15s,
             transform 1.2s cubic-bezier(.16,1,.3,1) .15s,
             filter .9s ease .15s;
}
html.dcp-pronto .doc-mock.dcp-on{
  opacity:1;
  transform:rotate(var(--dcp-rot));
  filter:none;
}

/* Chamada periódica: um balanço curto de lado a lado, depois repouso longo.
   Ciclo de 16s — a oscilação ocupa ~2,7s dele. Pausa fora da tela. */
html.dcp-pronto .doc-mock.dcp-respira{
  animation:dcp-quadro-chama 16s cubic-bezier(.36,.07,.19,.97) infinite;
}
@keyframes dcp-quadro-chama{
  0%   {transform:rotate(var(--dcp-rot)) translateX(0);}
  3%   {transform:rotate(calc(var(--dcp-rot) + .46deg)) translateX(4px);}
  6.5% {transform:rotate(calc(var(--dcp-rot) - .42deg)) translateX(-4px);}
  10%  {transform:rotate(calc(var(--dcp-rot) + .24deg)) translateX(2px);}
  13.5%{transform:rotate(calc(var(--dcp-rot) - .12deg)) translateX(-1px);}
  17%,100%{transform:rotate(var(--dcp-rot)) translateX(0);}
}

/* Luz rasante sobre o papel. Vive num invólucro que recorta sozinho, para
   não precisar de overflow:hidden no cartão — o carimbo e a etiqueta
   "PARECER TÉCNICO" ficam fora da caixa e seriam cortados. */
.dcp-luz{
  position:absolute; inset:0; overflow:hidden; border-radius:3px;
  pointer-events:none; z-index:3;
}
.dcp-luz i{
  position:absolute; top:-30%; left:-140%; width:52%; height:160%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.75), transparent);
  transform:skewX(-18deg); opacity:0;
}
html.dcp-pronto .doc-mock.dcp-respira .dcp-luz i{
  animation:dcp-luz 16s ease-out infinite;
}
@keyframes dcp-luz{
  0%  {left:-140%; opacity:0;}
  1.5%{opacity:.95;}
  10% {left:150%; opacity:.95;}
  11% {left:150%; opacity:0;}
  100%{left:150%; opacity:0;}
}


/* O carimbo desce sobre o papel. Duas coisas ao mesmo tempo: encolhe no eixo
   de profundidade (nasce grande e desfocado, perto do olho, e diminui até
   encaixar) e deriva 34px de cima para baixo. A profundidade sozinha lia como
   aproximação; a deriva dá a direção que quem lê a página espera de um
   carimbo. O achatamento em .94 é o que produz a batida — não o eixo.
   A ordem importa: o número termina de correr, ENTÃO o carimbo desce, e só
   depois o quadro começa a balançar. A inclinação de descanso varia por página
   (-14deg no parecer, -6deg no quadro de estatística), então o JS mede a de
   cada uma e guarda aqui — assim a animação nunca endireita um carimbo que
   nasceu torto. */

html.dcp-pronto .doc-mock.dcp-com-selo .stamp{opacity:0;}
html.dcp-pronto .doc-mock.dcp-carimba .stamp{
  animation:dcp-carimba .78s both;
}
@keyframes dcp-carimba{
  0%{
    opacity:0; filter:blur(4px);
    transform:translateY(-34px) rotate(var(--dcp-selo-rot, -14deg)) scale(2.2);
    animation-timing-function:cubic-bezier(.5,.02,.72,.24);
  }
  38%{opacity:.85;}
  64%{
    opacity:1; filter:blur(0);
    transform:translateY(0) rotate(var(--dcp-selo-rot, -14deg)) scale(.94);
    animation-timing-function:cubic-bezier(.22,.9,.36,1);
  }
  100%{
    opacity:1; filter:blur(0);
    transform:translateY(0) rotate(var(--dcp-selo-rot, -14deg)) scale(1);
  }
}

/* --- 4. Números que contam ---------------------------------------------- */

.sh-num, .stat-big, .dcp-conta{font-variant-numeric:tabular-nums;}
.stat-donut svg text{font-variant-numeric:tabular-nums;}
html.dcp-pronto .stat-donut svg circle[stroke-dasharray]{
  transition:stroke-dashoffset 1.9s cubic-bezier(.16,1,.3,1);
}

/* --- 5. WhatsApp flutuante: sobe, quica, brilha uma vez, e fica parado --- */

html.dcp-pronto .wa-float{opacity:0; transform:translateY(46px) scale(.7);}
html.dcp-pronto .wa-float.dcp-entrou{
  opacity:1; transform:none;
  animation:dcp-wa-sobe .95s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes dcp-wa-sobe{
  0%  {opacity:0; transform:translateY(46px) scale(.7);}
  55% {opacity:1; transform:translateY(-11px) scale(1.1);}
  72% {transform:translateY(4px) scale(.97);}
  86% {transform:translateY(-3px) scale(1.02);}
  100%{opacity:1; transform:none;}
}

/* O anel infinito é aposentado: um único anel na entrada, e silêncio. */
html.dcp-pronto .wa-float::after{animation:none; opacity:0; border-color:transparent;}
html.dcp-pronto .wa-float.dcp-entrou::after{
  opacity:1; border-color:rgba(37,211,102,.75);
  animation:dcp-wa-anel 1.4s ease-out .55s 1 both;
}
@keyframes dcp-wa-anel{
  from{transform:scale(1); opacity:.9;}
  to  {transform:scale(1.55); opacity:0;}
}

.dcp-wa-luz{
  position:absolute; inset:0; overflow:hidden; border-radius:50%;
  pointer-events:none; z-index:2;
}
.dcp-wa-luz i{
  position:absolute; top:-30%; left:-130%; width:58%; height:160%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.95), transparent);
  transform:skewX(-20deg); opacity:0;
}
html.dcp-pronto .wa-float.dcp-brilhou .dcp-wa-luz i{
  animation:dcp-wa-brilho 1.15s ease-out .12s 1 both;
}
@keyframes dcp-wa-brilho{
  0%  {left:-130%; opacity:0;}
  12% {opacity:1;}
  88% {opacity:1;}
  100%{left:150%; opacity:0;}
}

/* --- 6. Brilho dos CTA, em frequência baixa ----------------------------- */
/* Nas LP o ciclo é de 7s. Aqui é 18s: a pessoa navega entre várias páginas
   e o mesmo efeito, na mesma cadência, cansaria. Só roda o que está à vista. */

html.dcp-pronto .cta-btn{position:relative; overflow:hidden;}
html.dcp-pronto .cta-btn::after{
  content:''; position:absolute; top:0; left:-70%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:skewX(-18deg); pointer-events:none;
}
html.dcp-pronto .cta-btn.dcp-brilha::after{animation:dcp-brilho 18s ease-out infinite;}
@keyframes dcp-brilho{
  0%{left:-70%;} 6%{left:130%;} 100%{left:130%;}
}

/* --- 7. Botão flutuante de agenda: entra junto, sem estardalhaço -------- */

html.dcp-pronto .agenda-float{opacity:0; transform:translateY(22px);}
html.dcp-pronto .agenda-float.dcp-entrou{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}

/* --- 8. Marcação de campo opcional -------------------------------------- */

.opc{text-transform:none; letter-spacing:0; font-weight:400; opacity:.72;}

/* --- 9. Menos movimento: desliga tudo ----------------------------------- */
/* Cinto e suspensório. O JS já não coloca .dcp-anima nesse caso; se algo
   colocar assim mesmo, aqui nada se move e nada fica invisível. */

@media(prefers-reduced-motion: reduce){
  html.dcp-pronto .dcp-rv,
  html.dcp-pronto .doc-mock,
  html.dcp-pronto .wa-float,
  html.dcp-pronto .agenda-float,
  html.dcp-pronto .dcp-titulo .dcp-w,
  html.dcp-pronto .doc-mock.dcp-com-selo .stamp{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
    animation:none !important;
  }
  html.dcp-pronto .doc-mock{transform:rotate(var(--dcp-rot)) !important;}
  html.dcp-pronto .hero h1.dcp-titulo::after{transform:scaleX(1) !important; transition:none !important;}
  html.dcp-pronto .dcp-luz, html.dcp-pronto .dcp-wa-luz{display:none !important;}
  html.dcp-pronto .cta-btn::after{display:none !important;}
  html.dcp-pronto .stat-donut svg circle[stroke-dasharray]{
    stroke-dashoffset:0 !important; transition:none !important;
  }
}