/* ==========================================================================
   Enquadramento da capa do perfil — card #82
   ==========================================================================

   A capa é guardada no tamanho original e recortada pelo browser. A criadora escolhe
   COMO recortar: um ponto focal (X%, Y%) e um zoom. Este arquivo é a única definição
   desse recorte — perfil, perfil público, card de "Seguindo" e o editor usam a mesma
   regra, para o que ela ajusta ser o que ela vê em qualquer tela.

   Por que ponto focal e não um retângulo de corte: a faixa da capa é alta no desktop
   (28.09% da largura) e baixa no celular (168px). Um retângulo fixo só caberia numa das
   duas. O ponto focal sobrevive à mudança de proporção — o rosto escolhido continua
   visível nas duas larguras.

   Seletor com `img` na frente de propósito: o `.css-1oubjks` (profile.css) e o
   `.banner-image` (edit-profile.css) trazem um `object-position: center top` fixo e são
   carregados DEPOIS deste arquivo nas páginas que têm CSS próprio. A especificidade
   extra garante que o enquadramento vença sem depender da ordem dos <link>.

   Defaults (50% 0% / escala 1) = exatamente o `center top` que era fixo, então capa
   enviada antes deste recurso existir continua aparecendo como sempre apareceu. */

img.banner-framed {
    object-fit: cover;
    object-position: var(--banner-x, 50%) var(--banner-y, 0%);
    /* O zoom escala a partir do próprio ponto focal: ampliar não "foge" com a imagem,
       o ponto escolhido fica parado e aparece mais detalhe em volta. */
    transform: scale(var(--banner-zoom, 1));
    transform-origin: var(--banner-x, 50%) var(--banner-y, 0%);
}