/* ================================================================
   CAMADA DE DINAMISMO — site raiz joaopaulopereira.com.br
   Portada da página Operação IA (go-hub/operacao-ia.html).
   Tudo aditivo: nada aqui reescreve home.css nem cases.css.
   O site alterna superfícies por seção (.sec--dark / .sec--deep /
   .sec--light), então cada efeito tem versão escura e clara —
   sombra preta sobre papel vira mancha, halo dourado sobre papel
   vira borrão.
   ================================================================ */

/* 1. PROFUNDIDADE EM DUAS CAMADAS --------------------------------
   sombra com spread negativo (peso) + halo da cor da marca
   (destaque) + fio de luz interno no topo (relevo).             */
.sec--dark .card--dark, .sec--deep .card--dark,
.sec--dark .case-card, .sec--deep .case-card,
.sec--dark .stats, .sec--deep .stats,
.sec--dark .compare-row, .sec--deep .compare-row,
.sec--dark .stance-col.con, .sec--deep .stance-col.con,
.sec--dark .note, .sec--deep .note,
.cta {
  box-shadow:
    0 26px 54px -26px rgba(0,0,0,.85),
    0 0 46px rgba(200,142,88,.08),
    inset 0 1px 0 rgba(253,187,125,.08);
}
.sec--light .card, .sec--light .stance-col.pro, .sec--light .note {
  box-shadow:
    0 20px 44px -26px rgba(36,24,12,.30),
    0 0 40px rgba(169,108,44,.06);
}
/* card escuro dentro de seção clara: peso maior, sem fio de luz claro */
.sec--light .card--dark {
  box-shadow:
    0 24px 48px -24px rgba(20,14,8,.45),
    inset 0 1px 0 rgba(253,187,125,.10);
}

/* contraste: separar a superfície papel da seção escura de cima */
.sec--light { box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }

/* 2. HOVER QUE ACENDE --------------------------------------------
   borda na cor da marca + sobe 2px + halo mais forte.            */
.card, .case-card, .compare-row, .stance-col, .cta, .stat,
.crit li, .alt, .step, .exec li, .faq details, .proof div {
  transition: box-shadow .18s ease, border-color .18s ease,
              transform .18s ease, background .18s ease;
}
.sec--dark .card--dark:hover, .sec--deep .card--dark:hover,
.sec--dark .case-card:hover, .sec--deep .case-card:hover,
.sec--dark .compare-row:hover, .sec--deep .compare-row:hover {
  border-color: rgba(200,142,88,.55);
  transform: translateY(-2px);
  box-shadow:
    0 30px 60px -24px rgba(0,0,0,.95),
    0 0 56px rgba(200,142,88,.22),
    inset 0 1px 0 rgba(253,187,125,.20);
}
.sec--light .card:hover {
  border-color: rgba(169,108,44,.45);
  transform: translateY(-2px);
  box-shadow: 0 26px 52px -24px rgba(36,24,12,.36), 0 0 46px rgba(169,108,44,.14);
}
.sec--light .card--dark:hover {
  border-color: rgba(200,142,88,.55);
  transform: translateY(-2px);
  box-shadow: 0 28px 56px -22px rgba(20,14,8,.5), 0 0 46px rgba(200,142,88,.18);
}

/* 3. LINHAS DE LISTA COM FILETE QUE SOBE --------------------------
   passos, critérios, alternativas e execução ganham um fio
   dourado à esquerda e um leve realce de fundo no hover.        */
.crit li, .alt, .step, .exec li { position: relative; }
.crit li::after, .alt::after, .step::after, .exec li::after {
  content: "";
  position: absolute; left: -14px; top: 0; bottom: 0; width: 2px;
  background: var(--gold);
  transform: scaleY(0); transform-origin: top;
  transition: transform .22s ease;
}
.step::after { left: 0; top: -1px; }
.crit li:hover::after, .alt:hover::after, .step:hover::after, .exec li:hover::after {
  transform: scaleY(1);
}
.sec--dark .crit li:hover, .sec--deep .crit li:hover,
.sec--dark .alt:hover, .sec--deep .alt:hover,
.sec--dark .step:hover, .sec--deep .step:hover { background: rgba(255,255,255,.02); }
.sec--light .crit li:hover, .sec--light .alt:hover,
.sec--light .step:hover, .sec--light .exec li:hover { background: rgba(200,142,88,.05); }

/* 4. HERO COM TEXTURA E LUZ --------------------------------------
   grade de 48px quase invisível + orbe dourado borrado no canto.
   Profundidade sem colocar mais nada na tela.                    */
.hero { position: relative; overflow: hidden; }
.hero > * { position: relative; z-index: 2; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 72%);
}
.hero::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  width: 520px; height: 520px; left: -160px; top: -200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,142,88,.18), transparent 68%);
  filter: blur(26px);
}

/* 5. CTA QUE RESPIRA ---------------------------------------------
   flutuação de 4.6s com micro-rotação + halo cobre + varredura de
   brilho a cada 5s. Chama o olho sem piscar nem pular.           */
@keyframes fx-respira {
  0%   { transform: translateY(0) rotate(0deg) }
  25%  { transform: translateY(-5px) rotate(-.5deg) }
  50%  { transform: translateY(-2px) rotate(0deg) }
  75%  { transform: translateY(-6px) rotate(.5deg) }
  100% { transform: translateY(0) rotate(0deg) }
}
.hero .btn--primary, .cta .btn--primary { animation: fx-respira 4.6s ease-in-out infinite }

.btn--primary { position: relative; overflow: hidden; }
.sec--dark .btn--primary, .sec--deep .btn--primary {
  box-shadow: 0 24px 42px -22px rgba(0,0,0,.85), 0 0 40px rgba(200,142,88,.28);
}
.sec--dark .btn--primary:hover, .sec--deep .btn--primary:hover {
  box-shadow: 0 26px 46px -20px rgba(0,0,0,.9), 0 0 58px rgba(253,187,125,.45);
}
/* no claro a sombra preta vira mancha: peso menor, halo na cor da marca */
.sec--light .btn--primary { box-shadow: 0 14px 26px -18px rgba(60,40,20,.5), 0 0 30px rgba(169,108,44,.18) }
.sec--light .btn--primary:hover { box-shadow: 0 16px 30px -16px rgba(60,40,20,.55), 0 0 42px rgba(169,108,44,.32) }
.hero .btn--primary:hover, .cta .btn--primary:hover { animation-play-state: paused }

.hero .btn--primary::after, .cta .btn--primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg); animation: fx-shine 5s ease-in-out infinite;
}
@keyframes fx-shine { 0%,68% { left:-60% } 88%,100% { left:130% } }

/* botão do menu: só acende no hover, sem respiração (fica no campo de
   visão o tempo todo e piscaria junto com o scroll) */
.nav .btn--primary { box-shadow: 0 10px 20px -14px rgba(0,0,0,.8), 0 0 22px rgba(200,142,88,.18) }
.nav .btn--primary:hover { box-shadow: 0 12px 24px -12px rgba(0,0,0,.85), 0 0 34px rgba(253,187,125,.36) }

/* 6. MENU QUE GANHA PESO AO DESCER ------------------------------- */
.nav { transition: box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.nav.fx-scrolled {
  background: rgba(15,16,18,.94);
  border-bottom-color: rgba(200,142,88,.22);
  box-shadow: 0 18px 36px -26px rgba(0,0,0,.9);
}

/* 7. DESTAQUE NO TÍTULO ------------------------------------------
   marca-texto que se preenche da esquerda no carregamento.       */
.hero h1 em, .case-head h1 em {
  position: relative; font-style: normal;
}
.hero h1 em::after, .case-head h1 em::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: .06em; height: .10em;
  background: linear-gradient(90deg, var(--gold), rgba(253,187,125,.35));
  transform: scaleX(0); transform-origin: left;
  animation: fx-marca .9s cubic-bezier(.2,.7,.2,1) .5s forwards;
}
@keyframes fx-marca { to { transform: scaleX(1) } }

/* filete da citação cresce quando o bloco entra na tela */
.pull { position: relative; }
.pull.fx-in { animation: fx-filete .7s cubic-bezier(.2,.7,.2,1) both }
@keyframes fx-filete { from { border-left-color: transparent } to { border-left-color: var(--gold) } }

/* 8. ENTRADA POR SCROLL ------------------------------------------
   sobe 12px e aparece, com atraso em cascata nos itens irmãos.
   A classe é posta pelo JS: sem JS, nada some.                   */
.fx-up { opacity: 0; transform: translateY(12px);
  transition: opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1) }
.fx-up.fx-in { opacity: 1; transform: none }

/* 9. NÚMEROS QUE CONTAM ------------------------------------------
   Dois problemas resolvidos aqui, os dois de tremor, não de
   desempenho: os algarismos da Sora têm larguras diferentes (o 1 é
   quase metade do 8), então contar de 0 até o valor fazia o número
   chacoalhar a cada quadro; e a troca de 1 para 2 algarismos mudava
   a largura da caixa, empurrando o que estava do lado.
   Algarismo tabular resolve o primeiro. O segundo é resolvido pelo
   JS, que trava a largura final na caixa enquanto a contagem roda. */
.stat b, .case-card .kpi b, .compare-row .para, .compare-row .de, .curva-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.fx-contando { display: inline-block; }
.curva-val.fx-contando { text-align: center; }
.compare-row .para.fx-contando, .case-card .kpi b.fx-contando { text-align: left; }

/* brilho: só no escuro — glow em número escuro sobre papel vira borrão. */
.sec--dark .stat b, .sec--deep .stat b,
.sec--dark .case-card .kpi b, .sec--deep .case-card .kpi b,
.sec--dark .compare-row .para, .sec--deep .compare-row .para {
  text-shadow: 0 0 34px rgba(200,142,88,.32);
}

/* 10. ÍCONES, SELOS E NÚMEROS DE PASSO COM HALO ------------------- */
.exec li::before, .crit li::before, .step .num {
  transition: box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.exec li::before { box-shadow: 0 0 18px rgba(200,142,88,.16) }
.exec li:hover::before { transform: translateY(-1px); box-shadow: 0 0 28px rgba(200,142,88,.4) }
.crit li:hover::before, .step:hover .num { color: var(--gold-bright) }
.sec--light .exec li::before { box-shadow: 0 0 18px rgba(169,108,44,.14) }

/* logos: sobem um pouco junto com o ganho de opacidade */
.logo-strip img { transition: opacity .2s ease, transform .2s ease; }
.logo-strip img:hover { transform: translateY(-2px); }
.logo-strip img.logo--panelao:hover { transform: scale(1.2) translateY(-2px); }

/* barras do gráfico de curva crescem quando entram na tela */
.curva-bar { transition: height 1s cubic-bezier(.3,.8,.3,1); }
.curva-col.pico .curva-bar { box-shadow: 0 0 24px rgba(200,142,88,.35); }

/* 11. ACESSIBILIDADE --------------------------------------------
   quem pediu menos movimento não recebe nenhum.                  */
@media (prefers-reduced-motion: reduce) {
  .hero .btn--primary, .cta .btn--primary { animation: none }
  .hero .btn--primary::after, .cta .btn--primary::after { animation: none; display: none }
  .hero h1 em::after, .case-head h1 em::after { animation: none; transform: scaleX(1) }
  .fx-up { opacity: 1; transform: none; transition: none }
  .pull.fx-in { animation: none }
  .curva-bar { transition: none }
}