/* O capítulo GRID BOT AI da home: desde 05/09/2026, UMA ARTE com link.
 *
 * A moldura do capítulo (respiro, largura de 1180px, entrada em vista) mora
 * em `_local/home-secoes.css`, no molde `.oc-cap`, o mesmo de REDE,
 * POPULARES, MERCADOS e PRIVACIDADE. Aqui fica só o que é DESTA arte. O que
 * havia antes (o card com o esquema de grade, 25/08) está no git.
 *
 * ## Por que a arte é `<img>` e não `background-image`
 *
 * `<img>` com `width`/`height` reserva a caixa antes do download (a página
 * não salta), tem `alt` que o i18n traduz, e entra no artefato porque o
 * `build_deploy.py` lê `src=`. Um `url()` no CSS também entraria — mas sem
 * `alt`, e a caixa precisaria de `aspect-ratio` escrito à mão.
 *
 * ## Sem `rem`
 *
 * A raiz deste site é `13.33vw` (~240px numa janela de 1800): `rem` escrito à
 * mão explode o layout sem erro nenhum — `_tools/checa_css.py` reprova o
 * build por isso. Tudo aqui é px.
 *
 * ## Metade das regras mora em `[dir]`
 *
 * A origem reseta margin/padding/border num bloco `[dir] a…` de
 * especificidade (0,1,1), que vence classe sozinha (0,1,0). Regra de espaço
 * escrita só na classe é aplicada pela METADE, sem erro em lugar nenhum — foi
 * assim que o `.oc-como-link` ficou sem fundo por dias.
 */

/* ── a moldura ───────────────────────────────────────────────────────────
 *
 * A mesma do card que a arte substituiu: contorno laranja fraco (o desenho
 * inteiro da borda) e um halo difuso no preto do fundo. Sem ela a arte — que
 * também é preta — se dissolveria na página e o brilho do logo ficaria solto
 * no meio do nada. `overflow: hidden` é o que arredonda o JPG.
 */
.oc-gb-banner {
  position: relative;
  display: block;
  max-width: 1180px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

[dir] .oc-gb-banner {
  margin: 0 auto;
  border: 1px solid rgba(247, 147, 26, .38);
  background: #0a0708;
  box-shadow: 0 0 60px -12px rgba(247, 147, 26, .30);
}

[dir] .oc-gb-banner:hover {
  border-color: rgba(247, 147, 26, .70);
  box-shadow: 0 0 70px -10px rgba(247, 147, 26, .45);
}

.oc-gb-banner:focus-visible {
  outline: 2px solid var(--offcode-brand, #f7931a);
  outline-offset: 3px;
}

/* ── a arte ──────────────────────────────────────────────────────────────
 *
 * 16:9 do arquivo (1536×864), a largura toda da moldura, altura pela
 * proporção. `display: block` tira a linha de base do <img> inline — os ~4px
 * de vão que apareceriam embaixo, DENTRO da borda. Inteira, sem corte, em
 * qualquer largura: o texto está no pixel, e cortar a arte para caber num
 * celular cortaria ou o logo ou a frase.
 */
.oc-gb-banner-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

[dir] .oc-gb-banner-img { margin: 0; padding: 0; border: 0; }

/* ── entrada em vista ────────────────────────────────────────────────────
 *
 * O `home-secoes.js` põe `.oc-cap-anima` e depois `.oc-cap-visivel` na seção
 * quando ela entra na tela: a arte sobe 8px e aparece, o mesmo passo das
 * linhas dos outros capítulos.
 *
 * 🔑 O estado escondido depende de `.oc-cap-anima`, que é o PRÓPRIO JS quem
 * põe. Escrito direto na folha, a seção sumiria para quem bloqueia script — e
 * seção invisível não avisa ninguém, nem no console.
 */
.oc-cap-anima .oc-gb-banner {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s cubic-bezier(.16, 1, .3, 1),
              transform .55s cubic-bezier(.16, 1, .3, 1),
              box-shadow .3s ease,
              border-color .3s ease;
}

.oc-cap-anima.oc-cap-visivel .oc-gb-banner {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .oc-cap-anima .oc-gb-banner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── no /m/: corte à esquerda ────────────────────────────────────────────
 *
 * Dono, 05/09/2026: "corta à esquerda no /m/". Num celular a arte inteira em
 * 16:9 tem 344px de largura e o `BUILT FOR VOLATILITY.` vira 5px de altura.
 * Aqui a caixa é 1:1 e a arte, em `cover` ancorada à esquerda, mostra 56% da
 * largura original: o texto fica ~1,8× maior e o anel laranja do logo sangra
 * pela direita. A classe vem do passe, só na árvore `/m/` — o desktop segue
 * com a arte inteira.
 *
 * 🔑 `aspect-ratio` do autor vence a proporção que o `width`/`height` do
 * `<img>` declara; `height: auto` continua sendo o que faz a altura seguir a
 * largura. Só para caber num tablet a caixa volta a 16:9 acima de 640px.
 */
@media (max-width: 640px) {
  .oc-gb-banner--corte .oc-gb-banner-img {
    aspect-ratio: 1 / 1;
    object-position: left center;
  }
}