/* A faixa de banners do Copy trading.
 *
 * O miolo da origem é jogado fora pelo `banner.js`; aqui fica só o desenho da
 * faixa nova. A moldura (`.banner-container`) continua sendo a da captura —
 * é ela que dá a posição e o tamanho no meio da página.
 */

[data-oc-banner].oc-faixa {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  /* A proporção é a do slot medido ao vivo, 792×277. Fixá-la aqui é o que
     impede a página de saltar quando a imagem chega — e o que garante que
     todos os banners ocupem exatamente o mesmo retângulo. */
  aspect-ratio: 792 / 277;
}

/* 🔴 A moldura da origem tem uma TEXTURA listrada de fundo — o marcador de
   "imagem a caminho" dela. É o chiado que estava na tela antes, e ele
   continuava aparecendo pelos cantos e pelas margens transparentes da arte.
   Quem assume a moldura assume o fundo dela.
 *
 * 🔑 A regra de lá é `html[dir][theme=dark] .banner-container[data-v-28f36cb4]`
 * — (0,4,1). Uma classe nua não encosta nisso; `[data-oc-banner].oc-faixa` é
 * (0,2,0) e some sem erro nenhum. O `[dir]` repetido leva esta a (0,5,1), que
 * ganha por peso e não por ordem de arquivo: empate decidido pela ordem dos
 * `<link>` quebra no dia em que o passe mudar onde injeta. */
html[dir][theme] [dir][data-oc-banner].oc-faixa { background: #0b0b0b; }
[dir] [data-oc-banner].oc-faixa { padding: 0; border: 0; }

.oc-faixa-trilho {
  display: flex;
  height: 100%;
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
}

.oc-faixa-slide {
  flex: 0 0 100%;
  display: block;
  height: 100%;
  min-width: 0;
}

/* 🔑 O invólucro tem a proporção da ARTE, largura cheia, centrado na vertical.
   O slide (2,86:1) é mais largo que as artes (2,35:1 e 2,77:1) e corta em cima
   e embaixo — que é onde estas peças têm margem.

   Fazer o corte assim, e não com `object-fit: cover` no `<img>`, é o que
   permite pôr texto POR CIMA em porcentagem: aqui dentro 1% é 1% da arte,
   sempre. Com `cover` a mesma porcentagem escorregaria junto com o recorte a
   cada largura de tela. */
.oc-faixa-arte {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 100%;
  container-type: inline-size;
}

.oc-faixa-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* ── os números ao vivo do banner do BTC ────────────────────────────────
 *
 * As posições saem da arte original, 1923×818, medidas na caixa de tinta de
 * cada número que foi removido. `cqw` é 1% da largura da ARTE — o texto
 * acompanha a peça em qualquer tela sem uma linha de JS.
 *
 * A família é a do site (`OFFCODE Sans`, Inter variável 100–900). Não é a
 * fonte da arte, mas está ao lado de "BTC BREAKS", que é pixel: o que a vista
 * compara é peso e altura, e esses batem. */
.oc-btc {
  position: absolute;
  inset: 0;
  font-family: 'OFFCODE Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* 🔴 Onde havia `BTC BREAKS`, assado no pixel. O verbo prometia um
   rompimento; com o preço ao vivo ele passaria a prometer um por dia,
   inclusive nos de queda. O nome do ativo não promete nada. */
.oc-btc-tit {
  position: absolute;
  left: 6.7%;
  top: 21.6%;
  font-size: 7cqw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  color: #fff;
  white-space: nowrap;
}

/* As duas linhas de apoio, no lugar de `NEW MILESTONE. / BIGGER
   OPPORTUNITIES.` — que era uma promessa sem número por trás. */
.oc-btc-apoio {
  position: absolute;
  left: 6.9%;
  top: 56.9%;
  display: flex;
  flex-direction: column;
  gap: .82cqw;
}

.oc-btc-apoio-linha {
  font-size: 1.42cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .34em;
  color: #d8d8d8;
  white-space: nowrap;
}

.oc-btc-grande {
  position: absolute;
  left: 6.7%;
  top: 34.0%;
  font-size: 8.8cqw;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  /* O gradiente é o da arte, amostrado no traço do "7": #FFB40A no alto,
     #F76505 embaixo. */
  background: linear-gradient(180deg, #ffb40a 0%, #fd8701 52%, #f76505 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.oc-btc-cartao {
  position: absolute;
  left: 82.7%;
  top: 50.4%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.08;
  white-space: nowrap;
}

.oc-btc-rot {
  font-size: 1.15cqw;
  font-weight: 600;
  letter-spacing: .12em;
  color: #b9b9b9;
}

/* As três linhas do cartão são uma coluna, mas o espaço entre elas na arte
   não é o que `line-height` daria. As margens abaixo são a diferença, medida
   contra o gabarito — e vão em `cqw` para acompanhar a peça. Sob `[dir]`
   porque o reset da origem zera margem de `span`. */
.oc-btc-preco {
  font-size: 2.7cqw;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}

[dir] .oc-btc-preco { margin-top: -.44cqw; }
[dir] .oc-btc-var { margin-top: 1.31cqw; }

.oc-btc-var {
  font-size: 1.35cqw;
  font-weight: 700;
  letter-spacing: .01em;
}

.oc-btc-var.oc-sobe { color: #01e785; }
.oc-btc-var.oc-cai { color: #ff5b67; }

/* ── os pontos ─────────────────────────────────────────────────────────── */

.oc-faixa-pontos {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 2;
}

/* 🔑 O ponto ativo cresce por `transform`, não por `width`. Animar largura
   refaz o layout da linha a cada quadro e empurra os vizinhos; `scaleX` roda
   no compositor e deixa os outros pontos parados, que é o que se quer de um
   marcador de posição. A 3px de altura, o esticão das pontas arredondadas não
   se vê. */
.oc-faixa-ponto {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transform-origin: center;
  transition: background 180ms ease, transform 180ms ease;
}

[dir] .oc-faixa-ponto { border: 0; padding: 0; }
.oc-faixa-ponto:hover { background: rgba(255, 255, 255, .55); }
.oc-faixa-ponto[aria-selected="true"] { background: #f7931a; transform: scaleX(1.36); }
.oc-faixa-ponto:focus-visible { outline: 2px solid #f7931a; outline-offset: 3px; }

/* ── as setas ──────────────────────────────────────────────────────────── */

.oc-faixa-seta {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease, background 180ms ease;
  z-index: 2;
}

[dir] .oc-faixa-seta {
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(2, 2, 2, .55);
}

[dir] .oc-faixa-seta:hover { background: rgba(2, 2, 2, .8); border-color: rgba(255, 255, 255, .34); }
.oc-faixa-antes { left: 14px; transform: scaleX(-1); }
.oc-faixa-depois { right: 14px; }

/* As setas só aparecem sob o ponteiro — em cima da arte, permanentes, elas
   competem com o próprio banner. Os pontos ficam sempre, porque são eles que
   dizem QUANTOS banners existem. */
.oc-faixa:hover .oc-faixa-seta { opacity: 1; }
.oc-faixa-seta:focus-visible { opacity: 1; outline: 2px solid #f7931a; outline-offset: 2px; }

/* No toque não há ponteiro: sem isto as setas nunca apareceriam, e arrastar
   ainda não é possível. */
@media (hover: none) {
  .oc-faixa-seta { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-faixa-trilho { transition: none; }
  .oc-faixa-ponto { transition: background 180ms ease; }
}