/* A capa do post como FUNDO do topo (some ao rolar) e como arte do rodape. So nos posts. */
.post-fundo{
  --pf-a:.52;   /* velatura base (tema claro)  */
  --pf-c:.74;   /* reforco atras da coluna de texto */
  position:absolute;inset:0 0 auto 0;height:clamp(520px,100svh,1000px);z-index:-1;overflow:hidden;pointer-events:none;
  --px:0;--py:0;
}
:root:not([data-tema="claro"]) .post-fundo{--pf-a:.6;--pf-c:.8}
.pf-mov{position:absolute;inset:-4% -3%;
  transform:translate3d(calc(var(--px) * -14px),calc(var(--py) * -9px),0) scale(1.02);
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
.pf-mov img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 36%;filter:saturate(1.12);opacity:.65}   /* v2 (02/10): 1,0 -> 0,65 a pedido do Alex; o rodape nao mudou */
.pf-veu{position:absolute;inset:0;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--bg) calc(var(--pf-c) * 60%),transparent) 0,color-mix(in srgb,var(--bg) calc(var(--pf-c) * 100%),transparent) 18%,color-mix(in srgb,var(--bg) calc(var(--pf-c) * 100%),transparent) 80%,color-mix(in srgb,var(--bg) calc(var(--pf-c) * 45%),transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--bg) calc((var(--pf-a) + .22) * 100%),transparent) 0,
      color-mix(in srgb,var(--bg) calc(var(--pf-a) * 100%),transparent) 26%,
      color-mix(in srgb,var(--bg) calc(var(--pf-a) * 100%),transparent) 56%,
      color-mix(in srgb,var(--bg) calc((.45 + var(--pf-a) / 2) * 100%),transparent) 80%,
      var(--bg) 100%)}

/* texto cinza do topo sobe um degrau de tinta: sobre a obra o cinza leve de sempre nao chega a 4,5:1 */
:root:has(.post-fundo) .post-cab .voltar,:root:has(.post-fundo) .post-cab .rubrica,:root:has(.post-fundo) .post-cab .temas,
:root:has(.post-fundo) .post-cab .byline .meta,:root:has(.post-fundo) .sumario a,:root:has(.post-fundo) .sumario .rot{color:var(--fg-2)}
:root:has(.post-fundo) .post-cab .post-sub{color:var(--fg)}

/* sem scroll-driven animation (Firefox): o IntersectionObserver do post.js escreve --vis e --par */
.pf-io .post-fundo{opacity:var(--vis,1)}
.pf-io .pf-mov img{translate:0 var(--par,0%)}

@media (prefers-reduced-motion:no-preference){
  .pf-mov img{animation:pf-entra 1.5s cubic-bezier(.16,1,.3,1) both}
  @supports (animation-timeline:scroll()){
    .post-fundo{animation:pf-some linear both;animation-timeline:scroll(root);animation-range:0 80svh}
    .pf-mov img{animation:pf-entra 1.5s cubic-bezier(.16,1,.3,1) both,pf-par linear both;
      animation-timeline:auto,scroll(root);animation-range:normal,0 100svh}
  }
}
@keyframes pf-entra{from{filter:blur(18px) saturate(.7);scale:1.07}to{filter:saturate(1.12);scale:1}}
@keyframes pf-par{to{translate:0 14%}}
@keyframes pf-some{0%{opacity:1;filter:none}55%{opacity:.55}100%{opacity:0;filter:blur(12px)}}
@media (prefers-reduced-motion:reduce){
  .pf-mov{transition:none}
}

/* celular: o fundo nao vira faixa; ocupa o alto da primeira tela, com a obra recortada pelo centro */
@media (max-width:760px){
  .post-fundo{height:clamp(480px,74svh,640px);--pf-a:.66}
  :root:not([data-tema="claro"]) .post-fundo{--pf-a:.7}
  .pf-veu{background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--bg) calc((var(--pf-a) + .25) * 100%),transparent) 0,
      color-mix(in srgb,var(--bg) calc((var(--pf-a) + .12) * 100%),transparent) 30%,
      color-mix(in srgb,var(--bg) calc((var(--pf-a) + .22) * 100%),transparent) 62%,
      var(--bg) 100%)}
  .pf-mov{inset:-3% -2%}
  .pf-mov img{object-position:50% 30%}
}
@media (max-width:760px) and (orientation:landscape){.post-fundo{height:clamp(420px,100svh,640px)}}

/* rodape do post: a arte e a capa do proprio texto; o tratamento (nevoa, veu, parallax, nome) e o do rodape de sempre */
.pe.pe-capa .rod-arte img{object-position:50% 38%}