/* ═══════════════════════════════════════════════════════════════════════════
   COMPILA · ABERTURA "UM PONTO VIRA MUNDO"
   ---------------------------------------------------------------------------
   A rolagem É a animação. Um ponto de luz vira notebook, o notebook abre,
   o código se escreve sozinho, a câmera entra pela tela, as cinco linguagens
   se apresentam e a jornada pousa no site.

   Regras que sustentam isso e não podem ser quebradas:
     1. NADA de opacity, filter ou mix-blend-mode dentro da cena 3D. Qualquer
        um deles cria contexto de empilhamento, achata o preserve-3d e some
        com o teclado. A opacidade da cena mora em .cr-mundo, que é o pai da
        perspectiva, nunca dentro dela.
     2. Só transform e opacity animam. Nada de width, top, filter ou box-shadow
        por quadro.
     3. Os painéis de código andam com UMA variável (--k) escrita no pai. O
        resto é calc() no CSS, então 5 painéis custam 1 escrita por quadro.
   ═════════════════════════════════════════════════════════════════════════ */

.cr{
  --cr-void:#060913;
  --cr-cyan:#00f5d4; --cr-blue:#38bdf8; --cr-purple:#a78bfa;
  --cr-amber:#f59e0b; --cr-orange:#ff5722; --cr-green:#22c55e;
  --cr-text:#f8fafc; --cr-muted:#aab6cc; --cr-dim:#7f8ea5;
  --cr-shadow:0 1px 2px rgba(4,6,14,.95),0 3px 12px rgba(4,6,14,.8),0 10px 44px rgba(4,6,14,.82);

  /* o <section> global do site tem padding e overflow:hidden; os dois quebram
     o sticky, então a abertura zera os dois na marra */
  position:relative; padding:0 !important; overflow:visible !important;
  /* Dez momentos de narrativa pedem espaço para respirar: a 1250vh cada um
     fica com cerca de 125vh, que é o bastante para sobreviver a cinco ou seis
     rolagens normais sem ninguém precisar parar para ler. Com 1000vh os dez
     ficavam apertados e a travessia passava batida. */
  height:1250vh; z-index:1;

  /* o header do site é sticky e ocupa altura no fluxo, então a seção começaria
     abaixo dele e o palco sairia 77px pela beirada de baixo. A margem negativa
     sobe a cena até o topo da janela; o header passa a flutuar por cima dela,
     que é exatamente o que se quer num herói de tela cheia.
     O valor real é medido e reescrito por cena-rolagem.js. */
  --cr-head:77px;
  margin-top:calc(var(--cr-head) * -1);
}

.cr-palco{position:sticky; top:0; height:100vh; overflow:hidden}

.cr-fx{position:absolute; inset:0; width:100%; height:100%; display:block}
.cr-fx--fundo{z-index:1}
.cr-fx--frente{z-index:6; opacity:0}

/* ── a cena 3D ─────────────────────────────────────────────────────────── */
.cr-mundo{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  perspective:1450px; perspective-origin:50% 38%;
  will-change:transform,opacity;
}
.cr-rig{transform-style:preserve-3d; will-change:transform}
.cr-note{
  position:relative; transform-style:preserve-3d; will-change:transform;
  /* o notebook precisa caber na ALTURA, não só na largura: aberto ele ocupa
     cerca de 0.9 x --w na vertical. Em tela baixa (1366x768, 1280x720) o termo
     de vh é quem manda e a tampa para de passar por cima do header. */
  --w:clamp(300px, min(48vw, calc((100vh - var(--cr-head) - 194px) * 1.115)), 660px);
}

/* base e teclado, deitados no chão */
.cr-base{
  position:absolute; left:50%; top:0; width:var(--w); height:calc(var(--w)*.7);
  margin-left:calc(var(--w)/-2); transform-origin:50% 0; transform:rotateX(90deg);
  background:linear-gradient(180deg,#2a3352 0%,#212a46 30%,#19203a 62%,#131931 100%);
  border-radius:3px 3px 14px 14px;
  box-shadow:
    inset 0 1px 0 rgba(248,250,252,.32), inset 0 -1px 0 rgba(248,250,252,.15),
    inset 1px 0 0 rgba(248,250,252,.08), inset -1px 0 0 rgba(248,250,252,.08),
    0 26px 60px rgba(0,0,0,.62);
}
.cr-base::before{                                   /* teclas */
  content:""; position:absolute; left:6.5%; right:6.5%; top:7%; height:47%; border-radius:6px;
  background:
    repeating-linear-gradient(90deg,rgba(5,8,18,.64) 0 5.1%,rgba(248,250,252,.11) 5.1% 6.15%),
    repeating-linear-gradient(0deg,rgba(5,8,18,.64) 0 14.4%,rgba(248,250,252,.11) 14.4% 17.2%);
  box-shadow:inset 0 0 0 1px rgba(248,250,252,.07);
}
.cr-base::after{                                    /* descanso e trackpad */
  content:""; position:absolute; left:33%; right:33%; top:63%; height:26%; border-radius:5px;
  background:linear-gradient(180deg,rgba(8,11,24,.52),rgba(8,11,24,.26));
  box-shadow:inset 0 0 0 1px rgba(248,250,252,.14);
}
.cr-luz{                                            /* a luz da tela caindo no teclado */
  position:absolute; left:50%; top:0; width:var(--w); height:calc(var(--w)*.7);
  margin-left:calc(var(--w)/-2); transform-origin:50% 0;
  transform:rotateX(90deg) translateZ(1px);
  border-radius:3px 3px 14px 14px; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,rgba(0,245,212,.34) 0%,rgba(56,189,248,.2) 32%,transparent 68%);
}

/* tampa */
.cr-tampa{
  position:absolute; left:50%; bottom:0; width:var(--w); height:calc(var(--w)*.615);
  margin-left:calc(var(--w)/-2); transform-origin:50% 100%;
  transform-style:preserve-3d; will-change:transform;
}
.cr-face{position:absolute; inset:0; border-radius:12px 12px 4px 4px;
  backface-visibility:hidden; overflow:hidden}
.cr-costas{
  background:linear-gradient(162deg,#323b5c 0%,#222a46 30%,#171d35 66%,#101528 100%);
  box-shadow:inset 0 1px 0 rgba(248,250,252,.28), inset 0 0 0 1px rgba(248,250,252,.1);
  display:grid; place-items:center;
  /* a tampa gira no eixo X, então a face de trás vira no X também.
     Com rotateY(180deg) a marca sairia espelhada. */
  transform:rotateX(180deg) translateZ(1px);
}
.cr-marca{
  display:flex; align-items:center; gap:.5em; color:rgba(248,250,252,.24);
  font-family:var(--font-display),sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(14px,2.1vw,27px); text-shadow:0 1px 0 rgba(248,250,252,.09);
}
.cr-marca i{
  width:.5em; height:.5em; border-radius:3px; font-style:normal;
  background:linear-gradient(135deg,var(--cr-orange),#ff8a50);
  box-shadow:0 0 14px rgba(255,87,34,.4);
}
.cr-frente{
  background:linear-gradient(180deg,#141a30,#0c1122);
  padding:calc(var(--w)*.016); padding-bottom:calc(var(--w)*.032);
  transform:translateZ(1px);
  box-shadow:inset 0 1px 0 rgba(248,250,252,.26), inset 0 0 0 1px rgba(248,250,252,.1),
             0 0 60px rgba(0,245,212,.08);
}

/* a tela */
.cr-tela{position:relative; width:100%; height:100%; border-radius:6px; overflow:hidden;
  background:#04060e}
.cr-liga{position:absolute; inset:0; opacity:0;
  background:radial-gradient(ellipse 90% 70% at 50% 40%,#0e1a30 0%,#080e1c 62%,#04060e 100%)}
.cr-brilho{position:absolute; inset:-10%; opacity:0; pointer-events:none;
  background:radial-gradient(ellipse 52% 44% at 50% 46%,rgba(0,245,212,.16),transparent 72%)}
.cr-barra{
  position:absolute; top:0; left:0; right:0; height:9%; opacity:0;
  display:flex; align-items:center; gap:.6em; padding:0 1.1em;
  font-family:var(--font-mono),monospace; font-size:calc(var(--w)*.0165); color:var(--cr-dim);
  border-bottom:1px solid rgba(248,250,252,.07); background:rgba(9,14,28,.62);
}
.cr-barra u{width:.55em; height:.55em; border-radius:50%; background:#2b3352; text-decoration:none}
.cr-barra span{margin-left:auto; letter-spacing:.14em}
.cr-codigo{
  position:absolute; top:11%; left:0; right:0; padding:0 1.5em; opacity:0;
  font-family:var(--font-mono),monospace; font-size:calc(var(--w)*.0212); line-height:1.62;
  color:#c7d2e5; white-space:pre; text-align:left;
}
.cr-codigo .p{color:var(--cr-cyan)}
.cr-codigo .k{color:var(--cr-purple)}
.cr-codigo .s{color:var(--cr-amber)}
.cr-codigo .c{color:#5b6780}
.cr-codigo .o{color:var(--cr-blue)}
.cr-cursor{display:inline-block; width:.62em; height:1.02em; vertical-align:-.16em;
  background:var(--cr-cyan); box-shadow:0 0 10px rgba(0,245,212,.7)}
.cr-scan{position:absolute; inset:0; opacity:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(150,210,255,.09) 0 2px,transparent 2px 7px)}
.cr-flash{position:absolute; inset:0; opacity:0; pointer-events:none; background:#dff0ff}

/* ── os painéis de código das cinco linguagens ─────────────────────────── */
.cr-langs{
  position:absolute; inset:0; z-index:5; perspective:1200px;
  pointer-events:none; opacity:0; will-change:opacity;
}
.cr-lang{
  position:absolute; left:50%; top:44%; width:clamp(186px,16.5vw,250px);
  --kk:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);
  opacity:var(--kk);
  transform:
    translate(-50%,-50%) translate(var(--x,0),var(--y,0))
    translateZ(calc((1 - var(--kk)) * -680px + var(--zr,0px)))
    rotateY(calc(var(--ry,0deg) * (1 - var(--kk)*.45)))
    rotateZ(var(--rz,0deg))
    scale(calc(.9 + .1*var(--kk)));
  will-change:transform,opacity;
  border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,rgba(11,16,32,.96),rgba(8,12,24,.96));
  box-shadow:
    inset 0 0 0 1px rgba(248,250,252,.1),
    0 0 0 1px rgba(4,6,14,.8),
    0 22px 60px rgba(0,0,0,.6),
    0 0 46px -10px var(--ac);
}
.cr-lang figcaption{
  display:flex; align-items:center; gap:7px; padding:8px 12px;
  border-bottom:1px solid rgba(248,250,252,.09);
  background:linear-gradient(180deg,rgba(248,250,252,.05),transparent);
  font-family:var(--font-mono),monospace; font-size:11px; font-weight:600;
  letter-spacing:.09em; color:var(--ac);
}
.cr-lang figcaption i{
  width:7px; height:7px; border-radius:50%; background:var(--ac); font-style:normal;
  box-shadow:0 0 10px var(--ac); animation:crPulso 4.5s ease-in-out infinite;
}
.cr-lang figcaption b{margin-left:auto; font-weight:400; color:var(--cr-dim); letter-spacing:.04em}

/* A POSIÇÃO de cada painel mora aqui, não no style= do HTML: o celular precisa
   reposicionar os cinco, e style inline só cairia com !important. O que fica
   inline é a identidade de cada linguagem (--ac) e o instante em que ela chega
   (--th), que não mudam com o tamanho da tela. */
.cr-lang:nth-child(1){--x:-38vw; --y:  0vh; --ry: 20deg; --rz:-4deg; --zr:-30px}
.cr-lang:nth-child(2){--x:-19vw; --y:-14vh; --ry: 11deg; --rz:-2deg; --zr:-12px}
.cr-lang:nth-child(3){--x:  0vw; --y:  2vh; --ry:  0deg; --rz: 0deg; --zr: 24px}
.cr-lang:nth-child(4){--x: 19vw; --y:-14vh; --ry:-11deg; --rz: 2deg; --zr:-12px}
.cr-lang:nth-child(5){--x: 38vw; --y:  0vh; --ry:-20deg; --rz: 4deg; --zr:-30px}
.cr-lang pre{
  margin:0; padding:12px 13px 14px;
  font-family:var(--font-mono),monospace; font-size:clamp(9.6px,.76vw,12.4px);
  line-height:1.72; color:#c7d2e5; white-space:pre; overflow:hidden;
}
@keyframes crPulso{0%,100%{opacity:.45}50%{opacity:1}}

/* um só tema de sintaxe nos cinco painéis: o acento fica na etiqueta e na
   borda, não no código. Código de cinco cores por painel vira confete. */
.cr-lang .cm{color:#5b6780; font-style:italic}
.cr-lang .kw{color:var(--cr-purple)}
.cr-lang .fn{color:var(--cr-blue)}
.cr-lang .st{color:var(--cr-amber)}
.cr-lang .nu{color:var(--cr-cyan)}
.cr-lang .ty{color:var(--cr-green)}
.cr-lang .pn{color:#8494ad}

/* ═════════════════════════════════════════════════════════════════════════
   ATO 5 · OS QUATRO PILARES DA LÓGICA
   ---------------------------------------------------------------------------
   "É preciso aprender a pensar." Variável, condição, laço e função não chegam
   como uma lista: chegam como quatro colunas que SOBEM do escuro e se apoiam
   numa linha comum, uma depois da outra. O que se vê é uma estrutura sendo
   erguida, não um bullet point.

   Mesmo motor dos painéis de linguagem: o JS escreve UMA variável no pai e
   cada pilar descobre a própria vez pelo --th. Custo por quadro: uma escrita.
   ═════════════════════════════════════════════════════════════════════════ */
/* Os pilares moram na METADE DE BAIXO da tela, apoiados perto do rodapé: eles
   crescem do chão, e o capítulo da lógica ocupa o topo (cx-cap--alto). Quando
   os dois estavam centrados, o texto pousava em cima dos pilares. */
.cr-logica{
  position:absolute; inset:0; z-index:5; perspective:1400px;
  pointer-events:none; opacity:0; will-change:opacity;
  display:grid; place-items:end center;
  padding-bottom:clamp(60px,12vh,110px);
}
.cr-logica-tri{
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(14px,3.2vw,44px);
  transform-style:preserve-3d;
  /* a linha em que os quatro se apoiam: some com eles */
  border-bottom:1px solid rgba(0,245,212,.20);
  padding-bottom:18px;
}
/* A CAIXA DO PILAR NÃO MUDA DE TAMANHO.
   A primeira versão crescia com `height:calc(--h * --kk)`. Lia bem e custava
   caro: altura é layout, são quatro pilares num flex, e o rótulo de cada um
   está ancorado em `bottom:100%` — ou seja, a cada quadro o navegador refazia
   o layout da fila inteira e reposicionava os quatro rótulos. Medido na faixa
   0.452–0.588: p95 de 22.8ms, contra um orçamento de 16.67ms.
   Agora a caixa fica parada na altura final e quem cresce é um pseudo, por
   escala — que anda no compositor e não pergunta nada ao layout. */
.cr-pilar{
  --kk:clamp(0, (var(--k,0) - var(--th,0)) * 2.6, 1);
  position:relative;
  width:clamp(74px,9vw,116px);
  height:var(--h,150px);
  transform:translateZ(calc((1 - var(--kk)) * -260px));
  will-change:transform;
}
/* o corpo do pilar: sobe do chão em escala, com a origem no pé.
   O color-mix mora aqui e não depende de --kk — é resolvido uma vez, não a
   cada quadro, que foi o erro da borda acesa do mapa. */
.cr-pilar::before{
  content:""; position:absolute; inset:0;
  transform:scaleY(var(--kk)); transform-origin:50% 100%;
  opacity:var(--kk);
  border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--ac) 26%, rgba(10,16,32,.9)),
    rgba(8,12,24,.94));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ac) 34%, transparent),
    0 0 34px -12px var(--ac);
  will-change:transform,opacity;
}
/* o rótulo sobe JUNTO com o topo do pilar, mas por transform: ele parte do
   chão e chega no lugar. Sem isto ele apareceria direto na altura final. */
.cr-pilar b{
  position:absolute; left:50%; bottom:calc(100% + 12px);
  transform:translateX(-50%) translateY(calc((1 - var(--kk)) * var(--h,150px)));
  font-family:var(--font-mono),monospace; font-size:clamp(9px,.78vw,11.5px);
  font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ac); white-space:nowrap;
  opacity:var(--kk);
  will-change:transform,opacity;
}
/* o símbolo, no pé do pilar */
.cr-pilar i{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  font-style:normal; font-family:var(--font-mono),monospace;
  font-size:clamp(13px,1.2vw,17px); color:var(--ac); opacity:calc(var(--kk) * .9);
}
.cr-pilar:nth-child(1){--ac:#00f5d4; --h:112px; --th:0}
.cr-pilar:nth-child(2){--ac:#38bdf8; --h:150px; --th:.16}
.cr-pilar:nth-child(3){--ac:#a78bfa; --h:188px; --th:.32}
.cr-pilar:nth-child(4){--ac:#f59e0b; --h:226px; --th:.48}

/* ═════════════════════════════════════════════════════════════════════════
   ATOS 7 e 8 · A JANELA DO PROJETO
   ---------------------------------------------------------------------------
   "Aprender código só faz sentido quando você consegue construir." Aqui o
   código deixa de ser texto e vira uma coisa que se usa: a moldura chega
   primeiro, depois as linhas da interface, e por último o resultado. A ordem
   importa — é ela que conta que o resultado é CONSEQUÊNCIA.
   ═════════════════════════════════════════════════════════════════════════ */
.cr-projeto{
  position:absolute; inset:0; z-index:5; perspective:1500px;
  pointer-events:none; opacity:0; will-change:opacity;
  display:grid; place-items:center;
}
.cr-janela{
  --kk:clamp(0, var(--k,0) * 2.2, 1);
  width:clamp(300px,42vw,560px);
  border-radius:10px; overflow:hidden;
  opacity:var(--kk);
  transform:
    translateY(calc((1 - var(--kk)) * 34px))
    translateZ(calc((1 - var(--kk)) * -420px))
    rotateX(calc((1 - var(--kk)) * 9deg));
  background:linear-gradient(180deg,rgba(11,16,32,.97),rgba(8,12,24,.97));
  box-shadow:
    inset 0 0 0 1px rgba(248,250,252,.1),
    0 30px 80px rgba(0,0,0,.66),
    0 0 60px -18px rgba(56,189,248,.5);
  will-change:transform,opacity;
}
.cr-janela-barra{
  display:flex; align-items:center; gap:6px; padding:9px 13px;
  border-bottom:1px solid rgba(248,250,252,.09);
  background:linear-gradient(180deg,rgba(248,250,252,.05),transparent);
  font-family:var(--font-mono),monospace; font-size:10.5px;
  letter-spacing:.08em; color:var(--cr-dim);
}
.cr-janela-barra u{
  width:8px; height:8px; border-radius:50%; text-decoration:none;
  background:rgba(248,250,252,.22);
}
.cr-janela-barra u:nth-child(1){background:#ff5f57}
.cr-janela-barra u:nth-child(2){background:#febc2e}
.cr-janela-barra u:nth-child(3){background:#28c840}
.cr-janela-barra span{margin-left:auto}
.cr-janela-corpo{padding:16px 17px 19px; display:grid; gap:11px}

/* cada linha da interface entra na sua vez */
.cr-linha{
  --kl:clamp(0, (var(--k,0) - var(--th,0)) * 3.4, 1);
  display:flex; align-items:center; gap:10px;
  opacity:var(--kl);
  transform:translateX(calc((1 - var(--kl)) * -14px));
}
.cr-linha em{
  width:15px; height:15px; border-radius:3px; flex:none; font-style:normal;
  border:1px solid rgba(0,245,212,.42);
  display:grid; place-items:center; font-size:9px; color:#00f5d4;
}
.cr-linha s{
  height:7px; border-radius:4px; text-decoration:none; flex:1;
  background:linear-gradient(90deg,rgba(248,250,252,.20),rgba(248,250,252,.05));
}
.cr-linha:nth-child(1){--th:.14}
.cr-linha:nth-child(2){--th:.26}
.cr-linha:nth-child(3){--th:.38}
.cr-linha:nth-child(4){--th:.50}
.cr-linha--feita em{background:rgba(0,245,212,.18)}
.cr-linha--feita s{background:linear-gradient(90deg,rgba(0,245,212,.30),rgba(0,245,212,.06))}

/* o resultado: só depois das linhas. É a consequência delas. */
.cr-janela-fim{
  --kf:clamp(0, (var(--k,0) - .62) * 3.4, 1);
  margin-top:4px; padding-top:12px;
  border-top:1px solid rgba(248,250,252,.09);
  display:flex; align-items:baseline; justify-content:space-between;
  font-family:var(--font-mono),monospace; font-size:11px;
  color:var(--cr-dim); letter-spacing:.06em;
  opacity:var(--kf);
  transform:translateY(calc((1 - var(--kf)) * 10px));
}
.cr-janela-fim b{color:#00f5d4; font-weight:500; font-size:13px}

@media(max-width:900px){
  .cr-logica-tri{gap:10px; padding-bottom:12px}
  .cr-pilar{width:clamp(52px,15vw,74px)}
  .cr-pilar:nth-child(1){--h:80px}
  .cr-pilar:nth-child(2){--h:106px}
  .cr-pilar:nth-child(3){--h:132px}
  .cr-pilar:nth-child(4){--h:158px}
  .cr-janela{width:min(86vw,420px)}
}

/* ── legibilidade por cima da cena ─────────────────────────────────────── */
.cr-veu{position:absolute; inset:0; z-index:7; pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(6,9,19,0) 34%,rgba(6,9,19,.62) 100%)}

.cr-faixas{position:absolute; inset:0; z-index:8; pointer-events:none}
.cr-faixa{
  position:absolute; left:0; right:0; padding:0 24px; opacity:0;
  text-shadow:var(--cr-shadow); will-change:opacity;
}
.cr-faixa::before{
  content:""; position:absolute; inset:-6% -4%; z-index:-1; pointer-events:none;
  opacity:calc(.25 + .75*var(--k,0));
  background:radial-gradient(ellipse 74% 66% at 50% 50%,rgba(6,9,19,.7) 0%,rgba(6,9,19,.48) 46%,rgba(6,9,19,0) 76%);
}
.cr-faixa .cr-in{max-width:1180px; margin:0 auto; text-align:center}
.cr-faixa .cr-btns{pointer-events:auto}

.cr-selo{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-pixel-heading),monospace; font-size:10px; letter-spacing:.16em;
  color:var(--cr-cyan); background:rgba(7,10,22,.58);
  border:1px solid rgba(0,245,212,.28); border-radius:6px; padding:7px 12px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(4,6,14,.88);
}
.cr-selo i{width:6px; height:6px; border-radius:50%; background:var(--cr-cyan);
  font-style:normal; box-shadow:0 0 10px var(--cr-cyan)}

.cr-t1{font-family:var(--font-display),sans-serif; font-weight:800; letter-spacing:-.03em;
  line-height:1.05; color:var(--cr-text); font-size:clamp(34px,6.2vw,80px); margin:20px 0 0}
.cr-t2{font-family:var(--font-display),sans-serif; font-weight:800; letter-spacing:-.03em;
  line-height:1.06; color:var(--cr-text); font-size:clamp(27px,4.8vw,60px); margin:18px 0 0}
.cr-t3{font-family:var(--font-display),sans-serif; font-weight:800; letter-spacing:-.03em;
  line-height:1.08; color:var(--cr-text); font-size:clamp(25px,3.9vw,52px); margin:16px 0 0;
  max-width:20ch; margin-inline:auto}
/* acento sólido, nunca background-clip: texto recortado por cima de cena viva
   vira sombra preta, porque o text-shadow pinta e o glifo não */
.cr-ac{color:var(--cr-cyan)}
.cr-lede{font-family:var(--font-body),sans-serif; color:#cbd5e6;
  font-size:clamp(14.5px,1.6vw,18.5px); line-height:1.6; max-width:56ch; margin:16px auto 0}

/* entradas, todas raspadas pela rolagem e 100% reversíveis */
.cr-w{display:inline-block; white-space:pre}
.cr-ch{display:inline-block;
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1); opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
.cr-sobe .cr-w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1); opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*26px))}
.cr-fundo-a{--kc:clamp(0,var(--k,0)*1.5,1); opacity:var(--kc);
  transform:scale(calc(.8 + .2*var(--kc)))}
.cr-d1{--ks:clamp(0,(var(--k,0) - .5)*3.4,1); opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*16px))}
.cr-d2{--kb:clamp(0,(var(--k,0) - .68)*3.6,1); opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*16px))}

.cr-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}

/* os números do antigo herói, agora no pouso da abertura */
.cr-numeros{display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-top:24px}
.cr-numeros div{display:flex; align-items:baseline; gap:7px}
.cr-numeros strong{font-family:var(--font-mono),monospace; font-size:20px; font-weight:700;
  color:var(--cr-cyan); font-variant-numeric:tabular-nums}
.cr-numeros span{font-family:var(--font-mono),monospace; font-size:12px; letter-spacing:.04em;
  color:var(--cr-muted)}
@media(max-height:720px){.cr-numeros{display:none}}
.cr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:9999px; font-family:var(--font-body),sans-serif;
  font-size:14.5px; font-weight:700; border:1px solid transparent; text-shadow:none;
  transition:transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth),
             border-color .4s var(--ease-smooth);
}
.cr-btn--cyan{background:var(--cr-cyan); color:#06121a; box-shadow:0 8px 28px rgba(0,245,212,.26)}
.cr-btn--cyan:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,245,212,.36)}
.cr-btn--ghost{border-color:rgba(148,163,184,.3); color:var(--cr-text); background:rgba(15,23,42,.5)}
.cr-btn--ghost:hover{transform:translateY(-2px); border-color:var(--cr-cyan)}
@media(pointer:coarse){.cr-btn{min-height:44px}}

/* leitura de HUD */
.cr-hud{
  position:absolute; left:24px; bottom:22px; z-index:9;
  display:flex; align-items:center; gap:11px;
  font-family:var(--font-mono),monospace; font-size:11px; letter-spacing:.13em;
  color:var(--cr-muted); background:rgba(7,10,22,.52);
  border:1px solid rgba(148,163,184,.22); border-radius:8px; padding:8px 12px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(4,6,14,.88);
}
.cr-hud b{color:var(--cr-cyan); font-weight:500; font-variant-numeric:tabular-nums}
.cr-hud .cr-trilho{width:84px; height:2px; background:rgba(248,250,252,.14);
  border-radius:2px; overflow:hidden}
.cr-hud .cr-trilho i{display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--cr-blue),var(--cr-cyan));
  transform:scaleX(0); transform-origin:0 50%}
@media(max-height:560px){.cr-hud{display:none}}

.cr-dica{
  position:absolute; left:50%; bottom:24px; z-index:9; transform:translateX(-50%);
  display:grid; gap:8px; justify-items:center;
  font-family:var(--font-pixel-heading),monospace; font-size:9px; letter-spacing:.2em;
  color:var(--cr-dim);
}
.cr-dica u{display:block; width:1px; height:32px; text-decoration:none;
  background:linear-gradient(180deg,transparent,var(--cr-cyan));
  animation:crDesce 2.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes crDesce{0%{transform:scaleY(.2); opacity:0}40%{opacity:1}100%{transform:scaleY(1); opacity:0}}

/* ── portões ───────────────────────────────────────────────────────────── */
/* Quem pediu menos movimento no sistema, e tela deitada baixa demais para o
   notebook caber, perdem o CENÁRIO — não a HISTÓRIA.
   O CELULAR TEM ABERTURA — com enquadramento e custo próprios, logo abaixo.

   Aqui morava `.cr{display:none}`. Isso funcionava quando a abertura era só
   um enfeite; hoje ela é a entrada do site, e dentro dela moram os dez
   capítulos, os dois botões principais e os números contados do currículo.
   Escondê-la jogava o visitante direto no mapa, sem título e sem chamada.
   Agora o palco solta o sticky, o cenário 3D sai e os capítulos viram um
   documento: mesma ordem, mesmo texto, zero movimento.
   (cinema.css já devolve .cx-cap para position:relative sob reduce — esta
   regra cuida do que é da cena: o palco e o cenário.) */
@media (prefers-reduced-motion:reduce),
       (orientation:landscape) and (max-height:480px){
  /* 1250vh só fazem sentido para quem rola a narrativa; aqui ela é lida. */
  .cr{height:auto; background:var(--cr-void)}
  .cr-palco{
    position:static; height:auto; overflow:visible;
    padding:calc(var(--cr-head,68px) + 3rem) 0 4rem;
  }

  /* o que existia para se MOVER sai de cena: notebook, linguagens, pilares,
     janela do projeto, canvas, instrumento, dica de rolagem e atmosfera. */
  .cr-mundo,.cr-langs,.cr-logica,.cr-projeto,
  .cr-fx,.cr-hud,.cr-dica,.cr-veu,.cx-chegada{display:none}

  .cr-faixas{position:static; display:block}
  .cr-faixa{
    padding:2rem 24px; text-shadow:none;
    max-width:min(72ch,92vw); margin-inline:auto;
  }
  .cr-faixa::before{display:none}         /* o halo existe para separar do 3D */

  /* alguns capítulos empurram o lede para a direita por estilo inline; num
     documento centrado isso vira um parágrafo solto no canto. */
  .cr-faixa .cx-lede{margin-left:auto !important; margin-right:auto}

  /* as máscaras de linha existem para a cascata. Sem cascata, sem máscara —
     e sem ela o descendente de "g" e "p" não fica cortado. */
  .cx-linha-mask{overflow:visible}
  .cx-linha-mask>span{transform:none !important; opacity:1 !important}
}

/* ── celular e tablet em pé ────────────────────────────────────────────── */
@media (max-width:900px), (orientation:portrait) and (max-width:1024px){
  /* svh, não vh: no celular a barra de endereço some no primeiro toque, o
     100vh cresce junto e a cena inteira dava um pulo no meio da rolagem. O
     svh é a altura COM a barra — não muda mais depois disso.
     O fundo passa a ser da seção porque, com a barra escondida, sobra uma
     faixa de janela abaixo do palco de 100svh; sem cor ali aparecia o corte. */
  .cr{height:820svh; background:var(--cr-void)}
  .cr-palco{height:100svh}

  /* de pé o notebook é limitado pela LARGURA, não pela altura: o termo de vw
     manda, e o teto de 440px evita que em tablet ele vire uma parede. */
  .cr-note{
    --w:clamp(240px, min(86vw, calc((100svh - var(--cr-head) - 150px) * 1.02)), 440px);
  }

  /* os cinco painéis lado a lado (±38vw) sairiam da tela. Aqui eles viram
     uma grade 3 em cima, 2 embaixo — continuam chegando um a um pelo --th. */
  .cr-lang{width:min(36vw,152px)}
  .cr-lang figcaption{padding:6px 9px; font-size:9px; letter-spacing:.06em; gap:5px}
  .cr-lang figcaption b{display:none}         /* o nome do arquivo não cabe */
  .cr-lang figcaption i{width:6px; height:6px}
  .cr-lang pre{padding:8px 9px 10px; font-size:8.4px; line-height:1.66}

  .cr-lang:nth-child(1){--x:-30vw; --y:-17vh; --ry: 14deg; --rz:-3deg; --zr:-20px}
  .cr-lang:nth-child(2){--x:  0vw; --y:-17vh; --ry:  0deg; --rz: 0deg; --zr:  0px}
  .cr-lang:nth-child(3){--x: 30vw; --y:-17vh; --ry:-14deg; --rz: 3deg; --zr:-20px}
  .cr-lang:nth-child(4){--x:-20vw; --y:  3vh; --ry:  8deg; --rz: 2deg; --zr:-10px}
  .cr-lang:nth-child(5){--x: 20vw; --y:  3vh; --ry: -8deg; --rz:-2deg; --zr:-10px}

  /* o HUD ficava em cima das faixas que moram no rodapé da tela estreita */
  .cr-hud{display:none}

  .cr-faixa{padding:0 18px}
  .cr-lede{font-size:14px; line-height:1.55}
  .cr-numeros{gap:12px 20px; margin-top:18px}
  .cr-numeros strong{font-size:17px}
  .cr-numeros span{font-size:11px}
  .cr-btns{gap:10px; margin-top:20px}
  .cr-btn{padding:12px 18px; font-size:14px}
  .cr-dica{bottom:16px}
}

/* celular pequeno: com a cena no meio, o lede não cabe sem encostar na tampa.
   (os números já saem sozinhos no portão de max-height:720px lá em cima) */
@media (max-width:900px) and (max-height:700px){
  .cr-faixa .cr-lede{display:none}
}