/* Transicao entre paginas (View Transitions), peso variavel da fonte (wght) e o link Acervo no cabecalho. Carregado por todas as paginas. */
:root{--vt-ease:cubic-bezier(.16,1,.3,1)}

/* ---- Proposta 3: "entrar na sala" (View Transitions entre documentos) ---- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}

  /* o resto da pagina: saida curta, entrada longa, na curva do site */
  ::view-transition-old(root){animation:vt-sai .38s cubic-bezier(.4,0,.2,1) both}
  ::view-transition-new(root){animation:vt-entra .72s var(--vt-ease) both}
  :root:active-view-transition-type(avanca)::view-transition-new(root){animation-name:vt-entra-sobe}
  :root:active-view-transition-type(volta)::view-transition-new(root){animation-name:vt-entra-desce}

  /* a obra: o elemento compartilhado (cartao <-> cabecalho do texto) */
  ::view-transition-group(vt-capa){animation-duration:.85s;animation-timing-function:var(--vt-ease)}
  ::view-transition-old(vt-capa),::view-transition-new(vt-capa){width:100%;height:100%;object-fit:cover}
  /* a barra do topo fica no lugar (nao faz crossfade com a da outra pagina) */
  .nav{view-transition-name:vt-nav}
  ::view-transition-group(vt-nav){animation-duration:0s}
  ::view-transition-old(vt-nav){display:none}
  ::view-transition-new(vt-nav){animation:none}
}
@keyframes vt-sai{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-entra{from{opacity:0}to{opacity:1}}
@keyframes vt-entra-sobe{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes vt-entra-desce{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:none}}

/* cabecalho do texto: a capa e o fundo do topo (ver post.css) */

/* ---- Proposta 1: peso variavel (eixo wght de Antonio) acompanhando a rolagem ---- */
/* Fora do @supports (Firefox) ou com movimento reduzido, nada disto vale: peso fixo de hoje. */
@keyframes peso-foco{0%,100%{font-weight:200}50%{font-weight:520}}      /* numeros: pesam no centro da tela */
@keyframes peso-evapora{from{font-weight:300}to{font-weight:100}}       /* some afinando */
@keyframes peso-chega{from{font-weight:100}to{font-weight:300}}         /* o nome engrossa ate o peso de hoje */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* hero: "Product Owner." afina enquanto evapora (mesma timeline nomeada --heroi) */
    .titulo{animation:evapora linear both,peso-evapora linear both;
      animation-timeline:--heroi,--heroi;animation-range:exit 8% exit 75%,exit 0% exit 75%}
    /* nome gigante do rodape */
    .nome{animation:peso-chega linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    /* numeros da Atuacao, da virada, dos cases */
    .v.num b,.fase > .num,.kpi > .v,.cpl-m b,.case .escopo .v.num{
      animation:peso-foco linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .explosao .n{animation:n-entra linear both,peso-foco linear both;
      animation-timeline:view(),view();animation-range:entry 10% cover 45%,cover 0% cover 100%}
    /* mastheads "BLOG" e "CASES": afinam ao sair */
    .mast-t,.cab-c-t{animation:peso-evapora linear both;animation-timeline:view();animation-range:exit 0% exit 80%}
  }
}

/* ---- Menu: "Acervo" no cabecalho (todas as paginas) ---- */
.nav-acervo{white-space:nowrap}
.nav .btn .btn-c{display:none}
@media (max-width:760px){
  .nav .links.mob-ac a:not(.nav-acervo){display:none}   /* home no celular: a barra mostra so o Acervo; os demais links ficam no painel do menu */
  .nav .links.mob-ok{display:flex}            /* sobre e cases escondiam o menu no celular; so o Acervo (e o que couber) fica */
  .nav .links.mob-ok .so-largo{display:none}
}
@media (max-width:560px){
  .nav .btn .btn-l{display:none}
  .nav .btn .btn-c{display:inline}
}
@media (min-width:901px) and (max-width:1080px){
  :root:has(#hero) .nav .marca span{display:none}   /* home: " · Product Owner" sai um pouco mais cedo para o Acervo caber */
}
html{overflow-x:clip}                                /* rede de seguranca contra scroll horizontal (home +6 px e blog +2 px a 320 vazavam antes) */
@media (max-width:430px){
  .nav .voltar-site{display:none}              /* o "Site" cede lugar ao Acervo; o rodape flutuante e a sala tem outro caminho para o site */
  .nav .links.mob-ok{margin-left:6px}
}
@media (max-width:370px){
  .nav-in{padding-left:12px;padding-right:12px;gap:3px}
  .nav .ico{width:34px;height:34px}
  .nav .pilula,.nav .btn{padding:0 9px}
  .nav .links{gap:10px}
  .nav .links a[href^="mailto"]{display:none}
}
@media (max-width:340px){
  .nav .marca{font-size:13.5px}
  .nav .ico{width:32px;height:32px}
}

/* ---- Cabecalho comprimido: Blog e Contato visiveis, o resto no menu suspenso "Mais" (08/10/2026) ---- */
.nav-in{position:relative}
.nav .links.nav-c{gap:22px}
.nav .links .nav-mais-l a{opacity:1}
.nav-mais{position:relative;display:flex;align-items:center}
.nav-mais-b{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0;border:0;background:transparent;color:var(--fg);
  font:inherit;font-size:13px;letter-spacing:.005em;white-space:nowrap;cursor:pointer;opacity:.78;transition:opacity .3s var(--vt-ease)}
.nav-mais-b:hover,.nav-mais-b[aria-expanded="true"]{opacity:1}
.nav-mais-b svg{width:12px;height:12px;transition:transform .5s var(--vt-ease)}
.nav-mais-b[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-mais-b:focus-visible,.nav-mais-l a:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.nav-mais-l{position:absolute;top:calc(100% + 12px);right:-14px;z-index:5;min-width:208px;margin:0;padding:8px;list-style:none;border-radius:18px;
  background:color-mix(in srgb,var(--bg) 96%,transparent);border:1px solid color-mix(in srgb,var(--fg) 16%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:100% 0;
  transition:opacity .3s var(--vt-ease),transform .5s var(--vt-ease),visibility 0s linear .5s}
.nav-mais.aberto .nav-mais-l{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--vt-ease),transform .55s var(--vt-ease),visibility 0s}
.nav .nav-mais-l a{display:block;padding:10px 14px;border-radius:11px;font-size:14px;letter-spacing:0;white-space:nowrap;color:var(--fg);
  transition:background-color .3s var(--vt-ease)}
.nav .nav-mais-l a:hover,.nav .nav-mais-l a[aria-current="page"]{background:color-mix(in srgb,var(--fg) 10%,transparent)}
.nav-mais-l .nm-fio{height:1px;margin:6px 10px;background:color-mix(in srgb,var(--fg) 16%,transparent)}
.nav-mais-l .nm-cel{display:none}
.nav-mais-l{max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain}
@media (max-width:1040px){                          /* barra estreita: so o "Mais" fica, com os links da barra repetidos dentro dele */
  .nav .links.nav-c{gap:14px}
  .nav .links.nav-c .nl-v{display:none}
  .nav-mais-l .nm-cel{display:block}
  .nav-mais-l .nm-fio.nm-cel{display:block}
  .nav-mais{position:static}                        /* a lista ancora na barra inteira, nao no botao */
  .nav-mais-l{top:calc(100% + 4px);right:var(--gut);left:auto;min-width:0;width:min(264px,calc(100vw - 2 * var(--gut)))}
}
@media (max-width:760px){.nav .links.mob-ac{display:none}}   /* home no celular: o painel do hamburguer ja traz tudo */
@media (prefers-reduced-motion:reduce){.nav-mais-l,.nav-mais-b svg{transition:none}}
@media (max-width:370px){.nav .links .nav-mais-l a[href^="mailto"]{display:block}}   /* a regra de 370 px acima esconde mailto da barra, nao da lista */