/* Home · ID Cromo. Tokens, topo, pílulas, seções e contato vêm do site.css; aqui fica só o desta página. */

h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* cada linha do título é um bloco: o balance não funciona com <br>, então quem quebra a linha é o bloco.
   fit-content segura o degradê do cromo na largura do texto, não na da coluna */
.l { display: block; width: fit-content; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* =========================================================
   TOPO · porta presa à rolagem (bloco anim-porta-cofre, versão 1: texto em cima da porta)
   A luz da fresta é o vazamento; atrás da porta, o terminal faz o diagnóstico de um site.
   Sem .cenas-on (sem JS, movimento reduzido, tela baixa, ?static): texto em cima e o terminal embaixo, empilhados.
   ========================================================= */
.porta { position: relative; --p: 0; --anel: clamp(150px, 18vw, 280px); --anel-y: 50%; background: var(--mr-fundo); }
.porta-palco { position: relative; display: flex; flex-direction: column; }
.porta-texto { order: -1; } /* no HTML a sala vem antes (fica atrás das folhas); empilhado, o texto vem primeiro */
.folha, .fresta, .fresta-brilho, .porta-veu, .porta-role, .sala-chip { display: none; }

.porta-texto { position: relative; z-index: 5; max-width: 620px; padding: 132px var(--calha) 72px; }
.porta-titulo { margin: 22px 0; font: 300 clamp(46px, min(5.7vw, 9vh), 92px)/1 var(--mr-titulo); letter-spacing: -.01em; } /* 5.7vw só pesa abaixo de 1280: em 1180 o "vazamento" chegava a 13 px do mostrador */
.porta-sub { max-width: 440px; opacity: .82; }
.porta-acoes { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.porta-acoes .pilula { padding: 0 22px; letter-spacing: .18em; }
.porta-meta { margin-top: 22px; font: 400 10px/1.9 var(--mr-marca); letter-spacing: .24em; text-transform: uppercase; color: var(--mr-cinza); }
.porta-meta > span { display: block; }
.porta-luz { color: var(--mr-led); text-shadow: 0 0 12px rgba(77, 141, 255, .45); }

/* a sala: o que aparece quando a porta abre */
.sala {
  position: relative;
  display: grid; justify-items: center; gap: 32px;
  padding: 24px var(--calha) clamp(96px, 16vh, 180px);
  background: radial-gradient(ellipse 55% 50% at 50% 45%, rgba(77, 141, 255, .14), transparent 70%), var(--mr-fundo);
}
.terminal {
  width: min(720px, 100%);
  border: 1px solid var(--mr-vidro-borda); border-radius: 18px;
  background: rgba(11, 11, 18, .86);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(77, 141, 255, .06);
  overflow: hidden;
}
.terminal-topo {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 20px; border-bottom: 1px solid var(--mr-fio);
  font: 400 10px/1 var(--mr-marca); letter-spacing: .3em; text-transform: uppercase; color: var(--mr-cinza);
}
.terminal-linhas { padding: 22px 24px 26px; font: 400 15px/1.8 ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-wrap: nowrap; }
.terminal-linhas .cmd { color: var(--mr-gelo-forte); }
.terminal-linhas .cmd:not(:first-child), .terminal-linhas .fim { margin-top: .5em; }
.terminal-linhas .prompt { color: var(--mr-led); }
.terminal-linhas .out { padding-left: 1.4em; color: var(--mr-cinza); }
/* o vazamento achado: a linha acende no gelo e o ✕ na cor da luz da fresta */
.terminal-linhas .vaza { color: var(--mr-gelo); }
.terminal-linhas .vaza::before { content: "✕ "; color: var(--mr-led); text-shadow: 0 0 10px rgba(77, 141, 255, .7); }
.terminal-linhas .ok::before { content: "✓ "; color: var(--mr-led); }
.terminal-linhas .fim { padding-left: 0; color: var(--mr-gelo-forte); }
.sala-chip {
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--mr-vidro-borda); background: rgba(24, 24, 31, .72);
  font: 300 17px/1 var(--mr-titulo); color: var(--mr-gelo); white-space: nowrap;
}
.sala-legenda { max-width: 600px; text-align: center; }
.sala-legenda .rotulo { justify-content: center; }
.sala-frase { margin-top: 14px; font: 300 clamp(22px, 2.3vw, 34px)/1.25 var(--mr-titulo); text-wrap: balance; }

/* ---------- cinema: o JS escreve --p (0 a 1) na .porta, o CSS move as camadas ----------
   faixas: luz vaza 0 a .06 · texto sai 0 a .1 · folhas correm .06 a .46 · terminal .44 a .82 · legenda .84 a .90 */
html.cenas-on .porta {
  height: 320vh;
  --vaza: clamp(0, var(--p) / .06, 1);                   /* luz vazando pela fresta */
  --texto: clamp(0, 1 - var(--p) / .1, 1);               /* texto do topo sai */
  --abre: clamp(0, (var(--p) - .06) / .4, 1);            /* folhas correm */
  --abre-s: calc(var(--abre) * var(--abre) * (3 - 2 * var(--abre))); /* com aceleração e freio */
}
html.cenas-on .porta-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
html.cenas-on .folha, html.cenas-on .fresta, html.cenas-on .fresta-brilho,
html.cenas-on .porta-veu, html.cenas-on .porta-role { display: block; }

/* folhas: metal escuro escovado, dois frisos finos e o mostrador cortado ao meio na fresta */
.folha {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2;
  overflow: hidden;
  will-change: transform;
}
.folha::before, .folha::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(232, 240, 255, .07); }
.folha::before { top: 16%; }
.folha::after { bottom: 16%; }
.folha-esq {
  left: 0;
  background:
    repeating-linear-gradient(90deg, rgba(232, 240, 255, .022) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(232, 240, 255, .05) 0%, transparent 24%, transparent 76%, rgba(232, 240, 255, .035) 100%),
    linear-gradient(90deg, #07070D 0%, #111119 62%, #0C0C13 100%);
  box-shadow: inset -1px 0 0 rgba(232, 240, 255, .2);
}
.folha-dir {
  right: 0;
  background:
    repeating-linear-gradient(90deg, rgba(232, 240, 255, .022) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(232, 240, 255, .05) 0%, transparent 24%, transparent 76%, rgba(232, 240, 255, .035) 100%),
    linear-gradient(270deg, #07070D 0%, #111119 62%, #0C0C13 100%);
  box-shadow: inset 1px 0 0 rgba(232, 240, 255, .2);
}
html.cenas-on .folha-esq { transform: translateX(calc(var(--abre-s) * -102%)); }
html.cenas-on .folha-dir { transform: translateX(calc(var(--abre-s) * 102%)); }

.fechadura { position: absolute; top: var(--anel-y); width: var(--anel); aspect-ratio: 1; }
.folha-esq .fechadura { right: 0; transform: translate(50%, -50%); }
.folha-dir .fechadura { left: 0; transform: translate(-50%, -50%); }
.giro, .giro svg { display: block; width: 100%; height: 100%; }
.giro svg { overflow: visible; }

/* a luz da fresta é um degradê (núcleo + dois halos borrados), pra poder sumir antes do texto no celular */
.porta { --fresta-luz: linear-gradient(180deg, transparent 0%, var(--mr-led) 18%, #9CC0FF 50%, var(--mr-led) 82%, transparent 100%); }
.fresta {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px;
  background: var(--fresta-luz);
  pointer-events: none;
}
.fresta::before, .fresta::after { content: ""; position: absolute; top: 0; bottom: 0; background: var(--fresta-luz); }
.fresta::before { left: -7px; width: 16px; filter: blur(8px); opacity: .85; }
.fresta::after { left: -29px; width: 60px; filter: blur(26px); opacity: .3; }
html.cenas-on .fresta { opacity: clamp(0, 1 - var(--abre) * 4, 1); }
.fresta-brilho {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%; width: 240px; margin-left: -120px;
  background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(77, 141, 255, .3), transparent 70%);
  pointer-events: none;
}
html.cenas-on .fresta-brilho {
  opacity: calc(var(--vaza) * clamp(0, 1 - var(--abre) * 2.5, 1));
  transform: scaleX(calc(1 + var(--vaza) * 1.5));
}

/* abertura em CSS, desde o 1º quadro (com GSAP o mostrador aparecia parado e pulava pro giro quando o script chegava):
   a fresta acende de cima a baixo e o mostrador gira até travar. backwards: no fim o transform volta ao normal */
html.cenas-on .fresta { animation: fresta-acende 1.4s cubic-bezier(.65, 0, .35, 1) backwards; }
html.cenas-on .giro { animation: giro-trava 2.6s var(--mr-entrada) .1s backwards; }
@keyframes fresta-acende { from { transform: scaleY(0); } }
@keyframes giro-trava { from { transform: rotate(450deg); filter: blur(6px); } }

.porta-veu {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 2, 9, .82) 0%, rgba(2, 2, 9, .45) 30%, rgba(2, 2, 9, 0) 46%),
    linear-gradient(0deg, rgba(2, 2, 9, .7) 0%, rgba(2, 2, 9, 0) 38%);
}
html.cenas-on .porta-veu { opacity: var(--texto); }

html.cenas-on .porta-texto {
  position: absolute; left: var(--calha); bottom: clamp(48px, 10vh, 112px);
  width: min(600px, 46vw); max-width: none; padding: 0; /* 46vw: os 2 botões (570 px) numa linha a partir de 1240 */
  opacity: var(--texto);
  transform: translateY(calc((1 - var(--texto)) * -28px));
}
.porta-role {
  position: absolute; z-index: 5; left: 50%; bottom: 22px; transform: translateX(-50%);
  font: 400 10px/1 var(--mr-marca); letter-spacing: .3em; text-transform: uppercase; color: var(--mr-cinza);
  pointer-events: none;
}
.porta-role::after {
  content: ""; display: block; width: 1px; height: 28px; margin: 10px auto 0;
  background: linear-gradient(var(--mr-cinza), transparent);
  animation: desce 2s ease-in-out infinite; transform-origin: top;
}
html.cenas-on .porta-role { opacity: var(--texto); }

html.cenas-on .sala {
  position: absolute; inset: 0; z-index: 1;
  align-content: center; gap: clamp(20px, 4vh, 36px);
  padding: 84px var(--calha) 40px;
  transform: scale(calc(.9 + .1 * var(--abre-s)));
  opacity: calc(.15 + .85 * var(--abre-s));
}
/* cada linha do terminal aparece numa faixa própria da rolagem */
html.cenas-on .terminal-linhas li {
  --l: clamp(0, (var(--p) - (.44 + var(--i) * .035)) / .03, 1);
  opacity: var(--l);
  transform: translateX(calc((1 - var(--l)) * -10px));
}
html.cenas-on .sala-chip {
  display: block; position: absolute; top: var(--y); left: var(--x);
  --c: clamp(0, (var(--p) - var(--ini)) / .06, 1);
  opacity: var(--c);
  transform: translateY(calc(-50% + (1 - var(--c)) * 16px));
}
html.cenas-on .chip-dir { left: auto; right: var(--x); }
html.cenas-on .sala-legenda {
  --leg: clamp(0, (var(--p) - .84) / .06, 1);
  opacity: var(--leg);
  transform: translateY(calc((1 - var(--leg)) * 14px));
}

/* =========================================================
   01 a 04
   ========================================================= */
.numeros-nota { margin-top: 32px; color: var(--mr-cinza); font-size: 14px; }
.link-mentoria {
  display: inline-flex; flex-wrap: wrap; gap: .3em .6em; margin-top: 36px; padding-top: 22px;
  border-top: 1px solid var(--mr-fio);
  color: var(--mr-cinza); font-size: 15px; transition: color .3s;
}
.link-mentoria span { color: var(--mr-gelo); border-bottom: 1px solid rgba(77, 141, 255, .5); transition: border-color .3s; }
.link-mentoria span::after { content: " →"; color: var(--mr-led); }
.link-mentoria:hover { color: var(--mr-gelo); }
.link-mentoria:hover span { border-color: var(--mr-led); }
.link-mentoria:focus-visible { outline: 2px solid var(--mr-led); outline-offset: 4px; border-radius: 4px; }
.contato-conteudo .l { margin-inline: auto; }
.contato-frase { margin-top: 22px; max-width: 460px; color: var(--mr-cinza); }
.rodape a { pointer-events: auto; transition: color .3s; }
.rodape a:hover { color: var(--mr-gelo); }

/* =========================================================
   TELAS MENORES
   ========================================================= */
@media (max-width: 1199px) {
  html.cenas-on .sala-chip { display: none; }
}
@media (max-width: 1100px) {
  .porta { --anel: clamp(116px, 26vw, 200px); --anel-y: 22%; }
  /* a luz da fresta some antes do texto: aqui ele ocupa a largura toda */
  .porta { --fresta-luz: linear-gradient(180deg, transparent 0%, var(--mr-led) 5%, #9CC0FF var(--anel-y), var(--mr-led) calc(var(--anel-y) + 10%), transparent calc(var(--anel-y) + 22%)); }
  html.cenas-on .porta-texto { right: var(--calha); width: auto; bottom: calc(48px + env(safe-area-inset-bottom)); }
  .porta-veu { background: linear-gradient(0deg, rgba(2, 2, 9, .95) 0%, rgba(2, 2, 9, .72) 42%, rgba(2, 2, 9, 0) 66%); }
  html.cenas-on .porta-role { display: none; }
}
@media (max-width: 640px) {
  .porta { --anel: 128px; --anel-y: 18%; }
  .porta-titulo { margin: 14px 0; font-size: clamp(42px, 12.5vw, 58px); }
  .porta-sub { font-size: 15px; }
  .porta-acoes { margin-top: 22px; gap: 8px; }
  .porta-acoes .pilula { flex: 1 1 100%; }
  html.cenas-on .sala { padding: 72px var(--calha) 28px; }
  .terminal-topo { padding: 13px 16px; }
  .terminal-linhas { padding: 18px 16px 20px; font-size: 12px; }
  .contato-acoes .pilula { flex: 1 1 100%; }
}
@media (max-width: 640px) and (max-height: 760px) {
  html.cenas-on .porta-sub, html.cenas-on .porta-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .porta-role::after { animation: none; }
}