/* ============================================================
   Bioside — banner fotográfico da abertura (rodada 2, 14/09/2026;
   composição revisada na rodada 9 com a paleta confirmada do manual;
   controles anterior/próxima/pausar removidos na rodada 11).
   Todos os seletores prefixados .home-banner. Não depende de
   editorial.css além das classes que o figure já carrega
   (.editorial-hero__image, figcaption): a proporção, a altura por
   breakpoint e o degradê da legenda continuam vindo de lá, sem
   alteração. Desde a rodada 9 este arquivo não usa mais
   .editorial-hero__corner (moldura própria abaixo, .home-banner__moldura).
   ============================================================ */

.home-banner__viewport{position:absolute;inset:0;z-index:0}
.home-banner__slide{position:absolute;inset:0;opacity:0}
.home-banner__slide.is-ativo{opacity:1;z-index:1}
.home-banner__slide picture{position:absolute;inset:0;display:block}
.home-banner__slide img{height:100%;width:100%;position:absolute;inset:0;object-fit:cover;object-position:53% 48%;transform:scale(1.045)}
.home-banner__slide.is-ativo img{transform:scale(1)}

/* editorial.css anima toda imagem dentro de .editorial-hero__image com
   um fade-in único de 1000ms (regra global, fora deste arquivo). Sem
   travar essa animação nas cenas paradas, as três ficariam opacas ao
   final do carregamento e o crossfade perderia o efeito. As três
   classes elevam a especificidade acima da regra original sem !important. */
.editorial-hero__image.home-banner .home-banner__slide img{animation:none}

@media(max-width:700px){
  .home-banner__slide img{object-position:50% 62%}
}

@media(prefers-reduced-motion:no-preference){
  /* Opacidade e escala andam juntas: a cena entra em foco (1.045→1) ao
     mesmo tempo em que aparece, um assentamento sutil só na cena que
     está trocando — não é zoom contínuo nem parallax, roda uma vez por
     troca e para. Sem preferência de movimento reduzido, os dois viram
     troca instantânea (ver .home-banner__slide.is-ativo acima), porque
     nenhuma das duas propriedades tem transition fora deste bloco. */
  .home-banner--pronto .home-banner__slide{transition:opacity 800ms var(--editorial-revela)}
  .home-banner--pronto .home-banner__slide img{transition:transform 900ms var(--editorial-revela)}
}

/* Moldura própria do banner (rodada 9): no lugar do canto compartilhado
   de editorial.css (.editorial-hero__corner, que eu não edito — ainda
   usado pelas páginas internas via comuns.mjs). Um filete fino em verde
   emoldura a foto inteira; um gradiente radial em carvão (#0F161C,
   confirmado na página 14 do manual) escurece só a borda, nunca o
   centro — a foto continua sendo o elemento principal, só passa a se
   integrar ao petróleo/carvão ao redor em vez de terminar numa borda
   seca. Elemento decorativo (aria-hidden), sem interceptar clique/toque. */
.home-banner__moldura{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 0 1px rgba(134,199,167,.38);
  background:radial-gradient(120% 120% at 50% 46%,transparent 60%,rgba(15,22,28,.24) 100%);
}

/* .home-banner__viewport ganhou z-index:0 acima (contém o z-index:1 do
   slide ativo dentro de si mesmo). Sem isso, o slide ativo escapava
   para o contexto de empilhamento do <figure> e cobria moldura e
   legenda, que herdam position:absolute de editorial.css sem z-index
   próprio. Aqui só fixamos a ordem acima do viewport. */
.home-banner figcaption{z-index:2}

@media(prefers-reduced-motion:reduce){
  /* Redundante com a regra global de editorial.css (transition:none!important
     em tudo sob .home-editorial); mantido aqui para o arquivo continuar
     correto mesmo se um dia for usado fora dessa árvore. */
  .home-banner__slide{transition:none}
}