/* =========================================================
   tonfontes.com · v2
   Uma peça só. Não tem menu nem seção: o canvas fica preso na
   tela e a rolagem transforma o que está nele. Os "atos" abaixo
   são texto fixo que entra e sai conforme o estado do canvas.
   Sem JS, os atos voltam a ser uma página comum, um embaixo do outro.

   Tipografia: só Mona Sans, a letra do nome, aberta (font-stretch
   125%) e pesada nos títulos. O dono não gostou da mono de pixel
   pequena (2026-10-13): ela ficou só dentro do canvas, desenhando
   os caracteres do retrato em ASCII. Rótulo pequeno não desce de 13px.
   ========================================================= */

@font-face{
  font-family:"Mona Sans";
  src:url("../fonts/MonaSans-VF.woff2") format("woff2");
  font-weight:200 900; font-stretch:75% 125%; font-style:normal; font-display:swap;
}

:root{
  --bg:#07070A;
  --fg:#ECEDF3;
  --suave:#B9BBCB;
  --mute:#7D8096;
  --dim:#2A2D3C;
  --linha:rgba(196,203,255,.13);
  --azul:#1236FE;
  --azul-claro:#6E84FF;
  --lilas:#C4CBFF;
  --vivo:#3DFFA2;

  --sans:"Mona Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(1rem,4.2vw,4.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:400 clamp(1rem,.92rem + .3vw,1.15rem)/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,p,ol,ul{margin:0}
ol,ul{list-style:none;padding:0}
::selection{background:var(--azul);color:#fff}
:focus-visible{outline:2px solid var(--azul-claro);outline-offset:4px}
/* rótulo: a mesma Mona Sans do nome, aberta e em caixa alta */
.mono{font-family:var(--sans);font-size:clamp(13px,.72rem + .2vw,15px);font-weight:620;font-stretch:125%;line-height:1.5;letter-spacing:.07em;text-transform:uppercase}

.pular{position:fixed;left:1rem;top:-4rem;z-index:100;background:var(--fg);color:var(--bg);padding:.6rem 1rem;font:600 14px var(--sans)}
.pular:focus{top:1rem}

/* ---------- palco ---------- */
.palco{display:none}
.js .palco{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:0}
.nitida{display:none}
.js .nitida{
  display:block;position:fixed;left:0;top:0;z-index:1;pointer-events:none;
  opacity:0;width:auto;max-width:none;transform-origin:center;
}
.sem-webgl .nitida{opacity:.5!important}


/* ---------- HUD ---------- */
.hud,.leitura{display:none}
.js .hud{
  display:flex;justify-content:space-between;align-items:center;
  position:fixed;inset:0 0 auto;z-index:20;padding:1.2rem var(--pad);pointer-events:none;
  font:620 13px/1 var(--sans);font-stretch:125%;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);
}
.hud__marca{font-size:19px;font-weight:820;letter-spacing:-.01em;text-transform:none;color:var(--fg);display:flex;align-items:center}
.hud__marca b{color:var(--azul-claro);font-weight:400;margin:0 .05em}
.hud__cursor{width:.55em;height:.95em;margin-left:.2em;background:var(--azul-claro);animation:pisca 1.05s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
@keyframes led{50%{opacity:.3}}

.js .leitura{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.2rem;
  position:fixed;inset:auto 0 0;z-index:20;padding:1.1rem var(--pad) calc(1.1rem + env(safe-area-inset-bottom));
  font:620 13px/1 var(--sans);font-stretch:125%;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);pointer-events:none;
}
.leitura__trilho{position:relative;height:1px;background:var(--dim)}
.leitura__trilho span{position:absolute;inset:0;background:var(--azul-claro);transform-origin:left;transform:scaleX(0);box-shadow:0 0 8px var(--azul-claro)}
.leitura__pct{font-variant-numeric:tabular-nums;min-width:4ch;text-align:right}

/* ---------- os atos ---------- */
.roteiro{position:relative;z-index:10}
.ato{padding:12vh var(--pad)}
.js .trilha{position:relative;z-index:-1}

.js .ato{
  position:fixed;left:var(--pad);top:50%;width:min(36rem,42vw);padding:0;
  transform:translate3d(0,-50%,0);
  opacity:0;visibility:hidden;pointer-events:none;
}
.js .ato.on{visibility:visible}
.js .ato.ativo{pointer-events:auto}
.js .ato--baixo{top:auto;bottom:16vh;transform:none;width:min(40rem,48vw)}
.js .ato--abre{top:auto;bottom:12vh;transform:none;width:auto;max-width:92vw}

.ato__cmd{color:var(--azul-claro);margin-bottom:1.6rem}
.nome{
  font-family:var(--sans);font-weight:var(--peso,850);font-stretch:var(--larg,125%);
  font-size:clamp(3.6rem,13.5vw,15rem);line-height:.84;letter-spacing:-.035em;text-transform:uppercase;
  margin-left:-.04em;
}
.nome span{display:block}
.ato__sub{margin-top:1.6rem;color:var(--suave);font-size:clamp(1.05rem,.9rem + .5vw,1.4rem);font-stretch:105%}
.ato__sub a{color:var(--fg);background:linear-gradient(var(--azul-claro),var(--azul-claro)) 0 100%/100% 1px no-repeat}
.ato__sub a:hover{color:var(--azul-claro)}
.ato__sub span{color:var(--azul-claro)}
.ato__sub .ato__onde{color:inherit;white-space:nowrap}
.ato__dica{display:flex;align-items:center;gap:1rem;margin-top:3rem;color:var(--mute)}
.ato__dica i{position:relative;width:4rem;height:1px;background:var(--dim);overflow:hidden}
.ato__dica i::after{content:"";position:absolute;inset:0;width:40%;background:var(--azul-claro);animation:corre 1.8s var(--ease) infinite}
@keyframes corre{from{transform:translateX(-100%)}to{transform:translateX(260%)}}

.frase{
  font-family:var(--sans);font-weight:760;font-stretch:118%;
  font-size:clamp(1.8rem,.9rem + 2.7vw,3.9rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance;
}
.log{margin-top:1.8rem;color:var(--suave);max-width:36ch;
  font-size:clamp(1.05rem,.92rem + .45vw,1.35rem);font-weight:460;font-stretch:105%;line-height:1.4;letter-spacing:0;text-transform:none}
.log b{display:block;margin-bottom:.35rem;color:var(--vivo);font-weight:620;font-stretch:125%;font-size:13px;letter-spacing:.08em;text-transform:uppercase}

/* trabalhos: só o cartão em foco aparece, os outros esperam empilhados */
.ato__rotulo{color:var(--mute);margin-bottom:1.6rem}
.ato__rotulo span{color:var(--dim)}
.obras{position:relative}
.js .obras{display:grid}
/* os cartões dividem a mesma célula da grade: a altura é a do maior, e a contagem nunca sobe neles */
.js .obras li{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .6s var(--ease);pointer-events:none}
.js .obras li.on{opacity:1;transform:none;pointer-events:auto}
.obras a{display:grid;gap:.7rem}
.obra__meta{color:var(--azul-claro)}
.obra__titulo{font-weight:780;font-stretch:120%;font-size:clamp(1.9rem,1rem + 2.8vw,3.8rem);line-height:1;letter-spacing:-.035em}
.obra__texto{color:var(--suave);max-width:30ch;font-size:clamp(1.02rem,.9rem + .4vw,1.25rem)}
.obra__ver{margin-top:.6rem;color:var(--fg)}
.obras a:hover .obra__ver{color:var(--azul-claro)}
.obras__conta{margin-top:1.2rem;color:var(--mute);display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;white-space:nowrap}
.obras__conta b{color:var(--fg);font-weight:inherit}
.obras__conta a{color:var(--fg);border-bottom:1px solid var(--azul-claro)}
.js .obras__conta{margin-top:1.2rem}

/* arquivo: sem lista, só o nome do site em foco */
.arquivo__agora{margin-top:1.8rem;color:var(--azul-claro);min-height:1.5em}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* contato */
.contato__titulo{
  font-family:var(--sans);font-weight:820;font-stretch:122%;
  font-size:clamp(2.4rem,1rem + 4.6vw,6rem);line-height:.92;letter-spacing:-.04em;text-wrap:balance;
}
.contato__acoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.2rem}
/* redes: só ícones, Instagram e LinkedIn (sem Facebook, decisão do Ton) */
.contato__redes{display:flex;gap:.7rem;margin-top:2.2rem}
.contato__redes a{display:grid;place-items:center;width:3.25rem;height:3.25rem;border:1px solid var(--linha);color:var(--suave);transition:color .25s,border-color .25s,background .25s}
.contato__redes a:hover{color:#fff;border-color:var(--azul);background:var(--azul)}
.contato__redes svg{width:1.45rem;height:1.45rem}
.contato__links{display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;margin-top:2.4rem;
  font-size:clamp(1rem,.92rem + .3vw,1.15rem);font-weight:500;font-stretch:105%;letter-spacing:0;text-transform:none}
.contato__links a{color:var(--suave);border-bottom:1px solid var(--dim);transition:color .25s,border-color .25s}
.contato__links a:hover{color:var(--fg);border-color:var(--azul-claro)}
.rodape{margin-top:2.6rem;color:var(--dim)}
.rodape a{color:var(--mute)}
.rodape a:hover{color:var(--azul-claro)}

.botao{
  position:relative;display:inline-flex;align-items:center;gap:.9rem;margin-top:1.8rem;
  padding:1rem 1.35rem;border:1px solid var(--linha);
  font:680 14px/1 var(--sans);font-stretch:125%;letter-spacing:.07em;text-transform:uppercase;color:var(--fg);
  background:rgba(7,7,10,.6);overflow:hidden;isolation:isolate;
  transition:color .3s,border-color .3s;
}
.contato__acoes .botao{margin-top:0}
.botao i{font-style:normal;transition:transform .5s var(--ease)}
.botao::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.botao:hover{color:var(--bg);border-color:var(--fg)}
.botao:hover::before{transform:none}
.botao:hover i{transform:translate(2px,-2px)}
.botao--cheio{background:var(--azul);border-color:var(--azul);color:#fff}
.botao--cheio::before{background:#fff}

/* ---------- celular ----------
   A tela é dividida de cima para baixo: a imagem do canvas ocupa até ~56% da altura
   (main.js, mede()) e o texto entra logo abaixo dela, não grudado no rodapé. */
@media (max-width:899px){
  .js .ato,.js .ato--baixo{top:58svh;bottom:auto;transform:none;width:auto;right:var(--pad)}
  .js .ato--abre{bottom:auto;top:33svh}
  .js .ato--obras{top:56svh}
  .js .ato--contato{top:37svh}

  .nome{font-size:clamp(3.6rem,19.5vw,7rem);line-height:.86}
  .ato__cmd{margin-bottom:1.2rem}
  .ato__sub{font-size:clamp(1.1rem,4.6vw,1.35rem);margin-top:1.4rem}
  .ato__dica{margin-top:2.2rem}

  .frase{font-size:clamp(1.9rem,8.4vw,2.7rem);line-height:1.04}
  .log{margin-top:1.2rem;font-size:clamp(1.05rem,4.4vw,1.25rem)}

  .ato__rotulo{margin-bottom:.8rem}
  .ato__rotulo span{display:none}
  .obra__titulo{font-size:clamp(2rem,9vw,2.8rem)}
  .obra__texto{font-size:clamp(1.02rem,4.2vw,1.2rem)}
  .obras a{gap:.55rem}
  .js .obras__conta{margin-top:1rem}

  .arquivo__agora{margin-top:1.2rem}

  .contato__titulo{font-size:clamp(2.5rem,11.5vw,3.4rem)}
  .contato__acoes{margin-top:1.6rem}
  .contato__acoes .botao{flex:1 1 100%;justify-content:space-between;padding:1.15rem 1.3rem}
  .contato__redes{margin-top:1.4rem}
  /* "Carpina, PE" desce inteiro para a linha de baixo, sem o ponto */
  .ato__onde{display:block;margin-top:.15rem}
  .ato__onde>span{display:none}
  .rodape{margin-top:1.2rem}

}

/* celular baixo (ex.: 360x640): o texto sobe um pouco e diminui */
@media (max-width:899px) and (max-height:700px){
  .js .ato,.js .ato--baixo{top:56svh}
  .js .ato--abre{top:27svh}
  .js .ato--obras{top:50svh}
  .frase{font-size:clamp(1.6rem,7.4vw,2.2rem)}
  .log{font-size:1rem}
  .obra__titulo{font-size:clamp(1.7rem,8vw,2.2rem)}
  .obra__texto{font-size:.98rem}
  .ato__dica{margin-top:1.4rem}
  .contato__titulo{font-size:clamp(2rem,9.6vw,2.6rem)}
  .js .ato--contato{top:30svh}
  .contato__acoes{margin-top:1.1rem;gap:.55rem}
  .contato__acoes .botao{padding:.95rem 1.2rem}
  .contato__redes{margin-top:1rem}
  .rodape{display:none}
}