/* ==========================================================
   Movimento
   Header reativo e microinterações de mouse. Só isso.
   Tudo desliga sozinho se a pessoa pediu menos movimento.

   NÃO EXISTE MAIS REVELAÇÃO POR ROLAGEM, e a remoção foi decisão de
   produto, tomada em 30/07/2026 depois de a Wanessa relatar que a página
   engasgava ao rolar. Medido antes de tirar: desligar a revelação reduzia
   entre 45% e 92% o trabalho do navegador durante a rolagem, nas três
   páginas do projeto.

   Consequência boa, que não pode ser desfeita por engano: nenhum bloco
   fica escondido esperando JavaScript. A página não tem mais como abrir
   em branco, nem com bloqueador, nem em aba de segundo plano, nem com
   erro de rede. Se alguém for repor efeito de entrada algum dia, repor
   com o conteúdo já visível por padrão, nunca com opacity:0 no CSS.
   ========================================================== */

/* ---- header que reage ao rolar ----
   contain:layout style prende o recálculo dentro da barra. Sem isso, animar a
   altura de .wrap e o corpo de .brand obriga o navegador a recalcular o layout
   do documento inteiro a cada quadro dos 300ms da transição, e isso acontece
   justamente enquanto a pessoa está rolando. */
.topbar{contain:layout style;transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease}
.topbar .wrap{transition:height .3s ease}
.topbar .brand{transition:font-size .3s ease}
.topbar.scrolled{
  background:rgba(12,12,14,.82);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.75);
}
.topbar.scrolled .wrap{height:58px}
.topbar.scrolled .brand{font-size:22px}

/* ---- sublinhado que cresce no menu ----
   Cresce com scaleX, não com width. Mesmo desenho na tela, mas scaleX é feito
   na placa de vídeo e não obriga o navegador a refazer conta de layout. */
.nav a{position:relative;padding-bottom:4px}
.nav a::after{
  content:'';position:absolute;left:0;bottom:-2px;
  width:100%;height:2px;background:var(--yellow);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .3s ease;
}
.nav a:hover::after{transform:scaleX(1)}

/* ---- varredura de brilho nos botões ----
   Anda com translateX, não com left, pelo mesmo motivo do sublinhado. */
.btn{position:relative;overflow:hidden}
.btn::before{
  content:'';position:absolute;top:0;left:0;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transform:translateX(-167%);
  transition:transform .55s ease;pointer-events:none;
}
.btn:hover::before{transform:translateX(217%)}
.btn--gold::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}

/* ---- cartões de compromisso ---- */
.pilar{transition:transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease, border-color .35s ease}
.pilar:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 44px -20px rgba(0,0,0,.7), 0 0 34px rgba(255,206,0,.1);
}

/* ---- cartões de material ---- */
.kitcard{transition:transform .35s cubic-bezier(.16,.84,.44,1), border-color .3s ease, box-shadow .35s ease}
.kitcard--on:hover{
  transform:translateY(-6px);
  border-color:var(--yellow);
  box-shadow:0 20px 40px -22px rgba(0,0,0,.35);
}
.kitcard .ic{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.kitcard:hover .ic{transform:scale(1.1) rotate(-4deg)}

/* ---- linhas de proposta ---- */
.pl{transition:background .3s ease}
.pl:hover{background:rgba(255,206,0,.05)}
.pl .n{transition:transform .3s cubic-bezier(.34,1.56,.64,1), color .3s ease}
.pl:hover .n{transform:scale(1.14);color:var(--yellow-deep)}

/* ---- itens da trajetória ---- */
/* desloca com translateX, não com padding-left: padding força layout */
.tr-item{transition:transform .3s ease}
.tr-item:hover{transform:translateX(8px)}
.tr-item .veic{transition:color .3s ease}
.tr-item:hover .veic{color:var(--yellow)}

/* ---- link de documento ---- */
.doclink{transition:transform .25s ease, background .25s ease, border-color .25s ease}
.doclink:hover{transform:translateY(-2px)}

/* ---- retrato do hero ---- */
.portrait{overflow:hidden}
.portrait img{transition:transform 1.2s cubic-bezier(.16,.84,.44,1)}
.portrait:hover img{transform:scale(1.04)}

/* ---- voltar ao topo ---- */
.go-top{
  position:fixed;right:24px;bottom:24px;z-index:60;
  width:50px;height:50px;border-radius:100px;border:0;cursor:pointer;
  background:var(--yellow);color:var(--black);
  font-size:19px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), visibility .3s;
}
.go-top.active{opacity:1;visibility:visible;transform:none}
.go-top:hover{transform:translateY(-3px)}

/* ---- faixa amarela com movimento contínuo ---- */
.faixa{overflow:hidden}
.faixa .faixa-in{display:inline-block;white-space:nowrap}

@media (max-width:900px){
  .go-top{right:16px;bottom:16px;width:46px;height:46px}
}

/* ---- respeito a quem pediu menos movimento ----
   A página aparece inteira, de uma vez, sem nada escondido. */
@media (prefers-reduced-motion: reduce){
  .topbar,.topbar .wrap,.topbar .brand,.pilar,.kitcard,.kitcard .ic,
  .pl,.pl .n,.tr-item,.doclink,.portrait img,.go-top,.btn::before,.nav a::after{
    transition:none !important;
  }
  html{scroll-behavior:auto !important}
}