/* Transições do site (21/10/2026) — movimento entre páginas e chegada a âncoras.
   Carregado por último no <head> de cada página; par de js/transicoes.js.

   Defeito corrigido: as páginas tinham html{scroll-behavior:smooth}. Esse valor vale também para a rolagem
   que o navegador faz ao ABRIR um endereço com âncora (ex.: curso-avaliacao-de-imoveis#curso-incorporacao):
   a página nova aparecia no topo e descia ~4.500 px em animação até o destino, que parava colado no topo,
   sem o título da seção. Aqui:
     1. a rolagem padrão volta a ser instantânea (a página nova já nasce no destino);
     2. a rolagem suave fica só para âncoras da MESMA página (classe tr-suave, posta pelo JS no clique);
     3. o destino para com folga e é destacado por um instante;
     4. a troca de página ganha View Transition (sem suporte: navegação normal, nada quebra);
     5. foto ainda não carregada mostra um fundo neutro e entra com esmaecimento, sem "pipocar".
   Tudo respeita prefers-reduced-motion: com movimento reduzido não há animação de troca nem rolagem suave. */

/* 1 · rolagem padrão instantânea (:root vence o html{} das páginas pela especificidade, sem !important) */
:root{scroll-behavior:auto}
@media (prefers-reduced-motion:no-preference){
  :root.tr-suave{scroll-behavior:smooth}
}

/* 3 · folga do destino. Cartões "Próximos cursos": a folga mostra também o título da seção acima deles */
:where(article,details,aside)[id]{scroll-margin-top:24px}
.cz-breve-grade>article{scroll-margin-top:96px}
@media (max-width:900px){
  .cz-breve-grade>article:first-child{scroll-margin-top:128px}
  .cz-breve-grade>article+article{scroll-margin-top:24px}
}

/* destaque do destino: contorno laranja que acende e apaga (não mexe no layout) */
.cz-breve-grade>article:target,
:where(main) :is(article,aside,details)[id]:target{
  outline:2px solid rgba(204,74,20,0);outline-offset:12px;border-radius:14px;
  animation:tr-alvo 2.6s cubic-bezier(.2,.7,.2,1) .38s both
}
.cz-breve-grade>article.tr-de-novo:target,
:where(main) :is(article,aside,details)[id].tr-de-novo:target{animation-name:tr-alvo-2;animation-delay:.1s}
.cz-breve-grade>article:target .cz-breve-foto figcaption{animation:tr-selo 2.6s cubic-bezier(.2,.7,.2,1) .38s both}
.cz-breve-grade>article.tr-de-novo:target .cz-breve-foto figcaption{animation-name:tr-selo-2;animation-delay:.1s}
@media (max-width:600px){
  .cz-breve-grade>article:target,
  :where(main) :is(article,aside,details)[id]:target{outline-offset:8px}
}
@keyframes tr-alvo{
  0%{outline-color:rgba(204,74,20,0);outline-offset:24px}
  20%,68%{outline-color:rgba(204,74,20,.85)}
  100%{outline-color:rgba(204,74,20,0)}
}
@keyframes tr-alvo-2{
  0%{outline-color:rgba(204,74,20,0);outline-offset:24px}
  20%,68%{outline-color:rgba(204,74,20,.85)}
  100%{outline-color:rgba(204,74,20,0)}
}
@keyframes tr-selo{20%,68%{background:#CC4A14;color:#FFFFFF}}
@keyframes tr-selo-2{20%,68%{background:#CC4A14;color:#FFFFFF}}
@media (prefers-reduced-motion:reduce){
  /* sem movimento: o contorno aparece e some de uma vez, sem deslizar */
  .cz-breve-grade>article:target,
  :where(main) :is(article,aside,details)[id]:target{animation:tr-alvo-calmo 2.4s steps(1,end) both}
  .cz-breve-grade>article:target .cz-breve-foto figcaption{animation:none}
  @keyframes tr-alvo-calmo{0%{outline-color:rgba(204,74,20,.85)}100%{outline-color:rgba(204,74,20,0)}}
}

/* 4 · troca de página (View Transitions entre documentos; navegador sem suporte ignora o bloco) */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  /* a marca só "viaja" quando está à vista nas duas pontas (o JS põe tr-marca) */
  html.tr-marca .topo .assin{view-transition-name:marca}
  ::view-transition-old(root){animation:tr-sai .18s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:tr-entra .32s cubic-bezier(.2,.7,.2,1) .04s both}
  ::view-transition-group(marca){animation-duration:.36s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  ::view-transition-old(marca),::view-transition-new(marca){animation-duration:.36s;height:100%;object-fit:contain}
}
@media (prefers-reduced-motion:no-preference){
  /* voltar (histórico): o conteúdo entra no sentido contrário */
  html:active-view-transition-type(volta)::view-transition-new(root){animation-name:tr-entra-volta}
}
@keyframes tr-sai{to{opacity:0}}
@keyframes tr-entra{from{opacity:0;transform:translateY(14px)}}
@keyframes tr-entra-volta{from{opacity:0;transform:translateY(-14px)}}

/* 5 · foto: fundo neutro enquanto carrega (só JPEG, que nunca é transparente) e entrada esmaecida */
img[src$=".jpg"]{background-color:#EEF2F6}
@media (prefers-reduced-motion:no-preference){
  img.tr-img{animation:tr-img .45s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes tr-img{from{opacity:0}}