/* 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}
}