/* =========================================================
   HERO "SEJA LIVRE | SEJA VOCÊ"
   A arte (tipografia, retrato, painel) é uma imagem única já composta,
   agora servida por <picture> (e não mais background-image) para:
     - o navegador achar e priorizar a imagem cedo (LCP, fetchpriority=high);
     - cada tela baixar só a sua versão/largura (srcset + media);
     - ter texto alternativo e aparecer no Google Imagens.
   O texto da arte é espelhado num <h1> para leitores de tela e buscadores.
   ========================================================= */
@layer sections {
  .hero {
    position: relative;
    min-height: 100vh; min-height: 100svh;
    overflow: hidden;
    background: var(--bg);
    transform-origin: 50% 45%;      /* o portão aproxima/afasta o hero a partir deste ponto */
  }

  .hero__media, .hero__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
  }
  .hero__media img { object-fit: cover; object-position: center center; }

  /* véu escuro que clareia enquanto o portão abre (controlado pelo gate.js) */
  .hero__veil {
    position: absolute; inset: 0; z-index: var(--z-veil);
    background: #0d1a14; opacity: 0; pointer-events: none;
  }

  /* Gancho para animações de entrada do hero depois que o portão abre:
     html[data-gate="open"] .hero .alguma-coisa { … }                    */
}