/* ═══════════════════════════════════════════════════════════════════════
   O CARROSSEL DO MENU + O MOVIMENTO LEVE (29/09/2026)
   ═══════════════════════════════════════════════════════════════════════
   Quem da vida: js/telas/carrossel.js (o banner) e js/telas/menu.js (a
   cascata e a logo da live). Tudo aqui e prefixado com `#menu`: a AREA VIP
   usa as MESMAS classes `.mn-cartao` e `.mn-selo` do menu, e nada daqui pode
   vazar pra la.

   A CAIXA DO BANNER E 4 : 1, A PROPORCAO DAS ARTES (1600 x 400), E NASCE
   RESERVADA antes de qualquer imagem chegar. Sem isso o menu pula quando a
   arte carrega. Mesma regra dos cartoes: a caixa e a proporcao da arte e
   nada muda isso.
   ═══════════════════════════════════════════════════════════════════════ */

#menu .mn-carrossel { margin-top: 14px; }
#menu .mn-carrossel[hidden] { display: none; }
/* Com o banner no meio, o respiro de cima dos cartoes encolhe: as
   bolinhas ja separam. E altura que volta pra caber numa tela so. */
#menu .mn-carrossel:not([hidden]) + .mn-cartoes { margin-top: 10px; }

#menu .mn-car-janela {
  position: relative;
  aspect-ratio: 4 / 1;
  overflow: hidden;
  border-radius: 12px;
  /* o dedo que corre na VERTICAL rola a pagina; o da horizontal e nosso */
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}

#menu .mn-car-trilho {
  display: flex; height: 100%;
  transition: transform .45s cubic-bezier(.25, .8, .3, 1);
  will-change: transform;
}

/* ── o slide ────────────────────────────────────────────────────────── */
#menu .mn-car-slide {
  position: relative; flex: 0 0 100%;
  width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0;
  cursor: pointer;
  /* O PROVISORIO: enquanto a arte nao existe, um fundo do app com o titulo
     escrito. Da pra testar tudo sem arte, e nunca fica buraco. */
  background:
    radial-gradient(120% 140% at 85% 50%, rgba(0,200,75,.22), transparent 60%),
    linear-gradient(100deg, #021a08 0%, #04260d 55%, #021a08 100%);
  box-shadow: inset 0 0 0 1px var(--borda);
  border-radius: 12px;
  overflow: hidden;
}
/* A MOLDURA E DO APP, NAO DA ARTE (29/09). As artes chegam sem moldura,
   de ponta a ponta: gerador de imagem quase nunca faz 4:1 exato, e o
   ferramentas/carrossel.py corta o centro. Moldura desenhada na arte seria
   cortada em cima e embaixo. Assim toda arte, inclusive os temporarios,
   sai com a mesma borda verde. */
#menu .mn-car-slide.com-arte {
  background: var(--arte) center / 100% 100% no-repeat;
  box-shadow: inset 0 0 0 1.5px rgba(0,200,75,.85), inset 0 0 16px rgba(0,200,75,.28);
}
#menu .mn-car-janela { box-shadow: 0 0 14px rgba(0,200,75,.22); }

#menu .mn-car-provisorio {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 10px;
  /* 8,75% = os 140 px de 1600 que ficam livres pras setas na ARTE; o
     provisorio usa um pouco mais, porque o icone dele e desenhado aqui e
     encostava na seta */
  padding: 0 12%;
  pointer-events: none;
}
#menu .mn-car-slide.com-arte .mn-car-provisorio { display: none; }
#menu .mn-car-icone { width: 26px; height: 26px; flex: 0 0 auto; color: var(--boss-ouro); }
#menu .mn-car-provisorio b {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: clamp(1rem, 5.2vw, 1.6rem); line-height: 1;
  color: var(--boss-ouro); text-align: left; letter-spacing: .01em;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

/* O ULTIMO VIDEO: a thumbnail entra INTEIRA, em 16:9, na metade direita.
   Conta feita na arte de 1600 x 400: altura de 80% (320 px) da 569 px de
   largura, e ela termina a 140 px da borda (o lugar da seta). Em
   porcentagem da LARGURA do banner: 569/1600 = 35,6%; 140/1600 = 8,75%. */
#menu .mn-car-thumb {
  position: absolute; top: 10%; right: 8.75%;
  height: 80%; aspect-ratio: 16 / 9;
  border-radius: 7px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(232,183,58,.7), 0 4px 14px rgba(0,0,0,.55);
  pointer-events: none;
  background: #000;
}
#menu .mn-car-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#menu .mn-car-thumb svg {
  position: absolute; left: 50%; top: 50%;
  width: 34%; height: auto; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  padding: 6%; box-sizing: border-box;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff; fill: #fff;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.85);
}

/* ── as setas ───────────────────────────────────────────────────────── */
#menu .mn-car-seta {
  position: absolute; top: 50%; z-index: 2;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  padding: 0; margin: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  transform: translateY(-50%);
  cursor: pointer;
}
#menu .mn-car-seta svg { width: 15px; height: 15px; }
#menu .mn-car-seta.esq { left: 2.2%; }
#menu .mn-car-seta.esq svg { transform: rotate(180deg); }
#menu .mn-car-seta.dir { right: 2.2%; }
#menu .mn-car-seta:active { background: rgba(0,200,75,.45); }

/* ── as bolinhas ────────────────────────────────────────────────────── */
#menu .mn-car-pontos {
  display: flex; justify-content: center; align-items: center; gap: 9px;
  height: 9px; margin-top: 8px;
}
#menu .mn-car-pontos i {
  width: 7px; height: 7px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
  cursor: pointer;
  transition: background-color .25s, box-shadow .25s, transform .25s;
}
#menu .mn-car-pontos i.on {
  background: var(--boss-verde);
  box-shadow: 0 0 6px rgba(0,200,75,.8);
  transform: scale(1.25);
}

/* ═══ O MOVIMENTO LEVE ══════════════════════════════════════════════════
   1. A CASCATA: na PRIMEIRA abertura do dia, os atalhos, o banner e os
      cartoes entram um atras do outro (30 ms de diferenca, ~0,8 s no
      total). Quem abre 10 vezes por dia nao espera animacao 10 vezes.
      `backwards`, e NUNCA `forwards`: depois de entrar, o elemento fica
      sem `transform` nenhum. Transform que sobra e o que fez o filtro do
      MERCADO FRAG abrir 10.735 px fora da tela (22/09) e o que tira o
      `:active` dos botoes.
      Nasce PAUSADA (`mn-entrada`) e so corre quando a tela de carregar
      sai (`vai`): senao a cascata acontece escondida atras dela.
   2. O SELO NOVO pulsa devagar, a cada 3 s. So existe quando tem novidade,
      entao o pulso e raro e por isso chama atencao.
   3. A LOGO respira so no horario da live (classe `ao-vivo` no #menu).
   Nada gira o tempo todo, e `reduzir movimento` desliga os tres. */

@keyframes mnEntra {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
#menu.mn-entrada :is(.mn-atalho, .mn-carrossel, .mn-cartao) {
  animation: mnEntra .42s cubic-bezier(.2, .7, .3, 1) backwards;
  animation-delay: calc(var(--ordem, 0) * 30ms);
  animation-play-state: paused;
}
#menu.mn-entrada.vai :is(.mn-atalho, .mn-carrossel, .mn-cartao) { animation-play-state: running; }

@keyframes mnSeloPulsa {
  0%, 100% { box-shadow: 0 0 0 0 transparent; filter: none; }
  50%      { box-shadow: 0 0 10px 2px var(--selo-brilho); filter: brightness(1.18); }
}
#menu .mn-selo { --selo-brilho: rgba(255,71,87,.65); }
#menu .mn-cartao.vip .mn-selo { --selo-brilho: rgba(232,183,58,.65); }
#menu .mn-selo:not([hidden]) { animation: mnSeloPulsa 3s ease-in-out infinite; }

@keyframes mnRespira {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  50%      { transform: scale(1.035); filter: drop-shadow(0 0 10px rgba(0,200,75,.45)); }
}
#menu.ao-vivo .mn-logo { animation: mnRespira 3.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  #menu .mn-car-trilho { transition: none; }
  #menu.mn-entrada :is(.mn-atalho, .mn-carrossel, .mn-cartao),
  #menu .mn-selo:not([hidden]),
  #menu.ao-vivo .mn-logo { animation: none; }
}

/* No FIM do arquivo de proposito: mesma forca das regras de cima, entao
   quem vem depois vence. */
/* TELA MAIS BAIXA (o Android comum, 360 x 780): o banner custa ~100 px e
   passava 8 px da tela. Os respiros em volta dele encolhem 10 px e o menu
   volta a caber (medido com o ferramentas/conferir-menu.js, 29/09). A
   caixa do banner NAO encolhe: ela e 4:1, a proporcao da arte. */
@media (max-height: 800px) {
  #menu .mn-carrossel { margin-top: 9px; }
  #menu .mn-carrossel:not([hidden]) + .mn-cartoes { margin-top: 8px; }
  #menu .mn-car-pontos { margin-top: 5px; }
}