/* ENTRADA DOS CHEFÕES (15/11/2026, pedido do dono: "entrar, chegou, falou na frente").
   Só a tela da entrada; a parte 3D e os tempos ficam em conteudo/entradas-dos-chefoes.js. Mesma letra e cores da apresentação (nucleo/apresentacao.js). */
#entradaChefao { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: 0; transition: opacity .18s; font-family: 'Anton', Impact, sans-serif; overflow: hidden; }
#entradaChefao.mostra { opacity: 1; pointer-events: auto; cursor: pointer; }

/* breu (Guardião): a tela apaga; só os olhos e as janelas das ombreiras ficam acesos */
#entradaChefao .breu { position: absolute; inset: 0; background: #020104; opacity: 0; transition: opacity .12s linear; }
#entradaChefao .olho { position: absolute; width: 16px; height: 9px; margin: -4px 0 0 -8px; border-radius: 50%; background: #ffe6d0; opacity: 0;
  box-shadow: 0 0 6px 3px #ff3a1a, 0 0 22px 10px #ff1a0acc, 0 0 60px 24px #ff1a0a55; transition: opacity .15s; }
#entradaChefao .olho.janela { width: 20px; height: 12px; margin: -6px 0 0 -10px; border-radius: 3px; background: #ffd890; box-shadow: 0 0 8px 3px #ffb040, 0 0 28px 10px #ff8a2088; }
#entradaChefao.olhos .olho { opacity: 1; }

/* faixas de cinema e sombra nas bordas */
#entradaChefao .sombra { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, #05020c00 0, #05020c00 30%, #05020cb0 88%); opacity: 0; transition: opacity .4s; }
#entradaChefao.mostra .sombra { opacity: 1; }
#entradaChefao .cine { position: absolute; left: 0; right: 0; height: max(9vh, 40px); background: #05020c; transition: transform .3s ease-out; }
#entradaChefao .cine.cima { top: 0; transform: translateY(-101%); }
#entradaChefao .cine.baixo { bottom: 0; transform: translateY(101%); }
#entradaChefao.mostra .cine { transform: none; }

/* placa com o nome e o apelido (o mesmo jeito da apresentação) */
#entradaChefao .placa { position: absolute; left: 0; right: 0; top: max(10vh, 44px); text-align: center; opacity: 0; transform: translateY(-16px) skewX(-8deg) scale(1.25);
  transition: transform .22s cubic-bezier(.2, 1.6, .4, 1), opacity .12s; }
#entradaChefao.placaVai .placa { opacity: 1; transform: skewX(-8deg); }
#entradaChefao .placa::before { content: ''; position: absolute; left: 10%; right: 10%; top: -.6em; bottom: -.4em; z-index: -1; background: radial-gradient(ellipse at 50% 55%, #05020cd0 0, #05020c90 45%, #05020c00 72%); }
#entradaChefao .apelido { display: block; font-size: clamp(12px, 2.1vw, 24px); letter-spacing: .32em; color: #ffe08a; text-shadow: 0 2px 0 #3a0010, 0 0 10px #000; }
#entradaChefao .nome { display: inline-block; padding: 0 .55em; line-height: 1.05; font-weight: 400; font-size: clamp(30px, 6.8vw, 86px); letter-spacing: .04em; color: #fff;
  text-shadow: 0 5px 0 #3a0010, 0 0 44px #ff2a2a; background: linear-gradient(90deg, #4a000a00, #4a000ae6 14%, #4a000ae6 86%, #4a000a00);
  border-top: 3px solid #f2b233; border-bottom: 3px solid #f2b233; }
#entradaChefao .tag { display: inline-block; margin-bottom: .25em; padding: .1em .7em; font-size: clamp(11px, 1.6vw, 18px); letter-spacing: .35em; color: #ffd0c0; background: #8a0a14; border-radius: 6px; }

/* balão da fala: escuro, grande, apontando para a boca dele */
#entradaChefao .balao { position: absolute; left: 0; top: 0; max-width: min(42vw, 380px); padding: .45em .9em .5em; border-radius: 16px; background: #1a0710f2; color: #fff1d6;
  border: 3px solid #ffd060; font-size: clamp(17px, 2.5vw, 30px); line-height: 1.12; letter-spacing: .02em; text-shadow: 0 2px 0 #000;
  box-shadow: 0 6px 0 #000a, 0 0 26px #ff3a1a66; opacity: 0; transform: translate(-100%, -50%) scale(.6); transform-origin: right center;
  transition: transform .2s cubic-bezier(.2, 1.7, .4, 1), opacity .12s; }
#entradaChefao .balao.vai { opacity: 1; transform: translate(-100%, -50%) scale(1); }
#entradaChefao .balao::after { content: ''; position: absolute; right: -13px; top: calc(50% - 9px); width: 16px; height: 16px; background: #1a0710; border-right: 3px solid #ffd060; border-top: 3px solid #ffd060; transform: rotate(45deg); }
#entradaChefao .balao.treme { animation: ec-treme .09s linear 4; }
@keyframes ec-treme { 0% { margin-left: 0; } 25% { margin-left: -3px; } 75% { margin-left: 3px; } 100% { margin-left: 0; } }

/* o que ele faz (as 2 ou 3 linhas da apresentação, com o número de hoje) */
#entradaChefao .lista { position: absolute; left: 3vw; right: 3vw; bottom: calc(max(9vh, 40px) + 1.4vh); display: flex; gap: 1.2vw; justify-content: center; align-items: stretch; flex-wrap: wrap; }
#entradaChefao .linha { flex: 1 1 0; max-width: 30vw; min-width: 26vw; display: flex; align-items: center; gap: .55em; padding: .4em .75em; border-radius: 12px; background: #120a1ae8; border: 2px solid #ffd06088;
  color: #fff; font-size: clamp(13px, 1.9vw, 22px); line-height: 1.1; opacity: 0; transform: translateY(14px) scale(.94); transition: transform .2s cubic-bezier(.2, 1.5, .4, 1), opacity .14s; }
#entradaChefao .linha.vai { opacity: 1; transform: none; }
#entradaChefao .linha i { font-style: normal; font-size: 1.4em; }
#entradaChefao .linha .n { color: #ff7a55; font-size: 1.45em; margin-right: .1em; }
#entradaChefao .linha .n small { font-size: .5em; color: #ffd0a8; }

/* Pular: 44 px, cantos da Opção C (raio 12 px) */
#entradaChefao .pular { position: absolute; right: 12px; bottom: 6px; min-height: 44px; min-width: 96px; padding: 6px 16px; border-radius: 12px; font-size: 15px; opacity: 0; transition: opacity .3s; }
#entradaChefao.pode .pular { opacity: 1; }

/* celular deitado (844x390) */
@media (max-height: 520px) {
  #entradaChefao .placa { top: 7vh; }
  #entradaChefao .nome { font-size: clamp(22px, 4.6vw, 40px); border-width: 2px; }
  #entradaChefao .apelido { font-size: 11px; }
  #entradaChefao .tag { font-size: 10px; }
  #entradaChefao .balao { font-size: 15px; max-width: min(36vw, 280px); border-width: 2px; padding: .35em .7em .4em; }
  #entradaChefao .lista { bottom: calc(max(9vh, 40px) + .6vh); gap: 1vw; }
  #entradaChefao .linha { padding: .22em .55em; font-size: 11.5px; min-width: 24vw; }
  #entradaChefao .pular { bottom: 0; }
}