/* Atlas, folha de autoria. v5.
 *
 * ============ POR QUE EXISTE UMA QUINTA VERSAO ============
 *
 * A v4 copiou a MECANICA do era-residence.com e ignorou a APARENCIA.
 * Eu tinha medido os gatilhos de scroll dele e nunca olhado para ele.
 * Depois de ver o site e a gravacao de tela, a distancia estava em
 * outro lugar, e nao era movimento:
 *
 *   ESCALA     os titulos dele ocupam quase a largura da tela. Os meus
 *              cabiam numa coluna de grade.
 *   OCUPACAO   as fotos dele sangram de borda a borda, em tela cheia,
 *              com o texto POR CIMA. As minhas moravam em caixas com
 *              gap, numa grade de doze colunas.
 *   RITMO      ele alterna tela de foto cheia, tela de cor chapada,
 *              tela de foto cheia. Eu empilhava secoes claras.
 *   MOLDURA    ele nao tem nenhuma. A pagina comeca na borda da tela.
 *              Eu tinha uma regua de cotas de prancha tecnica.
 *   RECORRENCIA ele repete tres coisas o tempo todo: um botao redondo
 *              de fio fino, uma marca circular no canto, e um fio
 *              vertical fino com numero e a palavra ROLE.
 *
 * Esta folha e isso. A paleta, a tipografia e o ornamento continuam
 * sendo da Atlas: amostrados do material real e desenhados aqui. O que
 * veio do ERA e a composicao, que e tecnica, nao identidade.
 * ========================================================== */

:root{
  --e-saida:cubic-bezier(.16,1,.3,1);
  --e-entra:cubic-bezier(.7,0,.84,0);
  --e-suave:cubic-bezier(.33,1,.68,1);
  --e-estado:cubic-bezier(.4,0,.2,1);
  --ease-estado:var(--e-estado);
  --borda:clamp(16px,3.4vw,62px);   /* o unico recuo da pagina */
  --claro:#F7F3EC;                  /* o texto sobre foto */
}

/* ===================================================================
 * A ESCALA
 *
 * Duas familias de titulo, e a diferenca entre elas e o que faz a
 * pagina ter voz. O colosso e para uma a tres palavras e chega a
 * ocupar a largura inteira; o titulao e para uma frase e quebra em
 * duas ou tres linhas igualmente grandes. Abaixo deles so ha texto
 * PEQUENO: e esse contraste, e nao um degrade de seis tamanhos, que
 * da a escala do ERA.
 * =================================================================== */
.colosso{font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.9rem,11.2vw,12.5rem);line-height:.84;
  letter-spacing:-.035em;margin:0;color:var(--texto-forte);
  text-transform:uppercase}

/* A MARCA DA ABERTURA.
 *
 * Medido: "ATLAS" no corpo do colosso ocupava 35% da largura da tela,
 * e o nome do ERA ocupa perto de 90%. Cinco letras nao enchem uma
 * linha por tamanho de corpo: enchem por corpo MAIS entreletra. Por
 * isso a primeira linha e muito maior e aberta, e a segunda devolve o
 * equilibrio com um corpo menor e entreletra larga.
 *
 * ch como unidade nao serve aqui: Bodoni tem avanco muito diferente
 * entre maiuscula e minuscula, e a conta sai torta. vw e medido. */
.marca{display:block;text-align:center;
  font-family:var(--f-display);font-weight:400;margin:0;
  color:var(--claro);text-transform:uppercase}
.marca b{display:block;font-weight:400;
  font-size:clamp(3.4rem,23vw,19rem);line-height:.82;
  letter-spacing:.055em;text-indent:.055em}
.marca i{display:block;font-style:normal;
  font-size:clamp(.78rem,3.4vw,2.9rem);line-height:1;
  letter-spacing:.34em;text-indent:.34em;
  margin-top:clamp(6px,1.2vh,20px);opacity:.92}
.titulao{font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.1rem,6.2vw,6.6rem);line-height:.98;
  letter-spacing:-.025em;margin:0;color:var(--texto-forte);
  text-wrap:balance}
.medio{font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.3rem,2.6vw,2.4rem);line-height:1.16;
  letter-spacing:-.015em;margin:0;color:var(--texto-forte)}
/* tudo o que nao e titulo e pequeno e em mono, de proposito */
.mini{font:400 clamp(.64rem,.82vw,.78rem)/1.6 var(--f-mono);
  letter-spacing:.2em;text-transform:uppercase;margin:0}
.prosa{max-width:54ch;font-size:clamp(.88rem,1.05vw,1rem);
  line-height:1.72;color:var(--texto-2);margin:0}
.prosa + .prosa{margin-top:1.1em}
.it{font-style:italic;color:var(--acento)}

/* ===================================================================
 * OS TRES PADROES DE MOVIMENTO, da v4, inteiros
 * =================================================================== */
.mask{position:relative;overflow:clip;background:var(--canvas-2)}
/* o <picture> some da conta do layout: sem isto ele vira o filho direto
 * da mascara e as regras abaixo param de casar com a imagem */
picture{display:contents}
.mask > img,
.mask > picture > img,
.mask > video{position:absolute;inset:-22% 0;width:100%;height:144%;
  max-width:none;object-fit:cover;will-change:transform;
  transform:translate3d(0,calc(var(--p,0) * var(--vel,1) * -12%),0)}
.mask--lenta{--vel:.6}
.mask--rapida{--vel:1.15}
/* A MASCARA DE FILME tem menos sobra e anda menos.
 *
 * Conta, nao gosto: a sobra tem de ser maior que o curso do parallax,
 * senao abre fresta. Com curso de 12% da altura da MIDIA e velocidade
 * v, a sobra de cada lado precisa de (h - caixa)/2 >= 0,12 * v * h,
 * ou seja h >= caixa / (1 - 0,24v). Com v = 0,45 isso da 1,12, e 124%
 * passa com folga. Ao mesmo tempo 124% e o teto que um clipe de
 * 1280x720 aguenta num quadro de 1020 sem ser ampliado. */
.mask--filme > video{inset:-12% 0;height:124%}
.mask--filme{--vel:.45}

.li{display:block;overflow:clip;padding-bottom:.06em}
.li > i{display:block;font-style:inherit;
  transform:translate3d(0,112%,0);
  transition:transform 1.15s var(--e-saida);
  transition-delay:calc(var(--li,0) * 85ms)}
.na-tela .li > i{transform:translate3d(0,0,0)}
.fatiar:not(.fatiado){opacity:1}
.fatiado > [lang]{display:block}
.w{font-style:inherit}

.fio{background:currentColor;opacity:.3;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.5s var(--e-saida)}
.fio--h{height:1px;width:100%}
.fio--v{width:1px;clip-path:inset(0 0 100% 0)}
.na-tela .fio,.fio.na-tela{clip-path:inset(0 0 0 0)}

/* ===================================================================
 * A PAGINA, SEM MOLDURA
 * =================================================================== */
html{scroll-behavior:auto}
body{background:var(--canvas);overflow-x:clip;color:var(--texto)}

/* a secao de COR: o conteudo tem recuo, o fundo nao */
.cor{position:relative;overflow:clip;
  padding:clamp(80px,13vh,180px) var(--borda);
  background:var(--canvas);color:var(--texto)}
.cor--2{background:var(--canvas-2)}
.cor--esc{background:var(--canvas-esc);color:var(--texto-esc)}
.dentro{position:relative;z-index:3;max-width:1760px;margin-inline:auto}
.meio{max-width:62ch;margin-inline:auto;text-align:center}

/* a secao de FOTO CHEIA: sem recuo nenhum, a imagem e a tela */
.cheia{position:relative;height:100svh;min-height:520px;overflow:clip;
  background:var(--panel);color:var(--claro)}
.cheia--alta{height:118svh}
.cheia__q{position:absolute;inset:0;z-index:0}
.cheia__q img,.cheia__q video{position:absolute;inset:-14% 0;
  width:100%;height:128%;max-width:none;object-fit:cover;
  will-change:transform;
  transform:translate3d(0,calc(var(--p,0) * var(--vel,1) * -9%),0)}
.cheia__veu{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(14,12,10,.5) 0%, rgba(14,12,10,.14) 32%,
    rgba(14,12,10,.3) 64%, rgba(14,12,10,.74) 100%)}
.cheia__txt{position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--borda);padding-bottom:clamp(60px,12vh,150px)}
.cheia__txt .colosso,.cheia__txt .titulao,.cheia__txt .medio{
  color:var(--claro)}
.cheia__txt .prosa{color:rgba(247,243,236,.86)}
.cheia__txt .mini{color:rgba(247,243,236,.78)}
/* a variante centralizada, para a frase unica sobre a foto */
.cheia__txt--meio{justify-content:center;align-items:center;
  text-align:center;padding-bottom:var(--borda)}
/* O veu de pe escurece o RODAPE da foto, que e onde o texto costuma
 * morar. No hero o texto fica no CENTRO, e ali o veu e quase nada.
 * Este halo radial e so para o centro, e sobrevive a troca da foto. */
.cheia__txt--meio::before{content:"";position:absolute;
  left:50%;top:50%;width:150%;height:110%;z-index:-1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(14,12,10,.52) 0%, rgba(14,12,10,.34) 42%,
    rgba(14,12,10,0) 72%)}

/* a legenda miuda e espacada no alto da foto, como no ERA */
.cheia__alto{position:absolute;top:clamp(84px,11vh,124px);
  left:var(--borda);right:var(--borda);z-index:3;
  text-align:center;color:rgba(247,243,236,.8);
  font:400 clamp(.6rem,.78vw,.74rem)/1 var(--f-mono);
  letter-spacing:.56em;text-transform:uppercase;text-indent:.56em}

/* ===================================================================
 * A CUPULA
 *
 * A secao seguinte sobe POR CIMA da foto como uma abobada. E a
 * transicao que o ERA usa entre a foto noturna e a secao clara, e e a
 * mesma forma do ornamento da Atlas, o que aqui e sorte e conveniencia.
 * =================================================================== */
.cupula{border-radius:50% 50% 0 0 / clamp(40px,9vh,120px) clamp(40px,9vh,120px) 0 0;
  margin-top:clamp(-120px,-9vh,-40px);z-index:4}

/* ===================================================================
 * O BOTAO REDONDO
 *
 * O elemento que mais se repete no ERA: um circulo de fio fino com
 * duas palavras dentro, solto no meio da tela. Aparece em quase todas
 * as telas dele.
 * =================================================================== */
.redondo{position:relative;display:inline-grid;place-items:center;
  width:clamp(118px,13vw,168px);aspect-ratio:1;border-radius:50%;
  border:1px solid currentColor;
  font:400 clamp(.56rem,.72vw,.68rem)/1.5 var(--f-mono);
  letter-spacing:.17em;text-transform:uppercase;text-align:center;
  text-decoration:none;color:inherit;
  /* Em px, nao em porcentagem. Porcentagem de padding resolve contra a
   * largura do PAI, nao do proprio botao: dentro de um container largo
   * este circulo de 168px pedia 199px de padding de cada lado e
   * estourava para 401px. O bug nao aparecia na galeria antiga porque
   * la o botao morava numa celula estreita. */
  padding:clamp(15px,1.8vw,26px);
  transition:background .6s var(--e-suave),color .6s var(--e-suave),
    transform .6s var(--e-saida)}
.redondo::before{content:"";position:absolute;inset:-9px;
  border:1px solid currentColor;border-radius:50%;opacity:.22;
  transition:inset .6s var(--e-saida),opacity .6s}
.redondo:hover{background:currentColor;transform:scale(1.03)}
.redondo:hover span{color:var(--canvas)}
.cheia .redondo:hover span{color:var(--panel)}
.redondo:hover::before{inset:-16px;opacity:.5}
.redondo span{display:block;transition:color .6s var(--e-suave)}
.redondo--solto{position:absolute;left:50%;top:50%;z-index:4;
  transform:translate(-50%,-50%)}

/* o botao de linha, para quando o redondo seria demais */
.btn{display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:2px;
  font:400 clamp(.64rem,.8vw,.76rem)/1 var(--f-mono);
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  border:1px solid currentColor;color:inherit;background:transparent;
  cursor:pointer;opacity:.9;
  transition:background .5s var(--e-suave),color .5s var(--e-suave),
    opacity .5s}
.btn:hover{background:currentColor;opacity:1}
.btn:hover span{color:var(--canvas)}
.cheia .btn:hover span{color:var(--panel)}
.btn--acento{background:var(--acento);border-color:var(--acento);
  color:var(--sobre-acento)}
.btn--acento:hover{background:var(--acento-hover);
  border-color:var(--acento-hover)}
.btn--acento:hover span{color:var(--sobre-acento)}

/* ===================================================================
 * O PAINEL DE VIDRO
 *
 * O cartao semitransparente que o ERA solta sobre a foto para blocos
 * de texto. Sem ele, texto corrido sobre foto nao se le.
 * =================================================================== */
.vidro{position:relative;z-index:3;
  max-width:min(34ch,86vw);padding:clamp(22px,2.6vw,38px);
  border-radius:3px;border:1px solid rgba(247,243,236,.16);
  background:rgba(22,19,16,.42);backdrop-filter:blur(14px);
  color:var(--claro)}
.vidro .prosa{color:rgba(247,243,236,.84)}

/* ===================================================================
 * AS TRES RECORRENCIAS DO CANTO
 * =================================================================== */

/* 1. a marca circular, fixa no canto superior esquerdo */
.selo{position:fixed;z-index:60;
  width:clamp(62px,6.6vw,96px);height:auto;
  top:clamp(14px,2.4vh,26px);left:var(--borda);
  color:var(--claro);pointer-events:none;
  transition:color .7s var(--e-estado)}
body.claro .selo{color:var(--texto-forte)}
.selo__t{font:400 9.4px var(--f-mono);letter-spacing:.2em;
  fill:currentColor;text-transform:uppercase;
  transform-origin:50% 50%;animation:gira 38s linear infinite}
.selo__m{opacity:.9}
@keyframes gira{to{transform:rotate(360deg)}}

/* 2. a navegacao, texto miudo em linhas, no canto superior direito */
.nav{position:fixed;z-index:60;
  top:clamp(16px,2.6vh,30px);right:var(--borda);
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  color:var(--claro);transition:color .7s var(--e-estado)}
body.claro .nav{color:var(--texto-forte)}
.nav a{font:400 clamp(.58rem,.74vw,.7rem)/1.45 var(--f-mono);
  letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  color:inherit;opacity:.76;transition:opacity .35s}
.nav a:hover{opacity:1}
.nav__l{margin-top:7px;display:flex;gap:4px}
.nav__l button{background:none;border:0;cursor:pointer;color:inherit;
  font:400 clamp(.56rem,.7vw,.66rem)/1 var(--f-mono);
  letter-spacing:.14em;padding:4px 5px;opacity:.5;
  transition:opacity .35s}
.nav__l button[aria-pressed="true"]{opacity:1;
  border-bottom:1px solid currentColor}

/* 3. o fio vertical na esquerda, com o progresso e a palavra ROLE */
/* ===================================================================
 * O ORNAMENTO SOLTO
 *
 * O ERA repete uma flor vetorial oito vezes pela pagina, grande e
 * apagada. Aqui e a mesma abobada de tres arcos do selo.
 * =================================================================== */
.orn{position:absolute;z-index:1;pointer-events:none;
  width:var(--ow,26vmin);height:auto;
  color:currentColor;opacity:var(--oop,.1);
  transform:translate3d(0,calc(var(--p,0) * var(--ovel,1) * -8vh),0)}
.orn--de{right:calc(var(--borda) * -.4);top:8%}
.orn--ee{left:calc(var(--borda) * -.4);bottom:6%}

/* ===================================================================
 * AS PECAS DE CONTEUDO
 * =================================================================== */

/* a galeria densa, mas agora SEM grade visivel: as fotos tem tamanhos
 * muito diferentes e nenhuma comeca na linha da vizinha */
.gale{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(10px,1.4vw,26px);margin-top:clamp(40px,7vh,96px)}
.gale > *{position:relative;border-radius:2px}
.g1{grid-column:1/span 5;height:min(74svh,660px)}
.g2{grid-column:7/span 3;height:min(44svh,390px);margin-top:16svh}
.g3{grid-column:10/span 3;height:min(58svh,520px);margin-top:4svh}
.g4{grid-column:2/span 4;height:min(52svh,470px);margin-top:-6svh}
.g5{grid-column:7/span 6;height:min(82svh,780px);margin-top:-16svh}
.g6{grid-column:1/span 3;height:min(40svh,350px)}
.g7{grid-column:5/span 4;height:min(62svh,560px);margin-top:-8svh}
.g8{grid-column:10/span 3;height:min(48svh,430px);margin-top:6svh}

/* os passos do metodo: numero gigante, texto pequeno, foto ao lado */
.passos{margin-top:clamp(40px,8vh,110px);
  display:grid;gap:clamp(44px,9vh,130px)}
.passo{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(18px,2.6vw,46px);align-items:center}
.passo__t{grid-column:1/span 4}
.passo__q{grid-column:6/span 7;height:min(72svh,680px);border-radius:2px}
.passo--esq .passo__t{grid-column:9/span 4}
.passo--esq .passo__q{grid-column:1/span 7}
.passo__n{display:block;font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.6rem,5vw,5rem);line-height:1;color:var(--acento);
  opacity:.5;margin-bottom:.1em}

/* os materiais, uma faixa que desce desalinhada */
.mats{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(12px,1.6vw,30px);margin-top:clamp(40px,7vh,96px)}
.mt{display:flex;flex-direction:column;gap:12px}
.mt__q{border-radius:2px}
.m1{grid-column:1/span 4}   .m1 .mt__q{height:min(66svh,600px)}
.m2{grid-column:6/span 3;margin-top:18svh}  .m2 .mt__q{height:min(42svh,380px)}
.m3{grid-column:10/span 3;margin-top:5svh}  .m3 .mt__q{height:min(54svh,490px)}
.m4{grid-column:2/span 3;margin-top:-10svh} .m4 .mt__q{height:min(46svh,420px)}
.m5{grid-column:6/span 4;margin-top:2svh}   .m5 .mt__q{height:min(70svh,650px)}
.m6{grid-column:11/span 2;margin-top:-4svh} .m6 .mt__q{height:min(36svh,320px)}
.mt h3{font-family:var(--f-display);font-weight:400;
  font-size:clamp(1rem,1.5vw,1.4rem);margin:0;color:var(--texto-forte)}
.mt p{margin:0;font:400 clamp(.6rem,.75vw,.72rem)/1.6 var(--f-mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2)}

/* a lista de itens que acompanha uma foto cheia, alinhada a direita */
.itens{list-style:none;margin:0;padding:0;text-align:right;
  display:grid;gap:4px}
.itens li{font-family:var(--f-display);font-weight:400;
  font-size:clamp(1rem,1.9vw,1.75rem);line-height:1.22;
  color:var(--claro);opacity:.9}

/* os tres servicos */
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,46px);margin-top:clamp(40px,7vh,96px)}
.tres > *{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,22px);
  min-width:0}
.tres > :nth-child(2){padding-top:clamp(22px,7vh,86px)}
.tres > :nth-child(3){padding-top:clamp(10px,3vh,40px)}
.tres__q{height:min(58svh,540px);border-radius:2px}

/* os numeros */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,60px);margin-top:clamp(40px,7vh,96px)}
.nums > div{border-top:1px solid currentColor;padding-top:18px}
.nums b{display:block;font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.4rem,5.6vw,5.4rem);line-height:.96;
  color:var(--texto-forte)}
.nums span{display:block;margin-top:12px;
  font:400 clamp(.6rem,.74vw,.7rem)/1.5 var(--f-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--texto-2)}

/* os depoimentos, pequenos e centrados, como o texto de apoio do ERA */
.depos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3.2vw,58px);margin-top:clamp(40px,7vh,96px)}
/* AS FALAS
 *
 * O conteudo nunca foi o problema: sao quatro clientes reais, de 48 a
 * 65 palavras cada, e falam de coisa concreta. O problema era a
 * apresentacao. As quatro ficavam num div sem nenhum CSS, entao cada
 * linha atravessava a pagina inteira, perto de 180 caracteres, e o
 * olho perdia a linha em toda volta.
 *
 * Agora sao duas colunas com medida de 44ch, a segunda descida, e cada
 * fala acende ao entrar. A escada e o que tira o ar de parede de
 * texto: com as quatro alinhadas, o bloco volta a ser um paredao. */
.depo__olho{color:var(--acento-texto)}
.depo__h{max-width:20ch;margin-top:clamp(8px,1.4vh,16px)}
.depo__nota{margin:clamp(14px,2.4vh,26px) 0 0;max-width:40ch;
  font:400 clamp(.6rem,.74vw,.7rem)/1.6 var(--f-mono);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-2);opacity:.8}

.falas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(30px,5vw,96px);
  row-gap:clamp(36px,6vh,84px);
  align-items:start;
  margin-top:clamp(40px,7vh,96px)}
.fala{margin:0;min-width:0;max-width:44ch;
  border-top:1px solid var(--linha);
  padding-top:clamp(15px,2.2vh,24px);
  /* acende ao entrar: ver data-ve no motor */
  opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .9s var(--e-suave),transform .9s var(--e-saida)}
.fala.na-tela{opacity:1;transform:none}
/* a escada */
.fala:nth-child(even){margin-top:clamp(26px,5.5vh,76px)}
.fala__n{display:block;
  font:400 clamp(.56rem,.7vw,.66rem)/1 var(--f-mono);
  letter-spacing:.2em;color:var(--acento-texto)}
.fala__q{margin:clamp(11px,1.8vh,20px) 0 0;
  font-family:var(--f-display);font-weight:400;
  /* 1,58 de entrelinha e nao 1,42: sao transcricoes de fala, com
   * frases longas e virgula no lugar de ponto, e precisam de ar */
  font-size:clamp(1rem,1.3vw,1.22rem);line-height:1.58;
  letter-spacing:-.005em;color:var(--texto-forte)}
.fala__a{margin-top:clamp(13px,2.1vh,22px);
  font:400 clamp(.6rem,.74vw,.7rem)/1.4 var(--f-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--texto-2)}

@media (max-width:900px){
  .depo__h{max-width:100%}
  .falas{grid-template-columns:minmax(0,1fr);
    row-gap:clamp(26px,4.6svh,44px);
    margin-top:clamp(28px,5svh,54px)}
  .fala{max-width:100%}
  .fala:nth-child(even){margin-top:0}
  .fala__q{font-size:clamp(.95rem,4vw,1.1rem);line-height:1.55}
}

@media (prefers-reduced-motion:reduce){
  .fala{opacity:1;transform:none;transition:none}
}

/* os fornecedores */
.fornec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,36px);margin-top:clamp(40px,7vh,96px)}
.forn{position:relative;aspect-ratio:4/3;display:grid;place-items:center;
  padding:12%;border:1px solid var(--linha);border-radius:2px;
  filter:grayscale(1) contrast(.92);opacity:.7;
  transition:filter .7s var(--e-suave),opacity .7s var(--e-suave),
    border-color .7s var(--e-suave)}
/* logo de fornecedor tem 200px de lado: contido, nunca em mascara */
.forn picture{display:contents}
.forn img{position:static;width:min(100%,128px);height:auto;
  max-width:none;object-fit:contain;mix-blend-mode:multiply}
.forn:hover{filter:none;opacity:1;border-color:var(--linha-forte)}

/* o rodape */
.pe{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:18px 40px;margin-top:clamp(50px,9vh,120px);
  padding-top:26px;border-top:1px solid currentColor;
  font:400 clamp(.6rem,.74vw,.7rem)/1.6 var(--f-mono);
  letter-spacing:.14em;text-transform:uppercase;opacity:.7}

/* ------------------------------------------------- idioma e utilidades */
html[data-l="pt"] [lang="en"],
html[data-l="en"] [lang="pt-BR"]{display:none}
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 18px;background:var(--acento);color:var(--sobre-acento);
  text-decoration:none}
.skip:focus{left:8px;top:8px}
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--acento);outline-offset:3px}
.cue{position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(20px,4.5vh,52px);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font:400 9px/1 var(--f-mono);letter-spacing:.3em;
  text-transform:uppercase;color:rgba(247,243,236,.74);
  transition:opacity .6s}
.cue i{display:block;width:1px;height:28px;background:currentColor;
  animation:cue 2.4s var(--e-suave) infinite}
body.rolou .cue{opacity:0}
@keyframes cue{
  0%{transform:scaleY(0);transform-origin:50% 0}
  45%{transform:scaleY(1);transform-origin:50% 0}
  55%{transform:scaleY(1);transform-origin:50% 100%}
  100%{transform:scaleY(0);transform-origin:50% 100%}
}

/* ===================================================================
 * CELULAR
 *
 * Numa tela de 375 a tipografia colossal vira uma palavra por linha, e
 * isso e bom: e o mesmo efeito. O que precisa sair e a grade de doze
 * colunas, o fio lateral e metade da amplitude do parallax.
 * =================================================================== */
@media (max-width:900px){
  .passo{grid-template-columns:minmax(0,1fr);gap:clamp(18px,4vh,36px)}
  .passo__t,.passo__q,
  .passo--esq .passo__t,.passo--esq .passo__q{grid-column:1/-1}
  .passo__q{height:min(56svh,460px)}
  .tres,.depos{grid-template-columns:minmax(0,1fr)}
  .nums,.fornec{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .trilho{display:none}
  .nav a:not(.nav__c){display:none}
  .selo{width:54px;top:12px}
  .colosso{font-size:clamp(2.4rem,15vw,4.4rem)}
  .titulao{font-size:clamp(1.7rem,8.4vw,3rem)}
  .cheia__alto{letter-spacing:.3em;text-indent:.3em}
  .cheia__txt{padding-bottom:clamp(40px,9vh,90px)}
  .gale,.mats{grid-template-columns:minmax(0,1fr)}
  .g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8{
    grid-column:1/-1;margin-top:0;height:min(46svh,380px)}
  .g2,.g4,.g6,.g8{width:76%}
  .g3,.g7{width:88%;margin-left:auto}
  .m1,.m2,.m3,.m4,.m5,.m6{grid-column:1/-1;margin-top:0}
  .m1 .mt__q,.m2 .mt__q,.m3 .mt__q,
  .m4 .mt__q,.m5 .mt__q,.m6 .mt__q{height:min(40svh,330px)}
  .m2,.m4,.m6{width:74%;margin-left:auto}
  .itens{text-align:left}
  /* metade da amplitude, com a sobra redimensionada pela mesma conta */
  .mask > img,.mask > picture > img,.mask > video{inset:-12% 0;height:124%;
    transform:translate3d(0,calc(var(--p,0) * var(--vel,1) * -7%),0)}
  .cheia__q img,.cheia__q video{inset:-10% 0;height:120%;
    transform:translate3d(0,calc(var(--p,0) * var(--vel,1) * -6%),0)}
}

/* ===================================================================
 * QUEM PEDIU MENOS MOVIMENTO
 * =================================================================== */
@media (prefers-reduced-motion:reduce){
  .mask > img,.mask > picture > img,.mask > video,
  .cheia__q img,.cheia__q video,.orn{transform:none!important}
  .li > i{transform:none!important;transition:none}
  .fio{clip-path:inset(0 0 0 0)!important;transition:none}
  .selo__t{animation:none}
  .cue i{animation:none;transform:scaleY(1)}
  .trilho::after{transform:none}
  *{scroll-behavior:auto!important}
}

/* ===================================================================
 * A CUPULA QUE SOBE
 *
 * A transicao que mais aparece no ERA, e a que foi pedida pelo nome:
 * a secao seguinte nao chega inteira, chega pela metade de baixo,
 * como uma abobada enorme, e vai abrindo ate a borda ficar reta. A
 * foto anterior fica PARADA atras, sendo coberta.
 *
 * Duas pecas: a foto gruda (sticky) e a secao sobe por cima dela com
 * um raio que some. O --e vem do motor e vai de 0 a 1 durante a
 * subida.
 * =================================================================== */
.gruda{position:sticky;top:0}

.sobe{position:relative;z-index:6;
  --ar:calc(1 - var(--e,0));
  border-radius:calc(var(--ar) * 46%) calc(var(--ar) * 46%) 0 0 /
    calc(var(--ar) * 15vh) calc(var(--ar) * 15vh) 0 0;
  /* fundo opaco e obrigatorio: e ele que cobre a foto de baixo */
  background:var(--canvas)}
.sobe.cor--2{background:var(--canvas-2)}
.sobe.cor--esc{background:var(--canvas-esc)}
/* o conteudo so aparece depois que a abobada ja abriu um quinto */
.sobe > .dentro{
  --ab:clamp(0,(var(--e,0) - .2) * 1.9,1);
  opacity:var(--ab);
  transform:translate3d(0,calc((1 - var(--ab)) * 46px),0)}
/* o titulo colossal sobe um pouco depois do resto */
.sobe .colosso{
  --ac:clamp(0,(var(--e,0) - .3) * 2.3,1);
  opacity:var(--ac);
  transform:translate3d(0,calc((1 - var(--ac)) * 64px),0)}

/* ===================================================================
 * AS BOLINHAS DO HERO
 *
 * No lugar de uma lista de atalhos, quatro pontos soltos sobre a
 * foto. Parado e so um ponto; no ponteiro ou no teclado o nome abre
 * para o lado e leva ate a secao.
 *
 * O rotulo abre por LARGURA dentro de uma mascara, nao por
 * opacidade: texto pequeno e claro sobre foto, aparecendo em fade,
 * pisca.
 * =================================================================== */
.bolas{position:absolute;inset:0;z-index:5;pointer-events:none}
.bola{position:absolute;pointer-events:auto;
  display:flex;align-items:center;text-decoration:none;
  color:var(--claro)}
.bola__p{position:relative;flex:none;
  width:11px;height:11px;border-radius:50%;
  border:1px solid currentColor;
  background:rgba(247,243,236,.22);
  transition:background .5s var(--e-suave),transform .5s var(--e-saida)}
/* o halo que pulsa, para o ponto ser notado sem piscar */
.bola__p::before{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid currentColor;opacity:.42;
  animation:pulso 3.4s var(--e-suave) infinite}
.bola__p::after{content:"";position:absolute;inset:-15px;border-radius:50%;
  border:1px solid currentColor;opacity:0;transform:scale(.72);
  transition:opacity .55s,transform .55s var(--e-saida)}
.bola--on .bola__p{background:currentColor;transform:scale(1.12)}
.bola--on .bola__p::after{opacity:.55;transform:scale(1)}
.bola__r{display:block;overflow:clip;max-width:0;
  white-space:nowrap;
  font:400 clamp(.6rem,.76vw,.72rem)/1 var(--f-mono);
  letter-spacing:.2em;text-transform:uppercase;
  transition:max-width .75s var(--e-saida),padding .75s var(--e-saida)}
.bola--on .bola__r{max-width:22ch;padding-left:14px}
/* a bolinha da direita abre o rotulo para a ESQUERDA, senao sai da tela */
.bola--e{flex-direction:row-reverse}
.bola--e.bola--on .bola__r{padding-left:0;padding-right:14px}
@keyframes pulso{
  0%{transform:scale(1);opacity:.42}
  55%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}
/* As quatro posicoes.
 *
 * Nao e questao de gosto: o bloco do centro (nome, subtitulo e frase)
 * ocupa de 25% a 75% da altura e 84% da largura, entao NAO HA canto
 * livre nessa faixa vertical. Medido, duas bolinhas caiam dentro das
 * letras. As unicas faixas livres sao a de cima, entre a legenda do
 * alto e o nome, e a de baixo, entre a frase e o cue. */
.bola--1{left:12%;top:17%}
.bola--3{right:12%;top:17%}
.bola--2{left:18%;bottom:15%}
.bola--4{right:18%;bottom:15%}

/* ===================================================================
 * A FAIXA QUE ANDA PARA O LADO
 *
 * Pedido: rolar e a pagina ir para o lado, leve, sutil, sem muita
 * informacao na tela. Entao sao quatro pecas grandes e uma palavra, e
 * nada mais: o espaco entre elas e o conteudo.
 *
 * A altura da secao e medida no JS a partir da sobra horizontal real
 * do trilho, para a ultima peca encostar na borda exatamente quando a
 * cena acaba, nem antes nem depois.
 * =================================================================== */
/* A altura e UMA TELA mais a sobra horizontal em pixels, nao um
 * multiplo de telas. Assim um pixel de rolagem vertical vale um pixel
 * de deslocamento lateral, e a conta nao depende de quanto o
 * navegador acha que vale 100svh, que nem sempre e o que o JS le em
 * innerHeight. */
.lado{position:relative;height:calc(100svh + var(--curso,0px));
  background:var(--canvas-esc);color:var(--texto-esc)}
.lado__palco{position:sticky;top:0;height:100svh;overflow:clip;
  display:flex;align-items:center}
.lado__trilho{flex:none;display:flex;align-items:center;
  gap:clamp(40px,9vw,170px);
  padding-inline:clamp(28px,12vw,230px);
  will-change:transform;
  transform:translate3d(calc(var(--s,0) * var(--desl,0px) * -1),0,0)}
.lado__t{flex:none;max-width:min(78vw,20ch)}
.lado__q{flex:none;border-radius:2px;position:relative}
.lq1{width:min(58vh,520px);height:min(74svh,680px)}
.lq2{width:min(40vh,350px);height:min(50svh,460px);align-self:flex-start;
  margin-top:13svh}
.lq3{width:min(66vh,600px);height:min(62svh,570px)}
.lq4{width:min(44vh,390px);height:min(70svh,640px);align-self:flex-end;
  margin-bottom:8svh}
.lado__leg{flex:none;
  font:400 clamp(.58rem,.72vw,.68rem)/1.5 var(--f-mono);
  letter-spacing:.17em;text-transform:uppercase;opacity:.6;
  writing-mode:vertical-rl;align-self:flex-end;margin-bottom:10svh}
/* o aviso de que esta faixa anda para o lado, e nao para baixo */
.lado__dica{position:absolute;left:50%;bottom:clamp(22px,5vh,54px);
  z-index:3;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;
  font:400 9px/1 var(--f-mono);letter-spacing:.28em;
  text-transform:uppercase;opacity:.62;
  transition:opacity .7s}
.lado__dica i{display:block;width:34px;height:1px;background:currentColor;
  transform-origin:0 50%;animation:corre 2.6s var(--e-suave) infinite}
.lado--anda .lado__dica{opacity:0}
@keyframes corre{
  0%{transform:scaleX(0);opacity:1}
  55%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}
}

/* ===================================================================
 * MAIS TRANSICOES NO RESTO DA PAGINA
 * =================================================================== */

/* a legenda miuda do alto da foto abre o espacejamento ao entrar */
.cheia__alto{opacity:0;letter-spacing:.2em;
  transition:opacity 1.4s var(--e-saida) .3s,
    letter-spacing 1.9s var(--e-saida) .3s}
.cheia__alto.na-tela{opacity:.8;letter-spacing:.56em}

/* o botao redondo nasce menor e assenta */
.redondo{opacity:0;transform:scale(.84);
  transition:opacity .9s var(--e-saida),transform .9s var(--e-saida),
    background .6s var(--e-suave),color .6s var(--e-suave)}
.redondo.na-tela,.na-tela .redondo{opacity:1;transform:scale(1)}
.redondo.na-tela:hover,.na-tela .redondo:hover{transform:scale(1.03)}

/* o numero conta de zero ao entrar */
.conta{font-variant-numeric:tabular-nums}

/* a peca da faixa entra deslocada e assenta */
.lado__q{opacity:0;transform:translate3d(0,54px,0);
  transition:opacity 1s var(--e-saida),transform 1s var(--e-saida)}
.lado__q.na-tela{opacity:1;transform:translate3d(0,0,0)}

@media (max-width:620px){
  .bola--1{left:9%;top:14%}
  .bola--3{right:9%;top:14%}
  .bola--2{left:13%;bottom:13%}
  .bola--4{right:13%;bottom:13%}
  .bola--on .bola__r{max-width:13ch}
  .lado__trilho{gap:clamp(22px,8vw,60px);padding-inline:22px}
  .lq1,.lq2,.lq3,.lq4{width:78vw;height:min(52svh,440px);
    align-self:center;margin:0}
  .lado__t{max-width:82vw}
  .lado__leg{display:none}
  .sobe{border-radius:calc(var(--ar) * 40%) calc(var(--ar) * 40%) 0 0 /
    calc(var(--ar) * 8vh) calc(var(--ar) * 8vh) 0 0}
}

@media (prefers-reduced-motion:reduce){
  .sobe{border-radius:0!important}
  .sobe > .dentro,.sobe .colosso{opacity:1!important;transform:none!important}
  .gruda{position:static}
  .lado{height:auto}
  .lado__palco{position:static;height:auto;overflow-x:auto;
    scroll-snap-type:x mandatory}
  .lado__trilho{transform:none}
  .lado__q{scroll-snap-align:center;opacity:1;transform:none}
  .bola__p::before{animation:none}
  .lado__dica i{animation:none}
  .cheia__alto{opacity:.8;letter-spacing:.56em;transition:none}
  .redondo{opacity:1;transform:none}
}



/* ===================================================================
 * A ABERTURA, PELA GRAVACAO
 *
 * Esta e a primeira versao do hero feita com os quadros da animacao na
 * mao, e nao deduzida de um site parado. O Herik gravou o ERA
 * recarregando do zero e a sequencia e esta:
 *
 *   0,0s a 0,9s   a tela inteira numa cor profunda. So isso.
 *   1,4s          um ARCO abre do centro, colado na base da tela,
 *                 ocupando cerca de um terco da largura, e por dentro
 *                 dele aparece a foto
 *   2,6s          o arco ja tomou quase tudo, sobrando uma faixa da
 *                 cor nas laterais, e o texto aparece dentro dele
 *   4,0s          tela cheia, sem moldura nenhuma, hero completo
 *
 * Tres coisas que eu tinha errado e que a gravacao corrigiu:
 *   1. a abertura e na CARGA da pagina, nao no scroll
 *   2. a forma e um ARCO, nao um retangulo
 *   3. antes do arco ha uma cortina de cor chapada, que eu nao tinha
 *
 * E o detalhe que fecha: a forma e a mesma abobada de tres arcos que
 * eu ja tinha desenhado como ornamento da Atlas. A abertura do site e
 * a marca dele.
 *
 * A foto fica em tamanho FINAL o tempo todo e quem cresce e o recorte.
 * Escalar a foto a distorceria, e o que a gravacao mostra nao e um
 * zoom: e uma janela que abre.
 * =================================================================== */
/* A secao tem curso: a abertura acontece na carga, e o PAN acontece
 * no scroll. Sem curso proprio o hero sairia da tela antes de a foto
 * terminar de deslizar. */
.ab{position:relative;height:180svh;overflow:clip;
  background:var(--canvas-esc)}
.ab__palco{position:sticky;top:0;height:100svh;min-height:540px;
  overflow:clip;background:var(--canvas-esc)}

.ab__q{position:absolute;inset:0;z-index:1;margin:0;
  /* O estado de partida: um arco estreito, alto, colado na base.
   *
   * O raio vai em PORCENTAGEM, e nao em vw, e isso e o conserto de um
   * bug real: com `round 34vw` eu pedia 329px de raio numa abertura de
   * 267px de largura. Quando os dois raios de um lado somam mais que o
   * lado, o navegador encolhe os dois por um fator (aqui 0,41) e a
   * forma degenera. Em porcentagem o raio e sempre relativo ao proprio
   * recorte: 50% na horizontal e exatamente um semicirculo no topo, e
   * nunca estoura, em nenhuma largura de tela. */
  clip-path:inset(34% 36% 0 36% round 50% 50% 0 0 / 38% 38% 0 0);
  /* A CURVA vem da gravacao, nao do catalogo.
   *
   * Na gravacao o arco tem cerca de 35% da largura da tela em 1,4s e
   * 85% em 2,6s. Normalizado no curso da animacao, isso e 10% de
   * progresso em um quinto do tempo e 79% em sete decimos: uma curva
   * que comeca contida e abre no meio.
   *
   * Com a easeOutExpo que eu tinha usado antes, 88% da abertura
   * acontecia no PRIMEIRO QUARTO do tempo: o arco aparecia por meio
   * segundo e o resto era imperceptivel. Medido. */
  animation:portal 2.5s cubic-bezier(.65,0,.35,1) .85s both}
/* O PAN: a foto comeca enquadrando o CEU e desliza ate centrar a casa.
 *
 * Pedido do Herik, com as palavras dele: "o hero comeca la no ceu e aí
 * quando voce scrolla um pouquinho, pum, centraliza a casa".
 *
 * A foto tem 168% da altura da caixa e nasce colada no topo. O recorte
 * visivel e 59,5% da foto, e nesta foto o ceu ocupa os primeiros 28%:
 * entao o quadro de partida e metade ceu.
 *
 * O curso desliza 22% da caixa, que sao 13% da foto. Chegada: de 13% a
 * 73% da foto, com o centro do quadro em 43%. A casa ocupa de 10% a
 * 60%, entao ela termina enquadrada.
 *
 * A PRIMEIRA CONTA QUE EU FIZ ESTAVA ERRADA: com 156% e 36% de curso a
 * chegada era de 36% a 100% da foto, ou seja, a piscina e o deck. O
 * pedido era terminar na casa, e eu tinha terminado embaixo dela.
 *
 * 168% e o teto desta foto: numa tela de 1920 por 1080 isso pede 1814px
 * de altura e o arquivo tem 1601, ou seja 1,13x. Mais que isso e a
 * imagem comeca a amolecer. */
.ab__q img{position:absolute;top:0;left:0;right:0;bottom:auto;
  width:100%;height:168%;max-width:none;object-fit:cover;
  will-change:transform;
  transform:translate3d(0,calc(var(--pan,0) * -22%),0)}

@keyframes portal{
  /* a chegada repete a MESMA estrutura de oito valores da partida: o
   * navegador so interpola clip-path entre formas de mesma forma */
  to{clip-path:inset(0% 0% 0% 0% round 0% 0% 0% 0% / 0% 0% 0% 0%)}
}

/* o veu so entra depois que o arco abriu: antes dele a foto e um
 * recorte pequeno e escurecer nao ajuda em nada */
.ab__veu{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(14,12,10,.4) 0%, rgba(14,12,10,.08) 28%,
    rgba(14,12,10,.24) 60%, rgba(14,12,10,.78) 100%);
  opacity:0;animation:surge 1.5s var(--e-estado) 2.1s both}

@keyframes surge{ to{opacity:1} }

/* o texto entra por ultimo, de baixo, cada peca no seu tempo */
.ab__pe,.cartao,.ab__local{
  opacity:0;animation:sobe 1.2s var(--e-saida) both}
.ab__local{animation-delay:2.5s}
.ab__pe{animation-delay:2.7s}
.cartao{animation-delay:3.1s}

@keyframes sobe{
  from{opacity:0;transform:translate3d(0,28px,0)}
  to{opacity:var(--sai,1);transform:translate3d(0,0,0)}
}

/* a marca tambem nasce no centro e viaja para o canto, mas agora no
 * TEMPO da abertura, nao no scroll */
.selo{animation:marca 2.2s cubic-bezier(.16,1,.3,1) 1.5s both}
@keyframes marca{
  from{transform:translate(calc(50vw - var(--borda) - clamp(31px,3.3vw,48px)),4.5vh)
    scale(1.62)}
  to{transform:translate(0,0) scale(1)}
}

/* o convite para rolar aparece quando tudo ja esta no lugar */
.ab__cue{position:absolute;left:50%;z-index:6;
  bottom:clamp(20px,4.5vh,52px);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font:400 9px/1 var(--f-mono);letter-spacing:.3em;
  text-transform:uppercase;color:rgba(247,243,236,.7);
  pointer-events:none;opacity:0;
  animation:sobe 1.2s var(--e-saida) 3.5s both;
  transition:opacity .5s}
.ab__cue i{display:block;width:1px;height:28px;background:currentColor;
  animation:cue 2.4s var(--e-suave) 4s infinite}
body.rolou .ab__cue{opacity:0}

/* o cue so some quando o pan termina, nao no primeiro pixel de scroll */
body.rolou .ab__cue{opacity:calc(1 - var(--pan,0) * 2)}

@media (max-width:860px){
  .ab{height:160svh}
  /* no celular a foto desliza menos: a tela e alta e estreita, entao o
   * cover ja corta as laterais e sobra menos ceu para mostrar */
  .ab__q img{height:150%;
    transform:translate3d(0,calc(var(--pan,0) * -16%),0)}
  /* numa tela estreita o arco precisa nascer mais largo, senao vira um
   * risco vertical e ninguem reconhece a forma */
  .ab__q{clip-path:inset(28% 22% 0 22% round 50% 50% 0 0 / 30% 30% 0 0)}
  .selo{animation-name:marca-m}
  @keyframes marca-m{
    from{transform:translate(calc(50vw - var(--borda) - 27px),3.5vh) scale(1.4)}
    to{transform:translate(0,0) scale(1)}
  }
}

@media (prefers-reduced-motion:reduce){
  /* sem abertura: a pagina ja nasce pronta */
  .ab{height:100svh}
  .ab__palco{position:static}
  .ab__q{clip-path:none;animation:none}
  .ab__q img{transform:none}
  .ab__veu{opacity:1;animation:none}
  .ab__pe,.cartao,.ab__local,.ab__cue{opacity:1;animation:none;
    transform:none}
  .selo{animation:none;transform:none}
  .ab__cue i{animation:none}
}

/* ===================================================================
 * O NOME NO CEU E OS PONTOS
 *
 * Tres mudancas pedidas: fora o selo girando do canto, o nome da Atlas
 * vai para o ceu da abertura, e os links viram pontos espalhados pelo
 * hero em vez de uma lista no canto.
 *
 * DUAS MEDICOES MANDARAM NO DESENHO:
 *
 * 1. A faixa do ceu onde o nome fica tem luminancia 0,31. Texto branco
 *    ali da 2,7:1, que reprova; carvao da 5,3:1 e passa, nas duas
 *    pontas do pan. Entao o nome e ESCURO sobre o ceu, nao claro. O
 *    Gifford Hill faz exatamente isso, titulo escuro sobre render
 *    claro, e serve de precedente.
 *
 * 2. As laterais INVERTEM durante o pan: no comeco a esquerda e clara
 *    (carvao passa, branco nao) e no fim e escura (branco passa,
 *    carvao nao). Nenhuma cor unica serve nos dois momentos, entao os
 *    pontos levam fundo proprio em vidro fosco e param de depender do
 *    que esta atras.
 * =================================================================== */

/* o selo girante nao existe mais */
.selo{display:none}

/* --------------------------------------------------------- o nome */
.ab__marca{position:absolute;left:50%;top:clamp(11%,13vh,16%);z-index:5;
  transform:translateX(-50%);text-align:center;
  color:var(--texto-forte);margin:0;
  /* keyframe PROPRIO, e nao o `sobe` geral: um keyframe que define
   * transform vence a regra, e o `sobe` zerava o translateX(-50%) que
   * centraliza a marca. Medido: ela terminava 197px a direita do
   * centro numa tela de 1280. */
  opacity:0;animation:sobe-marca 1.4s var(--e-saida) 1.9s both}
@keyframes sobe-marca{
  from{opacity:0;transform:translateX(-50%) translateY(26px)}
  to{opacity:var(--sai,1);transform:translateX(-50%) translateY(0)}
}
/* um halo claro, nao escuro: o ceu ja e claro e o que o nome precisa e
 * que a luminancia local SUBA, para o carvao ter onde se apoiar */
.ab__marca::before{content:"";position:absolute;left:50%;top:48%;
  width:190%;height:300%;z-index:-1;transform:translate(-50%,-50%);
  pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(247,243,236,.38) 0%, rgba(247,243,236,.2) 44%,
    rgba(247,243,236,0) 72%)}
.ab__marca b{display:block;font-weight:400;
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(2.7rem,9.4vw,9rem);line-height:.86;
  letter-spacing:.015em;text-indent:.015em}
.ab__marca i{display:block;font-style:normal;
  font-family:var(--f-mono);
  font-size:clamp(.56rem,1.15vw,.95rem);line-height:1;
  letter-spacing:.44em;text-transform:uppercase;text-indent:.44em;
  margin-top:clamp(10px,1.6vh,22px);opacity:.78}

/* --------------------------------------------------------- os pontos */
.pontos{position:absolute;inset:0;z-index:6;pointer-events:none}
.ponto{position:absolute;pointer-events:auto;
  display:block;text-decoration:none;color:var(--claro);
  opacity:0;animation:sobe 1s var(--e-saida) both}
.ponto--1{animation-delay:3.2s}
.ponto--2{animation-delay:3.35s}
.ponto--3{animation-delay:3.5s}
.ponto--4{animation-delay:3.65s}

/* o disco de vidro: funciona sobre o ceu claro e sobre a sombra da
 * casa, e e por isso que ele existe */
.ponto__d{position:relative;display:grid;place-items:center;
  width:clamp(40px,4.4vw,56px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(247,243,236,.42);
  background:rgba(20,17,14,.34);
  backdrop-filter:blur(13px) saturate(1.1);
  transition:background .55s var(--e-suave),
    border-color .55s var(--e-suave),transform .55s var(--e-saida)}
.ponto__d .ic{width:44%;height:auto;display:block;
  transition:transform .55s var(--e-saida)}
/* o anel que pulsa, para o ponto ser notado sem piscar */
.ponto__d::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(247,243,236,.5);
  animation:pulso 3.6s var(--e-suave) infinite;pointer-events:none}
.ponto:hover .ponto__d,.ponto:focus-visible .ponto__d{
  background:rgba(247,243,236,.92);border-color:rgba(247,243,236,.92);
  transform:scale(1.06);color:var(--panel)}
.ponto:hover .ic{transform:scale(1.08)}
@keyframes pulso{
  0%{transform:scale(1);opacity:.5}
  55%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

/* o rotulo abre ao lado, em pilula de vidro */
.ponto__r{position:absolute;top:50%;left:calc(100% + 13px);
  transform:translateY(-50%) translateX(-9px);
  opacity:0;pointer-events:none;white-space:nowrap;
  padding:9px 17px;border-radius:999px;
  background:rgba(20,17,14,.52);backdrop-filter:blur(13px);
  border:1px solid rgba(247,243,236,.2);color:var(--claro);
  font:400 clamp(.58rem,.74vw,.7rem)/1 var(--f-mono);
  letter-spacing:.19em;text-transform:uppercase;
  transition:opacity .5s var(--e-suave),
    transform .6s var(--e-saida)}
.ponto--on .ponto__r{opacity:1;transform:translateY(-50%) translateX(0)}
/* os da direita abrem para a esquerda, senao o rotulo sai da tela */
.ponto--e .ponto__r{left:auto;right:calc(100% + 13px);
  transform:translateY(-50%) translateX(9px)}
.ponto--e.ponto--on .ponto__r{transform:translateY(-50%) translateX(0)}

/* As quatro posicoes. Longe do nome (centro alto), da frase (rodape
 * esquerdo) e do cartao (canto direito baixo). */
.ponto--1{left:13%;top:46%}
.ponto--2{right:14%;top:40%}
.ponto--3{left:27%;top:72%}
.ponto--4{right:38%;top:66%}

/* o rodape perde o nome e as portas: sobrou a frase */
.ab__pe{grid-template-columns:minmax(0,1fr)}
.ab__frase{max-width:34ch;
  font-size:clamp(1rem,1.9vw,1.7rem)}

@media (max-width:860px){
  .ab__marca{top:10%}
  .ponto--1{left:9%;top:44%}
  .ponto--2{right:9%;top:38%}
  .ponto--3{left:17%;top:70%}
  .ponto--4{right:17%;top:64%}
}
@media (max-width:620px){
  .ab__marca b{font-size:clamp(2.2rem,13vw,3.6rem)}
  .ab__marca i{letter-spacing:.28em;text-indent:.28em}
  .ponto__d{width:42px}
  .ponto__r{font-size:.56rem;padding:8px 13px;letter-spacing:.14em}
  .ponto--1{left:7%;top:42%}
  .ponto--2{right:7%;top:36%}
  .ponto--3{left:13%;top:66%}
  .ponto--4{right:13%;top:60%}
}

@media (prefers-reduced-motion:reduce){
  .ab__marca,.ponto{opacity:1;animation:none;transform:translateX(-50%)}
  .ponto{transform:none}
  .ponto__d::after{animation:none}
}

/* ===================================================================
 * O QUE O CORTE LEVOU JUNTO
 *
 * Ao trocar o hero da hora pelo hero da abertura eu cortei o CSS a
 * partir de um marcador, e junto foram embora as regras de POSICAO do
 * cartao, do rodape e da barra do alto. Sobraram so as animacoes
 * delas, entao o cartao virou um bloco estatico de 952 por 1750px no
 * meio do fluxo, empurrando tudo.
 *
 * Achado medindo a caixa do cartao: position static, right auto,
 * bottom auto. Nenhum aviso, nenhum erro de console. Esta e a parte
 * cara de cortar CSS por marcador em vez de por regra.
 * =================================================================== */

/* ------------------------------------------------- a barra do alto */
.ab__alto{position:absolute;top:clamp(16px,2.6vh,30px);
  left:var(--borda);right:var(--borda);z-index:5;
  display:flex;justify-content:flex-start;align-items:flex-start;
  gap:16px;pointer-events:none}
.ab__alto > *{pointer-events:auto}
.ab__local{color:rgba(247,243,236,.72);
  font:400 clamp(.56rem,.72vw,.68rem)/1.7 var(--f-mono);
  letter-spacing:.2em;text-transform:uppercase;margin:0}

/* ------------------------------------------------- o rodape */
.ab__pe{position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:grid;align-items:end;
  padding:0 var(--borda) clamp(22px,4.5vh,52px)}
.ab__frase{margin:0;color:rgba(247,243,236,.9);
  font-family:var(--f-display);font-style:italic;line-height:1.26}

/* ------------------------------------------------- o cartao vivo */
.cartao{position:absolute;z-index:5;
  right:var(--borda);
  bottom:calc(clamp(22px,4.5vh,52px) + clamp(96px,17vh,170px));
  display:flex;align-items:flex-end;gap:14px;
  color:var(--claro)}
.cartao__q{position:relative;flex:none;
  width:clamp(104px,11vw,152px);aspect-ratio:16/10;
  border-radius:2px;overflow:clip;
  box-shadow:0 10px 40px rgba(14,12,10,.45)}
.cartao__q video{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover}
.cartao__t{margin:0;text-align:right;
  font:400 clamp(.56rem,.7vw,.66rem)/1.7 var(--f-mono);
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,243,236,.8)}
.cartao__t b{display:block;font-weight:400;
  font-family:var(--f-display);text-transform:none;letter-spacing:0;
  font-size:clamp(1.1rem,2vw,1.8rem);line-height:1;
  color:var(--claro);margin-bottom:5px}

@media (max-width:860px){
  /* 2MB de filme nao valem a primeira tela de um celular */
  .cartao{display:none}
}
@media (max-width:620px){
  .ab__local{display:none}
  .ab__pe{padding-bottom:clamp(18px,3.5vh,34px)}
}

/* ===================================================================
 * REFINOS DO HERO
 *
 * Cinco pedidos: icones menores, icones aparecendo so quando a pessoa
 * rola, fora o menu de texto do canto, fora a linha de localizacao do
 * alto, bandeiras no lugar de PT e EN, e o filme do cartao maior.
 *
 * O ganho real aqui nao e de tamanho, e de ORDEM: a abertura entrega
 * so a casa e o nome, e os pontos so chegam depois que a pessoa
 * decidiu descer. Nada disputa a primeira tela.
 * =================================================================== */

/* ------------------------------------------------- os pontos menores */
.ponto__d{width:clamp(32px,3.3vw,44px)}
.ponto__d .ic{width:42%}

/* ------------------------------------------------- e so no scroll
 *
 * Saem da animacao de carga e passam a depender do --pan. Aparecem
 * quando o pan passa de 6% e estao inteiros aos 26%, entao chegam
 * logo no comeco da descida, nao no fim. */
.ponto{
  --vis:clamp(0,(var(--pan,0) - .06) * 5,1);
  opacity:var(--vis);
  animation:none;
  transform:translate3d(0,calc((1 - var(--vis)) * 16px),0);
  transition:none}
/* Enquanto nao apareceram nao recebem clique. A classe vem do JS e
 * nao de um seletor de atributo, que seria fragil.
 *
 * Mas o TECLADO nao espera o scroll: quem chega num ponto pelo Tab faz
 * ele aparecer na hora, senao existe um link focavel e invisivel, que
 * e das piores coisas que um site pode ter. */
.pontos{pointer-events:none}
.ponto{pointer-events:none}
.ab--pontos .ponto{pointer-events:auto}
.ponto:focus-visible{--vis:1;opacity:1;transform:none;pointer-events:auto}

/* o anel que pulsa so pulsa depois de o ponto existir */
.ponto__d::after{animation-delay:.4s}

/* --------------------------------------- o alto, limpo */
.ab__alto{display:none}

/* o menu de texto do canto some: os pontos fazem essa funcao agora */
.nav a{display:none}

/* ------------------------------------------------- as bandeiras */
.nav{top:clamp(14px,2.2vh,26px);right:var(--borda);gap:0}
.nav__l{margin:0}
.bandeiras{display:flex;gap:6px}
.bandeira{display:block;padding:0;border:0;background:none;
  cursor:pointer;line-height:0;
  border-radius:2px;overflow:hidden;
  opacity:.42;
  transition:opacity .45s var(--e-suave),
    box-shadow .45s var(--e-suave),transform .45s var(--e-saida)}
.bandeira svg{display:block;
  width:clamp(22px,2.2vw,30px);height:auto;border-radius:2px}
/* a macro das bandeiras traz BR, ponto, PT em texto; aqui so o desenho */
.bandeira span{display:none}
.bandeira:hover{opacity:.8;transform:translateY(-1px)}
.bandeira[aria-pressed="true"]{opacity:1;
  box-shadow:0 0 0 1px rgba(247,243,236,.7),0 2px 10px rgba(14,12,10,.4)}
body.claro .bandeira[aria-pressed="true"]{
  box-shadow:0 0 0 1px rgba(36,31,28,.45),0 2px 10px rgba(14,12,10,.14)}

/* ------------------------------------------------- o cartao maior
 *
 * Segunda rodada de aumento: 208 ainda ficava pequeno para um filme de
 * obra, onde o que se ve e movimento e nao detalhe. Agora vai a 300.
 * O numero ao lado cresce junto, senao o cartao parece uma foto solta
 * com uma legenda perdida. */
.cartao__q{width:clamp(168px,19vw,300px)}
.cartao{gap:18px}
.cartao__t{font-size:clamp(.6rem,.78vw,.74rem)}
.cartao__t b{font-size:clamp(1.6rem,3vw,2.9rem)}

@media (max-width:620px){
  .ponto__d{width:34px}
  .bandeira svg{width:24px}
}

@media (prefers-reduced-motion:reduce){
  /* sem pan nao ha --pan: os pontos precisam existir de qualquer jeito */
  .ponto{--vis:1;opacity:1;transform:none;pointer-events:auto}
  .ponto__d::after{animation:none}
}

/* ===================================================================
 * A SECAO DO FILME
 *
 * Como estava: o filme num quadro de 340px, centralizado, sobre o osso
 * claro, com um paragrafo pequeno embaixo. O Herik: "o video esta meio
 * deslocado, meio numa tela branca, sem muito texto, sem muita
 * informacao, e esta pequeno".
 *
 * Tres mudancas, e a primeira e a que mais resolve:
 *
 * 1. A SECAO FICA ESCURA. Filme sobre carvao brilha; filme sobre osso
 *    claro fica apagado e parece um retangulo colado na pagina. A
 *    "tela branca" nao precisava de mais conteudo, precisava de outra
 *    cor.
 * 2. O FILME DOBRA. De 340px para a altura da tela, com o texto ao
 *    lado em vez de embaixo: assim ele tem com o que conversar.
 * 3. COTAS EM VOLTA. Fios finos com a medida, a mesma linguagem de
 *    prancha da marca, que dao escala ao quadro e contam que aquilo e
 *    obra e nao um clipe.
 * =================================================================== */
.filme{background:var(--canvas-esc);color:var(--texto-esc)}
.filme .colosso{color:var(--texto-esc-forte)}

.filme__g{display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(30px,6vw,110px);align-items:center;
  margin-top:clamp(34px,6vh,86px)}

/* o quadro: vertical, alto, e com as cotas penduradas nele */
/* O quadro e 9:16, entao a ALTURA manda: cada pixel de largura custa
 * 1,78 de altura. Com 46vh ele travava em 396px de largura numa tela
 * de 860, que e so 16% maior que os 340 de antes.
 *
 * A amarra era eu querer que a secao coubesse numa tela. Nao precisa:
 * um filme grande que obriga a rolar um pouco e melhor que um filme
 * medio que cabe. Agora sao 58vh, e a secao cresce junto. */
.filme__q{position:relative;flex:none;
  width:min(58vh,520px);aspect-ratio:9/16;
  border-radius:2px;
  box-shadow:0 34px 100px rgba(10,9,8,.55)}

/* as cotas, em fio de 1px, que se desenham quando o quadro entra */
.cota{position:absolute;display:flex;align-items:center;gap:9px;
  font:400 clamp(.52rem,.64vw,.62rem)/1 var(--f-mono);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--prancha-cota);white-space:nowrap}
.cota i{display:block;background:currentColor;flex:none}
.cota--alt{top:50%;right:-15px;transform:translate(100%,-50%);
  flex-direction:column}
.cota--alt i{width:1px;height:clamp(60px,16vh,150px);
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.6s var(--e-saida) .25s}
.cota--lar{bottom:-28px;left:50%;transform:translateX(-50%)}
.cota--lar i{height:1px;width:clamp(50px,9vw,130px);
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.6s var(--e-saida) .25s}
.na-tela .cota i{clip-path:inset(0 0 0 0)}

.filme__t{max-width:46ch}
.filme__t .prosa{color:var(--texto-esc-2)}
.filme__n{display:block;font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.2rem,4.4vw,4.2rem);line-height:1;
  color:var(--acento-esc);opacity:.55;margin-bottom:.16em}
.filme__l{display:flex;flex-wrap:wrap;gap:10px 28px;
  margin-top:clamp(26px,4.4vh,52px);
  padding-top:clamp(18px,2.6vh,30px);
  border-top:1px solid var(--linha);
  font:400 clamp(.58rem,.74vw,.7rem)/1.6 var(--f-mono);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-esc-2)}
.filme__l b{font-weight:400;color:var(--texto-esc-forte)}

/* ===================================================================
 * A TRANSICAO, com mais peso
 *
 * A cupula subia com o raio sumindo e nada mais. Faltava o que faz uma
 * coisa parecer estar NA FRENTE da outra: sombra projetada para cima e
 * um fio de luz na propria borda. Os dois se apagam conforme a abobada
 * vira uma linha reta, entao no fim nao sobra nenhum enfeite.
 * =================================================================== */
.sobe{
  box-shadow:
    0 -42px 100px rgba(10,9,8,calc(var(--ar,0) * .55)),
    0 -1px 0 rgba(247,243,236,calc(var(--ar,0) * .16))}

@media (max-width:900px){
  .filme__g{grid-template-columns:minmax(0,1fr);
    gap:clamp(34px,6vh,60px);justify-items:center}
  .filme__q{width:min(62vw,340px)}
  .filme__t{max-width:100%}
  .cota--alt{right:-12px}
}
@media (max-width:620px){
  .filme__q{width:72vw}
  .cota--alt{display:none}   /* nao ha margem lateral para a cota */
}

@media (prefers-reduced-motion:reduce){
  .cota i{clip-path:inset(0 0 0 0)!important;transition:none}
  .sobe{box-shadow:none}
}

/* ===================================================================
 * OS PAINEIS DO HERO
 *
 * Nos quadros 12 e 16 da gravacao longa, o ERA mostra um painel de
 * texto em vidro que APARECE E SOME sobre a mesma foto enquanto a
 * pessoa rola, e so depois disso a proxima secao sobe.
 *
 * Era isso que faltava: o hero dele continua contando coisas; o meu
 * terminava e cortava. A transicao parecia fraca porque nao havia
 * transicao nenhuma, havia um fim.
 *
 * Cada painel entra e sai dentro de uma faixa do --pan. O min() de
 * dois clamps e o que da entrada E saida com uma variavel so: o
 * primeiro sobe, o segundo desce, e o menor manda.
 * =================================================================== */
.hero-p{position:absolute;z-index:7;
  right:var(--borda);top:50%;
  width:min(33ch,34vw);
  padding:clamp(20px,2.4vw,32px);
  border-radius:3px;
  border:1px solid rgba(247,243,236,.18);
  background:rgba(18,15,13,.5);
  backdrop-filter:blur(15px) saturate(1.1);
  color:var(--claro);
  opacity:var(--v,0);
  transform:translateY(-50%) translateX(calc((1 - var(--v,0)) * 26px));
  pointer-events:none}
.hero-p h3{margin:0 0 .6em;font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.1rem,1.9vw,1.6rem);line-height:1.2;
  letter-spacing:-.01em}
.hero-p p{margin:0;font-size:clamp(.82rem,.95vw,.94rem);line-height:1.68;
  color:rgba(247,243,236,.8)}
.hero-p b{display:block;font-weight:400;
  font:400 clamp(.56rem,.7vw,.66rem)/1 var(--f-mono);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--acento-esc);margin-bottom:1.1em}

/* As duas faixas do curso, no progresso CRU (--t) e nao no --pan.
 *
 * O pan tem ease-out e resolve metade do movimento no primeiro quarto
 * do scroll; um painel preso nessa curva entra e sai antes de alguem
 * ler. Medido na versao anterior: o primeiro painel nunca passava de
 * 49% de opacidade.
 *
 * Com rampa de 1/14 em cada ponta, cada painel fica INTEIRO por cerca
 * de um quinto do curso, que da tempo de ler as tres linhas. */
/* As faixas encolheram porque o curso do hero agora tem seis fases e
 * nao duas: os dois paineis precisam caber ANTES de a cor comecar a
 * abrir, em 0,44. */
.hero-p--1{--v:min(
  clamp(0,(var(--t,0) - .09) * 18,1),
  clamp(0,(.26 - var(--t,0)) * 18,1))}
.hero-p--2{--v:min(
  clamp(0,(var(--t,0) - .28) * 18,1),
  clamp(0,(.43 - var(--t,0)) * 18,1))}

/* o hero precisa de mais curso para caber os dois paineis sem
 * atropelar o pan da foto */
.ab{height:280svh}

@media (max-width:900px){
  .ab{height:240svh}
  .hero-p{width:min(34ch,74vw);right:auto;left:50%;
    transform:translate(-50%,-50%) translateY(calc((1 - var(--v,0)) * 20px))}
  .hero-p--1,.hero-p--2{top:38%}
}
@media (max-width:620px){
  .hero-p{width:84vw;padding:18px}
  .hero-p h3{font-size:1.05rem}
  .hero-p p{font-size:.82rem}
}

@media (prefers-reduced-motion:reduce){
  /* sem curso nao ha paineis: eles viram conteudo da secao seguinte */
  .hero-p{display:none}
  .ab{height:100svh}
}

/* ===================================================================
 * A SEGUNDA SECAO, REFEITA
 *
 * O que estava la: o filme do Rio como protagonista, num fundo escuro,
 * com o texto ao lado e uma lacuna enorme no meio. O Herik: "ficou uma
 * lacuna muito grande, essa cor ficou ruim, o texto pequeno, o video
 * so no canto".
 *
 * O diagnostico que eu devia ter feito antes: aquele filme nao aguenta
 * ser protagonista. Sao onze segundos de drone sobre um predio no Rio,
 * que nem e praca onde a Atlas opera. Ele serve como UMA das obras da
 * galeria, nao como a primeira coisa que o site mostra depois do hero.
 *
 * No lugar dele, o que o ERA poe nessa posicao: as razoes. Titulo
 * grande centralizado e tres blocos, sem midia nenhuma. Depois do hero
 * a pessoa nao quer outro video, quer saber por que ficar.
 * =================================================================== */
/* ===================================================================
 * A PRANCHA QUE ANDA PARA O LADO
 *
 * A secao nao desce: ela anda. A prancha e a CAPA da faixa, e quem
 * rola empurra a folha para a esquerda e ve a casa de verdade passar.
 * O desenho e a planta; o que vem depois e a obra.
 *
 * Tudo o que faz a prancha funcionar veio medido do
 * lenvalproperties.com, no Chrome, e nao chutado:
 *
 *   1. `mix-blend-mode: multiply`. Branco vezes qualquer cor e a
 *      propria cor, entao o fundo branco do desenho SOME e o papel
 *      atravessa o traco. Sem isto o desenho vira um retangulo branco
 *      colado na folha, que e o erro obvio.
 *   2. Mascara em degrade na direita. O desenho nao acaba, ele some.
 *   3. O desenho SANGRA pela borda. Desenho inteiro dentro do quadro
 *      vira ilustracao de catalogo; cortado vira prancha.
 *
 * O que NAO veio de la: a sombra de folhagem de palmeira. Aquilo e
 * Miami, nao Minas. No lugar, reguas de prancheta em 6%.
 *
 * A maquina da faixa e a mesma de `.lado`, ja no motor. Esta secao so
 * pede um ritmo proprio, por `data-ritmo`, porque o painel de capa e
 * enorme e com o ritmo padrao a faixa ficava longa demais.
 * =================================================================== */
/* A FAIXA TAMBEM E A ABOBADA QUE SOBE.
 *
 * O hero termina com 100svh de almofada em que o palco dele fica
 * grudado, com a foto revelada parada, esperando a secao seguinte
 * subir por cima. Quando esta secao virou faixa eu tirei dela o
 * `.sobe` e o `.apos-brise`, e a almofada ficou sem ninguem para
 * cobri-la: sobrava uma tela inteira de papel vazio entre a foto e a
 * prancha. Era o buraco que o Herik viu.
 *
 * O `overflow:clip` e obrigatorio aqui e nao nas outras `.sobe`: nelas
 * o conteudo vive dentro de `.dentro`, que tem recuo e nunca encosta
 * no canto arredondado. Aqui o palco preenche a secao inteira e
 * apareceria por fora da abobada. `clip` e nao `hidden` de proposito:
 * `hidden` cria contexto de rolagem e quebraria o sticky do palco. */
.lado--papel{background:var(--canvas);color:var(--texto);
  overflow:clip}
.lado--papel .lado__trilho{gap:clamp(34px,6vw,120px)}

/* as reguas da folha. Ficam no PALCO, nao no trilho: papel nao anda
 * junto com o que esta desenhado nele. Em 6% elas nao se leem, se
 * sentem. */
.casa__reguas{position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.06;
  background-image:
    repeating-linear-gradient(90deg,var(--linha-forte) 0 1px,transparent 1px clamp(60px,7vw,118px)),
    repeating-linear-gradient(0deg,var(--linha-forte) 0 1px,transparent 1px clamp(60px,7vw,118px))}
.lado--papel .lado__palco{z-index:1}
.lado--papel .lado__trilho{position:relative;z-index:1}

/* O PAINEL DE CAPA.
 * A margem negativa cancela o recuo do trilho: a prancha tem de
 * comecar na borda da tela, nao a 230px dela, senao o desenho nao
 * sangra e a secao abre como um cartao. */
.casa__prancha{flex:none;position:relative;
  width:min(94vw,1680px);
  height:min(82svh,900px);
  margin-left:calc(clamp(28px,12vw,230px) * -1);
  display:flex;align-items:center}

.casa__risco{position:absolute;z-index:0;margin:0;pointer-events:none;
  left:0;top:50%;
  width:min(68%,1120px);
  transform:translateY(-50%);
  mix-blend-mode:multiply;
  /* O degrade comeca cedo, em 40%, por uma razao medida: o texto vive
   * no terco da direita e, com a dissolucao comecando tarde, ele caia
   * em cima da copa das arvores do desenho e ficava ilegivel. */
  -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 78%);
  mask-image:linear-gradient(90deg,#000 40%,transparent 78%);
  /* e a casa se risca da esquerda para a direita ao entrar */
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.7s var(--e-saida)}
.casa__prancha.na-tela .casa__risco{clip-path:inset(0 0 0 0)}
.casa__risco img{display:block;width:100%;height:auto}

.casa__txt{position:relative;z-index:1;margin-left:auto;
  width:min(46%,620px);
  padding-right:clamp(16px,3vw,60px)}
.casa__olho{color:var(--acento-texto);text-align:right}
.casa__t{max-width:13ch;margin:clamp(10px,1.6vh,18px) 0 0;
  margin-left:auto;text-align:right}
.casa__cols{margin-top:clamp(24px,4vh,50px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.2vw,36px)}
.casa__cols p{margin:0;
  font-size:clamp(.82rem,.96vw,.94rem);line-height:1.68;
  color:var(--texto-2)}

/* os quadros da casa de verdade. Tamanhos diferentes de proposito:
 * quadros iguais em fileira viram filme de rolo. */
.cq{flex:none;border-radius:2px}
/* O FILME INTEIRO e a peca grande da fileira, e por isso tem quadro
 * proprio e maior que os outros. O 16/9 nao e enfeite: e a razao do
 * arquivo, e qualquer outra cortaria a composicao de cada plano.
 *
 * O limite de 900px tem conta: com a sobra de 124% da `.mask--filme`,
 * um quadro de 900 pede 1111px de fonte, e o arquivo tem 1280. Em
 * 1100 de largura ele ja pediria 1358 e comecaria a ampliar. */
.cq--filme{width:min(100vh,900px);height:min(56svh,506px)}

/* e os ambientes passam depois, em tamanhos diferentes de proposito:
 * quadros iguais em fileira viram filme de rolo */
.cq--b{width:min(34vh,310px);height:min(46svh,420px);
  align-self:flex-start;margin-top:12svh}
.cq--c{width:min(52vh,470px);height:min(50svh,460px)}
.cq--e{width:min(38vh,340px);height:min(48svh,440px);
  align-self:flex-end;margin-bottom:10svh}
.cq--g{width:min(50vh,450px);height:min(44svh,400px)}
.cq--h{width:min(34vh,310px);height:min(46svh,420px);
  align-self:flex-start;margin-top:9svh}
.cq--f{width:min(50vh,450px);height:min(54svh,500px)}

/* a nota que diz o que as imagens sao. Vive no painel de capa, junto
 * do desenho a que ela se refere, e nao solta no fim da fileira. */
.casa__nota{margin:clamp(20px,3.4vh,40px) 0 0;
  font:400 clamp(.62rem,.76vw,.72rem)/1.72 var(--f-mono);
  letter-spacing:.06em;
  color:var(--texto-2);opacity:.88}

/* ONDE, a secao curta que fecha o assunto depois da faixa */
.casa-onde{background:var(--canvas);color:var(--texto)}
.casa__onde{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,4vw,70px);
  padding-top:clamp(20px,3vh,34px);
  border-top:1px solid var(--linha-forte)}
.onde{display:flex;flex-direction:column;gap:6px}
.onde__p{font:400 clamp(.56rem,.72vw,.68rem)/1.5 var(--f-mono);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--acento-texto)}
.onde__n{font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.6rem);line-height:1.2;
  color:var(--texto-forte)}
.onde__c{font-size:clamp(.82rem,.98vw,.94rem);line-height:1.6;
  color:var(--texto-2)}

@media (max-width:900px){
  /* No celular a prancha nao cabe com desenho atras de texto. O
   * desenho vira o fundo do painel, bem claro, e o texto vive por
   * cima: a folha continua sendo folha, mas legivel. */
  /* NO CELULAR O DESENHO FICA EM CIMA E O TEXTO EMBAIXO.
   *
   * Antes o desenho era fundo, a meia opacidade, e o texto corria por
   * cima dele. Na tela do Herik isso virou um texto escrito em cima da
   * casa, ilegivel dos dois lados: nao dava para ler o paragrafo nem
   * para ver o desenho. Numa coluna de 323px nao ha largura para as
   * duas coisas dividirem o mesmo espaco.
   *
   * A margem negativa do desktop tambem sai: ela existe para o desenho
   * sangrar pela borda da tela e, com 45px de recuo de trilho numa
   * tela de 375px, empurrava o texto para fora. Aqui quem sangra e o
   * desenho, por dentro do painel. */
  .casa__prancha{width:86vw;height:auto;max-height:92svh;
    margin-left:0;padding:0;
    display:flex;flex-direction:column;justify-content:center}
  .casa__risco{position:relative;left:-9%;top:auto;width:118%;
    transform:none;flex:none;
    margin-bottom:clamp(14px,2.4vh,26px);
    -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 84%,transparent 100%)}
  .casa__txt{position:relative;width:100%;margin-left:0;padding-right:0}
  .casa__olho,.casa__t{text-align:left;max-width:100%;margin-left:0}
  .casa__cols{grid-template-columns:minmax(0,1fr);
    gap:clamp(12px,2.2vh,20px)}
  .casa__nota{max-width:72vw;margin-bottom:8svh}
  .casa__onde{grid-template-columns:minmax(0,1fr)}
  /* NO CELULAR OS QUADROS SOBEM E AS LARGURAS SE IGUALAM.
   *
   * Medido em 375x812: as fotos ocupavam de 44% a 54% da altura da
   * tela e o filme 22%. Sobrava meia tela de papel com a grade da
   * prancheta aparecendo, e isso le como inacabado, nao como ar de
   * composicao. No desktop a mesma variacao funciona porque voce ve
   * tres quadros de uma vez e eles se apoiam; no celular voce ve um,
   * sozinho, no meio do vazio.
   *
   * As larguras tambem se igualam em 88vw. Variar largura num quadro
   * que ja esta limitado pela tela nao cria ritmo, cria desalinho: o
   * ritmo fica por conta da altura. */
  .lado--papel .cq{width:88vw;max-width:88vw;
    margin-top:0;margin-bottom:0}
  /* o filme fica quadrado no celular: em 16/9 ele dava 248px numa
   * tela de 812 e virava uma fita no meio do vazio */
  .cq--filme{width:88vw;height:auto;aspect-ratio:1/1}
  .cq--b{height:72svh}
  .cq--c{height:64svh}
  .cq--e{height:70svh}
  .cq--g{height:62svh}
  .cq--h{height:74svh}
  .cq--f{height:66svh}
  /* a grade da prancheta encolhe junto: com menos papel a vista ela
   * nao precisa trabalhar tanto */
  .casa__reguas{opacity:.04}
}

@media (prefers-reduced-motion:reduce){
  .casa__risco{clip-path:none;transition:none}
}



/* ===================================================================
 * AS OBRAS
 *
 * Pilha, nao grade. Cada obra e um cartao que entra pela direita e
 * pousa em cima das anteriores, torto, como desenho largado na
 * prancha. Rolar e folhear o portfolio.
 *
 * O RITMO E DA SECAO, nao da lista. A primeira volta amarrava a obra
 * ativa a linha que cruzasse o meio da tela, e as seis obras cabiam
 * em 544 pixels de rolagem: 109 por obra, um clique de scroll cada
 * uma. A pilha piscava em vez de andar. Agora a composicao inteira
 * gruda e a altura da secao e que diz quanto tempo cada obra tem.
 *
 * O movimento vem de --d por cartao: a distancia ate a obra corrente,
 * COM CASAS DECIMAIS. Inteiro faria a pilha pular; a fracao e o que
 * faz ela andar junto com a rolagem.
 *
 * Tudo na ROLAGEM e nunca no ponteiro: no celular nao existe hover, e
 * portfolio que so anima no mouse fica morto para metade de quem olha.
 * =================================================================== */
.obras{position:relative;background:var(--canvas-esc);color:var(--texto-esc);
  /* cem por cento de tela para a composicao, mais o curso. Com seis
   * obras isso da perto de trezentos pixels de rolagem por obra. */
  /* dez obras: o curso cresce junto, ou cada uma teria meia volta
   * de scroll e a pilha voltaria a piscar */
  height:calc(100svh + clamp(2100px,330svh,3400px))}
.obras__tela{position:sticky;top:0;height:100svh;overflow:clip;
  display:grid;align-items:center}
.obras__grade{display:grid;
  grid-template-columns:minmax(0,1fr) min(40vw,520px);
  gap:clamp(24px,4vw,70px);align-items:center}

.obras__col{min-width:0}
.obras__olho{color:var(--acento-esc)}
.obras__h{margin:clamp(8px,1.4vh,16px) 0 0;
  font-family:var(--f-display);font-weight:400;line-height:1;
  font-size:clamp(2rem,4.6vw,3.6rem);letter-spacing:-.02em;
  color:var(--texto-esc-forte)}

.obras__lista{list-style:none;margin:clamp(14px,2.6vh,40px) 0 0;padding:0;
  max-width:min(44ch,480px)}
.obra{display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(14px,2vw,28px);
  align-items:baseline;
  padding:clamp(7px,1.15vh,16px) 0;
  border-top:1px solid rgba(242,237,230,.14);
  /* a linha que nao e a ativa recua e esmaece: e isso que faz a
   * lista parecer um indice vivo e nao um menu */
  opacity:.34;
  transition:opacity .5s var(--e-suave),transform .5s var(--e-saida);
  transform:translate3d(0,0,0)}
.obra:last-child{border-bottom:1px solid rgba(242,237,230,.14)}
.obra--on{opacity:1;transform:translate3d(clamp(6px,1.2vw,18px),0,0)}
.obra__n{grid-row:1 / span 2;
  font:400 clamp(.58rem,.72vw,.68rem)/1 var(--f-mono);
  letter-spacing:.16em;color:var(--acento-esc);
  padding-top:.5em}
.obra__t{margin:0;font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.2rem,2.2vw,1.9rem);line-height:1.1;
  letter-spacing:-.015em;color:var(--texto-esc-forte)}
.obra__r{grid-column:2;margin-top:4px;
  font:400 clamp(.56rem,.7vw,.66rem)/1.5 var(--f-mono);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-esc-2)}

/* O contador existe pelo celular: la so a obra corrente aparece, e sem
 * ele nao da para saber se faltam duas ou oito. */
.obras__conta{margin:clamp(14px,2.4vh,26px) 0 0;
  font:400 clamp(.56rem,.7vw,.66rem)/1 var(--f-mono);
  letter-spacing:.2em;color:var(--texto-esc-2)}
.obras__conta b{font-weight:400;color:var(--acento-esc)}
.obras__conta i{font-style:normal;opacity:.45;margin:0 .6em}
.obras__trilho{margin-top:clamp(8px,1.4vh,16px);
  height:1px;background:rgba(242,237,230,.16);
  max-width:min(44ch,480px)}
.obras__trilho i{display:block;height:1px;margin-top:-1px;
  background:var(--acento-esc);
  width:calc(var(--obras-v,0) * 100%)}

/* ------------------------------------------------------- a pilha --- */
.obras__pilha{position:relative;aspect-ratio:4 / 5}
.obras__q{position:absolute;inset:0;margin:0;
  border-radius:3px;overflow:clip;
  background:var(--canvas-2);
  box-shadow:0 40px 90px rgba(0,0,0,.5);
  opacity:var(--o,0);
  /* --d negativo e cartao JA pousado, que recua, deita e escurece.
   * --d positivo e cartao que ainda vem, esperando fora pela direita.
   * Os dois lados saem da mesma variavel, entao nunca desencontram. */
  /* Quanto o cartao que ESPERA anda para a direita. Em 116% ele ficava
   * inteiro fora do quadro e a pilha nao avisava que tinha mais vindo.
   * Em 94% ele aparece de canto, atras da borda direita, e a fila se
   * ve. No celular volta a sair inteiro: la a pilha ocupa a largura
   * toda e o canto comeria a margem da pagina. */
  --vai:94%;
  transform:
    translate3d(calc(max(var(--d,9),0) * var(--vai) + min(var(--d,9),0) * -4.5%),
                calc(min(var(--d,9),0) * -2.4%),0)
    rotate(calc(min(var(--d,9),0) * 1.5deg))
    scale(calc(1 + min(var(--d,9),0) * 0.05));
  filter:brightness(calc(1 + min(var(--d,9),0) * 0.11))}
.obras__q img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;
  /* a foto anda dentro do proprio cartao enquanto ele passa: de
   * graca, e e o que da vida quando a rolagem e lenta */
  transform:scale(1.09) translate3d(calc(var(--d,0) * 2.4%),0,0)}
/* will-change e emprestimo: so enquanto a secao esta na tela */
.obras--viva .obras__q{will-change:transform,opacity}

/* ------------------------------------------------------- o fecho --- */
/* `padding-inline` tem de estar AQUI: `.dentro` so tem max-width e
 * margem automatica, entao sozinho ele deixa o texto colado em x=0.
 * Foi o mesmo tropeco do encerramento, e aqui ele ainda cortava o
 * botao redondo pela esquerda. */
.obras-pe{background:var(--canvas-esc);color:var(--texto-esc);
  padding:clamp(60px,11vh,140px) var(--borda)}
.obras__pe{margin:0;max-width:42ch;
  font-size:clamp(.84rem,1vw,.96rem);line-height:1.7;
  color:var(--texto-esc-2)}
.obras__botao{margin-top:clamp(26px,4.4vh,50px)}

/* DEZ LINHAS NAO CABEM COM O ESPACAMENTO DE CINCO.
 *
 * O palco e grudado e tem exatamente 100svh, entao a coluna da
 * esquerda nao pode passar disso. Medido com dez obras numa tela de
 * 768: a coluna deu 791 e comeu o trilho. Estas duas faixas apertam o
 * que da para apertar, e na tela mais baixa o titulo sai, porque a
 * lista e a pilha valem mais que ele. */
@media (min-width:901px) and (max-height:940px){
  /* Em 1440 por 900, que e das telas mais comuns, dez linhas deixavam
   * 17 pixels de folga. Qualquer diferenca de renderizacao de fonte
   * comeria isso, entao o aperto das linhas comeca antes. O titulo so
   * encolhe mais adiante, porque ele e o que da porte a secao. */
  .obras__lista{margin-top:clamp(10px,1.8vh,24px)}
  .obra{padding:clamp(5px,.95vh,13px) 0}
  .obras__conta{margin-top:clamp(10px,1.8vh,20px)}
  .obras__trilho{margin-top:clamp(6px,1.1vh,12px)}
}
@media (min-width:901px) and (max-height:830px){
  .obras__h{font-size:clamp(1.6rem,3.2vw,2.4rem)}
  .obra__t{font-size:clamp(1.15rem,2vw,1.7rem)}
  .obra__r{margin-top:3px}
}
/* Abaixo de 660 de altura nem apertando cabe, e espremer dez linhas a
 * ponto de caber deixa a lista ilegivel. Entao a tela baixa recebe o
 * mesmo tratamento do celular: so a obra CORRENTE, grande, com a pilha
 * do lado. A informacao que importa quando a foto esta na frente e o
 * nome da obra que esta na foto, nao o indice inteiro. */
@media (min-width:901px) and (max-height:660px){
  .obras__cab{display:none}
  .obras__lista{margin-top:0}
  .obra{display:none;border:0;padding:0;opacity:1;transform:none}
  .obra--on{display:grid}
  .obra__t{font-size:clamp(1.5rem,2.6vw,2.2rem)}
  .obras__trilho{margin-top:clamp(14px,3vh,26px)}
  /* a pilha passa a ser comandada pela ALTURA, senao ela mesma vaza */
  .obras__grade{grid-template-columns:minmax(0,1fr) auto}
  .obras__pilha{height:min(80svh,640px);width:auto;aspect-ratio:4 / 5}
}

@media (max-width:900px){
  /* No celular nao ha metade direita e nao ha altura para seis linhas
   * mais um cartao. Entao a lista encolhe para a obra CORRENTE, que e
   * tudo que importa quando a foto esta grande, e a pilha fica em
   * cima dela ocupando a maior parte da tela. */
  .obras{height:calc(100svh + clamp(2200px,340svh,3200px))}
  .obras__grade{grid-template-columns:minmax(0,1fr);
    gap:clamp(16px,3svh,30px)}
  .obras__pilha{order:-1;aspect-ratio:auto;height:58svh}
  .obras__q{--vai:118%}
  .obras__cab{display:none}
  .obras__lista{margin:0;max-width:100%}
  .obra{display:none;border:0;padding:0;opacity:1;transform:none}
  .obra--on{display:grid}
  .obra__t{font-size:clamp(1.4rem,6vw,2rem)}
  .obra__r{font-size:.6rem}
  .obras__conta{margin-top:clamp(12px,2.2svh,22px)}
  .obras__trilho{max-width:100%;margin-top:clamp(7px,1.2svh,14px)}
}

@media (prefers-reduced-motion:reduce){
  .obras{height:auto}
  .obras__tela{position:static;height:auto;padding-block:clamp(60px,10vh,120px)}
  .obras__pilha{aspect-ratio:4 / 5}
  .obras__q{transform:none;filter:none;opacity:0}
  .obras__q:first-child{opacity:1}
  .obras__q img{transform:none}
  .obra{opacity:1;transform:none;transition:none;display:grid}
}

/* ===================================================================
 * GESTAO DE OBRA
 *
 * A interface aqui e HTML, nao print. Um print de software envelhece,
 * sai borrado em tela retina e parece o painel de outra empresa.
 * Desenhada em HTML ela usa a tipografia e a cor do proprio site,
 * pesa alguns kilobytes e anima no scroll de graca.
 *
 * A secao e escura porque o assunto e TELA. Entre duas secoes claras,
 * o escuro faz a interface emitir luz em vez de refletir, que e como
 * software se parece com software.
 * =================================================================== */
.gestao{overflow:clip;padding-bottom:clamp(30px,5vh,60px)}
.gestao-fim{padding-top:clamp(26px,4vh,52px)}
.gestao__olho{color:var(--acento-texto);text-align:center}
.gestao__t{max-width:16ch;margin:clamp(10px,1.6vh,18px) auto 0;text-align:center}

/* A CENA: secao com altura, palco GRUDADO como filho direto.
 *
 * Esta forma e copiada do hero e da faixa, e nao por economia: a
 * primeira versao punha o palco tres niveis para dentro, dentro do
 * `.dentro`, e o sticky simplesmente nao pegava. Medido em cinco
 * posicoes de rolagem, o quadro andava junto com a pagina, pixel a
 * pixel, com `position` computando `sticky` e `top` computando 126px.
 * Nao era overflow, nem transform, nem filter, nem contain em
 * ancestral nenhum, e tambem nao era o `.dentro`. Esta e a forma que
 * esta pagina aceita, e e a mesma que as outras duas cenas usam.
 *
 * O palco grudado importa: sem ele o cronograma atravessaria a tela
 * ao mesmo tempo em que se preenche, e o olho nao saberia se a barra
 * cresceu ou se a pagina andou. Parado, so o tempo se move. */
.cena{position:relative;background:var(--canvas-esc);
  /* A altura E o curso. Subiu de 100svh para 150svh quando o close
   * entrou: com 100 ele tinha 252px de rolagem e acontecia rapido
   * demais para alguem ver. Agora sao 567px so para o close. */
  height:calc(100svh + clamp(820px,150svh,1600px))}
.cena__palco{position:sticky;top:0;height:100svh;
  display:grid;align-items:center;overflow:clip}

/* ===================================================================
 * O CLOSE PELO NUMERO
 *
 * A secao nao corta para a seguinte: a camera ENTRA pelo traco do
 * segundo zero do "100%" e sai do outro lado dentro da primeira obra.
 *
 * Tres coisas fazem isso funcionar:
 *
 * 1. A CORTINA E DA COR EXATA DO FUNDO da secao, com o numero
 *    recortado nela. Enquanto a foto atras esta em opacidade zero, os
 *    buracos mostram o proprio fundo e ninguem ve que ela existe. Por
 *    isso ela pode ficar na pagina desde o comeco, atras do
 *    cronograma, sem esconder nada.
 * 2. O NUMERO E CONTORNO, nao texto. Texto dentro de SVG nao herda a
 *    @font-face da pagina e cairia numa serifa do sistema, e a
 *    diferenca apareceria justo quando ele esta enorme na tela. Os
 *    contornos saem da propria Bodoni do site, por
 *    `ferramentas/mascara-numero.py`.
 * 3. O DESENHO JA NASCE CENTRADO no ponto de entrada, entao o
 *    transform-origin e 50% 50% em qualquer largura, em vez de uma
 *    conta que muda com o viewport.
 *
 * A cortina SOME enquanto ainda cresce. Isso nao e economia de
 * efeito: transform em elemento promovido rasteriza uma vez e escala
 * o bitmap, entao em 200 vezes a borda do buraco sairia borrada. Ela
 * se dissolve antes de chegar la, e o que fica e a foto.
 * =================================================================== */
.fecha{position:absolute;inset:0;z-index:1;pointer-events:none;
  overflow:clip}
.fecha__q{position:absolute;inset:0;margin:0;
  opacity:clamp(0,(var(--fecha,0) - .03) * 12,1)}
.fecha__q img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover}
/* A cortina e um SVG inline e o zoom e o viewBox encolhendo, escrito
 * pelo motor. Nao ha transform e nao ha will-change, de proposito:
 * scale(600) nesta caixa pedia 281 gigapixels de raster e travava a
 * pagina de quem subia de volta. Em vetor o custo por quadro e o
 * mesmo em qualquer ponto do zoom, porque o desenho sempre sai do
 * tamanho da tela. */
.fecha__c{position:absolute;inset:-2px;
  width:calc(100% + 4px);height:calc(100% + 4px);
  display:block;
  /* a cortina so se dissolve DEPOIS de o buraco ja ter tomado a tela,
   * entao e seguro e nao se ve: a essa altura ela esta fora do quadro */
  opacity:clamp(0,(1 - var(--fecha,0)) / .18,1)}
/* o cronograma vive acima da cortina ate se dissolver */
.gestao__q{z-index:2}

/* O AVISO DE QUE ROLAR MOVE O TEMPO.
 *
 * Sem ele ninguem descobre que a cena toca: quem passa rapido so ve
 * numeros pulando e pode ler "99% concluida" como se fosse uma obra
 * de verdade. Fica em posicao absoluta, entao nao tira altura do
 * quadro, e some assim que a cena comeca. */
.cena__dica{position:absolute;left:50%;bottom:clamp(14px,3vh,34px);
  z-index:3;margin:0;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  font:400 9px/1 var(--f-mono);letter-spacing:.24em;
  text-transform:uppercase;color:var(--texto-2);
  opacity:clamp(0,1 - var(--cena,0) * 22,1);
  pointer-events:none;white-space:nowrap}
.cena__dica i{display:block;width:26px;height:1px;background:currentColor;
  transform-origin:0 50%;animation:corre 2.6s var(--e-suave) infinite}
.gestao__q{width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.4fr);
  gap:clamp(14px,2vw,28px);
  align-items:stretch}

/* ------------------------------------------------ o cronograma --- */
.plano{margin:0;position:relative;
  --rot:clamp(96px,11vw,172px);
  --cols:16;
  background:var(--canvas-2);
  border:1px solid var(--linha);
  border-radius:3px;
  padding:clamp(18px,2.4vw,34px);
  /* a sombra funda e o que faz a peca emitir em vez de refletir */
  box-shadow:0 40px 90px rgba(0,0,0,.42)}
.plano__cab{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding-bottom:clamp(12px,1.6vh,18px);
  border-bottom:1px solid var(--linha)}
.plano__tit{font:400 clamp(.62rem,.78vw,.74rem)/1.4 var(--f-mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--texto-forte)}
.plano__sub{font:400 clamp(.58rem,.72vw,.68rem)/1.4 var(--f-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2);opacity:.8}

/* A LEGENDA.
 *
 * Quem contrata a Atlas nunca viu um grafico de Gantt. Sem isto a
 * pessoa ve barras coloridas e nao sabe o que e a barra cheia, o que
 * e a tracejada, nem o que e o fio vertical. Tres palavras resolvem,
 * e elas moram no cabecalho, que ja existia: nao custam altura, que e
 * o que falta no celular. */
.plano__leg{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);
  font:400 clamp(.54rem,.68vw,.64rem)/1.4 var(--f-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2)}
.pl{display:inline-block;width:16px;height:9px;margin-right:6px;
  vertical-align:-1px;border-radius:2px}
.pl--feito{background:var(--acento-esc);opacity:.85}
.pl--prev{background:rgba(242,237,230,.05);border:1px dashed var(--linha-forte)}
.pl--hoje{width:1px;height:14px;background:var(--texto-forte);opacity:.55;
  margin-right:9px;vertical-align:-3px}

/* A escala de meses e as linhas compartilham a MESMA grade: coluna de
 * rotulo na frente, mais dezesseis colunas iguais. Declarar as duas
 * grades separadas desalinharia a regua das barras a cada mudanca de
 * rotulo, e esse erro so aparece quando alguem confere no print. */
.plano__meses{display:grid;
  grid-template-columns:var(--rot) repeat(var(--cols),minmax(0,1fr));
  margin-top:clamp(12px,1.6vh,18px)}
.plano__meses span{grid-column:span 3;
  font:400 clamp(.5rem,.64vw,.6rem)/1 var(--f-mono);
  letter-spacing:.16em;color:var(--texto-2);opacity:.55}
.plano__meses span:first-child{grid-column:2 / span 3}

/* a folga aqui nao e estetica: o rotulo HOJE pendura 15px acima do
 * corpo, e com a folga antiga ele caia em cima da regua de meses */
.plano__corpo{position:relative;margin-top:clamp(24px,3.2vh,34px);
  display:grid;gap:clamp(7px,1vh,12px)}
.plano__l{display:grid;
  grid-template-columns:var(--rot) repeat(var(--cols),minmax(0,1fr));
  align-items:center}
.plano__n{grid-column:1;padding-right:12px;
  font-size:clamp(.68rem,.82vw,.8rem);line-height:1.3;
  color:var(--texto-2)}
.plano__t{grid-column:2 / -1;
  display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  height:var(--alt-barra);
  background-image:linear-gradient(90deg,var(--linha) 0 1px,transparent 1px);
  background-size:calc(100% / var(--cols)) 100%}

/* A BARRA E O PLANO; O PREENCHIMENTO E A EXECUCAO.
 *
 * Todas as oito sao iguais: uma caixa tracejada, que e o previsto, com
 * um preenchimento solido dentro, que e o feito. Nao ha classe de
 * estado, e isso e o ponto: `feita`, `andando` e `prevista` deixam de
 * ser rotulo escrito a mao e passam a ser consequencia de onde o fio
 * de hoje esta. Com classe de estado, qualquer mudanca de data pedia
 * revisar oito rotulos a mao, e foi exatamente assim que a primeira
 * volta saiu com uma etapa prevista ja comecada.
 *
 * --cena anda de 0 a 1 com a rolagem, e `var(--cena) * 16 + 1` e a
 * linha da grade onde o hoje esta. A fracao feita de cada barra e
 * quanto dela ficou para tras disso.
 *
 * A divisao e por --dur, que vem pronto do HTML: dividir por uma
 * subtracao de variaveis dentro do calc nao e confiavel. */
/* A CENA TEM DUAS FASES.
 *
 * Ate 0,72 ela TOCA: o fio de hoje anda e as etapas se preenchem.
 * De 0,72 a 1 ela FECHA: o quadro se dissolve e o close acontece.
 *
 * A primeira versao da segunda fase levantava as barras numa
 * colunata. O Herik nao gostou e pediu um close, entao o que sobe
 * agora e o numero, nao as barras. */
.cena{--toca:clamp(0,var(--cena,0) / .58,1);
  --fecha:clamp(0,(var(--cena,0) - .58) / .42,1)}
/* altura da barra, usada tambem pela regua de fundo da pista */
.plano{--alt-barra:clamp(16px,2.2vh,24px)}

.barra{grid-column:var(--de) / var(--ate);
  position:relative;align-self:center;
  height:100%;border-radius:2px;
  background:rgba(242,237,230,.05);
  border:1px dashed var(--linha-forte);
  --f:clamp(0,(var(--toca,0) * 16 + 1 - var(--de)) / var(--dur),1)}

.barra--feita{background:var(--acento-esc);opacity:.85}
.barra--andando{background:rgba(201,135,96,.2);
  border:1px solid var(--acento-esc)}
.barra--prevista{background:rgba(242,237,230,.05);
  border:1px dashed var(--linha-forte)}

/* O quadro sai de cena DEPRESSA, em um quinto do close.
 *
 * Com a saida lenta o cronograma ainda estava legivel quando o numero
 * ja tomava a tela, e as barras ficavam boiando por cima da foto. O
 * close so comeca a valer depois que nao ha mais nada entre a pessoa
 * e o numero. */
.plano__cab,.plano__meses,.plano__n,.painel,.plano__t{
  opacity:calc(1 - var(--fecha,0) * 5)}
.plano{border-color:rgba(242,237,230,calc(.14 * (1 - var(--fecha,0) * 5)));
  background-color:rgba(28,25,23,calc(1 - var(--fecha,0) * 5));
  box-shadow:0 40px 90px rgba(0,0,0,calc(.42 * (1 - var(--fecha,0) * 5)))}

/* O preenchimento e preso pela DIREITA, nao pela largura.
 *
 * Com `width: f * 100%` o 100% e a caixa interna da barra, e a borda
 * de 1px de cada lado fica de fora: uma etapa concluida sobrava tres
 * pixels de tracejado na ponta e nunca parecia concluida de verdade.
 * Preso pelos quatro lados em -1px, o preenchimento cheio cobre a
 * caixa de borda inteira. */
.barra i{position:absolute;top:-1px;bottom:-1px;left:-1px;
  right:calc((1 - var(--f)) * 100% - 1px);
  background:var(--acento-esc);opacity:.85;border-radius:2px}
/* o fio de HOJE atravessa as oito linhas */
/* O FIO DE HOJE, e a unica conta chata desta secao.
 *
 * A posicao e FRACAO DE PISTA, e a linha k da grade cai em (k-1)/16 da
 * pista, nao em k/16. Com 9.5 o fio caia na linha 10,5 e atravessava
 * "Revestimentos", que esta marcada como prevista: uma etapa que ainda
 * nao comecou com o dia de hoje dentro dela. Em 8.5 ele cai na linha
 * 9,5, que e onde os 53% do painel dizem que a obra esta. */
.plano__hoje{position:absolute;top:-6px;bottom:-6px;
  left:calc(var(--rot) + (100% - var(--rot)) * var(--toca,0));
  width:1px;background:var(--texto-forte);
  opacity:calc(.42 * (1 - var(--fecha,0) * 5));
  pointer-events:none}
/* o rotulo do fio saiu: ele vivia pendurado 15px acima do corpo e
 * batia na regua de meses quando o fio passava perto de um numero.
 * Quem explica o fio agora e a legenda do cabecalho. */

/* --------------------------------------------- o painel lateral --- */
.painel{margin:0;display:flex;flex-direction:column;
  background:var(--canvas-2);
  border:1px solid var(--linha);
  border-radius:3px;
  padding:clamp(18px,2.4vw,30px);
  box-shadow:0 40px 90px rgba(0,0,0,.42)}
.painel__cab{margin:0;
  font:400 clamp(.58rem,.72vw,.68rem)/1.4 var(--f-mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--acento-texto)}
.painel__n{margin:clamp(14px,2.4vh,26px) 0 0;
  font-family:var(--f-display);font-weight:400;line-height:.9;
  font-size:clamp(2rem,4.4vw,3.6rem);color:var(--texto-forte)}
.painel__n b{font-weight:400}
.painel__r{margin:6px 0 0;
  font-size:clamp(.74rem,.9vw,.86rem);color:var(--texto-2)}
.painel__fio{margin-top:clamp(12px,1.8vh,20px);
  height:2px;background:var(--linha);border-radius:2px;overflow:clip}
.painel__fio i{display:block;height:100%;
  width:calc(clamp(0,var(--cena,0) / .78,1) * 100%);
  background:var(--acento-esc)}

.painel__d{margin:clamp(18px,2.6vh,30px) 0 0;display:grid;gap:12px}
.painel__d div{display:flex;flex-direction:column;gap:3px}
.painel__d dt{font:400 clamp(.52rem,.64vw,.6rem)/1.4 var(--f-mono);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-2);opacity:.7}
.painel__d dd{margin:0;font-size:clamp(.78rem,.94vw,.9rem);
  color:var(--texto-forte)}

.painel__aviso{margin:auto 0 0;
  padding-top:clamp(16px,2.2vh,22px);
  border-top:1px solid var(--linha);
  font-size:clamp(.72rem,.86vw,.82rem);line-height:1.6;
  color:var(--texto-2)}
.painel__aviso b{color:var(--acento-texto);font-weight:400}

/* ------------------------------------------------------ o resto --- */
.gestao__nota{margin:clamp(14px,2vh,20px) 0 0;
  font:400 clamp(.58rem,.72vw,.68rem)/1.6 var(--f-mono);
  letter-spacing:.1em;color:var(--texto-2);opacity:.72}

.gestao__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,70px);
  margin-top:clamp(44px,8vh,110px)}
.gcard h3{margin:0;font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.05rem,1.8vw,1.55rem);line-height:1.22;
  color:var(--texto-forte);letter-spacing:-.01em}
.gcard p{margin:clamp(8px,1.2vh,14px) 0 0;
  font-size:clamp(.82rem,.96vw,.94rem);line-height:1.7;
  color:var(--texto-2)}

@media (max-width:1100px){
  .gestao__q{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .gestao__t{max-width:100%}
  /* No celular o cronograma nao cabe com rotulo ao lado da barra: o
   * rotulo comeria metade da largura e as barras virariam risco. O
   * rotulo sobe para cima da propria barra. */
  .plano{--rot:0px}
  .plano__l{grid-template-columns:repeat(var(--cols),minmax(0,1fr));
    row-gap:4px}
  .plano__n{grid-column:1 / -1;padding-right:0;font-size:.72rem}
  .plano__t{grid-column:1 / -1}
  .plano__meses{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
  .plano__meses span:first-child{grid-column:1 / span 3}
  .plano__hoje{left:calc(100% * var(--toca,0))}
  .plano__corpo{gap:7px}

  /* O PAINEL VIRA FAIXA NO CELULAR.
   *
   * Medido numa tela de 360x640, que e celular real com a barra do
   * navegador: o quadro tinha 744px de altura num palco de 640, e os
   * 104px que sobravam cortavam justamente o aviso de atraso, que e o
   * argumento da secao. Empilhado, o painel sozinho comia 263px.
   *
   * Em faixa, o numero e os dois dados dividem a mesma linha e o
   * painel cai para perto de 190. O resto sai do cabecalho e do
   * espacamento entre as etapas. */
  .painel{display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:'cab cab' 'num dados' 'rot dados' 'fio fio' 'aviso aviso';
    column-gap:clamp(14px,4vw,22px);row-gap:4px;
    align-items:center}
  .painel__cab{grid-area:cab;margin-bottom:6px}
  .painel__n{grid-area:num;margin:0;align-self:end;
    font-size:clamp(1.8rem,10vw,2.4rem)}
  .painel__r{grid-area:rot;margin:0;align-self:start;
    font-size:.72rem;line-height:1.3}
  .painel__d{grid-area:dados;margin:0;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .painel__fio{grid-area:fio;margin-top:10px}
  .painel__aviso{grid-area:aviso;margin:0;padding-top:12px}

  /* o cabecalho do cronograma aperta junto */
  .plano__cab{padding-bottom:8px;gap:8px}
  .plano__leg{gap:12px}
  /* Medido em 375x812: o quadro saia com 824px de altura contra 812
   * de palco, e o palco recorta. Doze pixels cortavam justamente o
   * aviso de atraso, que e o argumento da secao. Tudo abaixo aperta
   * para caber. */
  .plano{padding:clamp(12px,3.2vw,18px)}
  .painel{padding:clamp(12px,3.2vw,18px)}
  .gestao__q{gap:8px}
  .painel__n{margin-top:clamp(8px,1.6vh,14px)}
  .painel__d{margin-top:clamp(12px,1.8vh,18px)}
  .painel__aviso{padding-top:clamp(11px,1.6vh,15px)}
  /* a legenda do cabecalho fica embaixo das bandeiras fixas */
  .plano__sub{display:none}
  .gestao__g{grid-template-columns:minmax(0,1fr);
    gap:clamp(26px,4vh,40px)}
}

@media (prefers-reduced-motion:reduce){
  /* sem rolagem que toque, a cena mostra a obra pela metade, que e o
   * estado que conta a historia da secao */
  .cena{--cena:.40;height:auto;padding-block:clamp(40px,7vh,90px)}
  .cena__palco{position:static;height:auto}
}

/* ===================================================================
 * O TUNEL, DENTRO DO HERO
 *
 * Antes isto era uma secao separada que repetia a foto do hero. Era o
 * erro obvio: duplicava a abertura. Agora acontece no proprio palco do
 * hero, sobre a MESMA foto, e o hero so acaba quando o tunel acaba.
 *
 * A sequencia, com os detalhes que o Herik descreveu depois de ver:
 *
 *   1. tudo do hero SOME: marca, pontos, cartao, frase, paineis
 *   2. a cor abre do centro para os lados
 *   3. a cor fica SOZINHA, vazia, por um momento
 *   4. so entao as fotos comecam
 *   5. cada foto NAO estoura: cresce ate ocupar bem e sai
 *   6. e a proxima ja nasceu dentro quando a anterior ainda esta la
 *
 * Os itens 3, 5 e 6 sao o que separa isto de um zoom qualquer.
 * =================================================================== */

/* a cor que abre do centro, sobre a foto do hero */
.ab__cor{position:absolute;inset:0;z-index:8;
  background:var(--portal);
  /* Abre de uma LINHA NO MEIO para cima e para baixo, e nao do centro
   * para as laterais. O inset leva os recortes de cima e de baixo; os
   * das laterais ficam em zero, entao a faixa nasce cheia de largura e
   * com altura zero. */
  clip-path:inset(calc((1 - var(--cor,0)) * 50%) 0);
  pointer-events:none}

/* tudo o que e do hero sai de cena quando a cor comeca a abrir */
/* A saida tem faixa PROPRIA, e termina ANTES de a cor comecar.
 *
 * Antes ela era derivada da propria cor, entao os dois aconteciam ao
 * mesmo tempo: no print do Herik dava para ver o cartao de filme e os
 * icones ainda na tela com a cor ja aberta. A ordem importa: a tela
 * fica limpa primeiro, so depois o portal abre. */
.ab__marca,.ab__pe,.cartao,.pontos,.hero-p,.ab__cue{--sai:var(--limpo,1)}
/* NAO adianta escrever `opacity` em regra aqui: estes elementos tem
 * animacao de entrada com fill mode, e animacao vence regra para
 * sempre. A saida precisa entrar no PROPRIO keyframe final, que
 * resolve a variavel a cada quadro. */
.pontos{opacity:var(--sai,1)}
.hero-p{opacity:calc(var(--v,0) * var(--sai,1))}

/* as camadas do tunel */
/* left e top em 50% com o translate no transform: `position:absolute`
 * dentro de um grid com place-items:center NAO fica no centro, fica no
 * canto superior esquerdo, porque o absoluto sai do fluxo do grid. No
 * print as fotos abriam todas na lateral. */
.tz{position:absolute;z-index:9;margin:0;
  left:50%;top:50%;
  border-radius:2px;overflow:clip;
  opacity:var(--o,0);
  transform:translate(-50%,-50%) scale(var(--s,.06));
  transform-origin:50% 50%;
  box-shadow:0 30px 90px rgba(10,9,8,.5)}
/* so enquanto o tunel toca: ver ab--tunel no motor */
.ab--tunel .tz{will-change:transform,opacity}
/* Cada camada leva a proporcao NATIVA da foto dela, em vez de todas
 * num 16:10 unico. Forcar uma horizontal e duas verticais no mesmo
 * quadro cortaria justamente o assunto: na cozinha, o cooktop. E
 * quadros de formatos diferentes deixam o tunel mais vivo. */
.tz--1{width:min(62vw,1040px);aspect-ratio:3/2}
.tz--2,.tz--3{height:min(66svh,720px);width:auto;aspect-ratio:4/5}
.tz img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover}
.tz__r{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(14px,2vw,28px);
  background:linear-gradient(0deg,rgba(14,12,10,.82),transparent);
  color:var(--claro);
  font:400 clamp(.58rem,.74vw,.7rem)/1.5 var(--f-mono);
  letter-spacing:.17em;text-transform:uppercase;
  /* so acende na vez da propria camada: ver --leg no motor */
  opacity:var(--leg,1)}

/* a frase que fecha */
.ab__fim{position:absolute;inset:0;z-index:10;
  display:grid;place-items:center;text-align:center;
  padding:var(--borda);
  opacity:var(--fim,0);pointer-events:none}
.ab__fim p{max-width:22ch;margin:0;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.8rem,5.4vw,5.2rem);line-height:1.02;
  letter-spacing:-.025em;color:var(--texto-esc-forte)}
/* quando o motor monta as laminas, a frase passa a viver DENTRO
 * delas, e esta aqui so sobraria por baixo, fora de registro */
.ab--brise .ab__fim{display:none}

/* ===================================================================
 * A PAREDE DE BRISES
 *
 * O fim do hero nao corta para a secao seguinte: a cor terracota vira
 * uma fileira de laminas verticais que pivotam, como um brise de
 * fachada, e a foto da obra aparece por entre elas.
 *
 * Tres coisas fazem a diferenca entre isto e uma cortina qualquer:
 *
 *   1. e giro em 3D com perspectiva, entao as laminas afinam de
 *      verdade e a de tras aparece antes da de frente
 *   2. a abertura VARRE da esquerda para a direita, com atraso por
 *      lamina, em vez de todas abrirem juntas
 *   3. a frase esta recortada dentro das laminas, nao por cima, entao
 *      ela se parte junto com a parede
 *
 * O atraso por lamina mora aqui e nao no motor de proposito: o motor
 * escreve UMA variavel por quadro (--brise) e o compositor resolve as
 * vinte e seis contas. O caminho contrario seria vinte e seis
 * escritas de estilo por quadro.
 * =================================================================== */
/* A parede nasce em display:none e so entra no layout um pouco antes
 * de precisar dela.
 *
 * Por que isto importa: o motor escreve as variaveis no proprio .ab,
 * e variavel escrita no .ab invalida o estilo de TODO o que esta
 * dentro, a cada quadro. Com a parede montada o tempo inteiro, isso
 * eram vinte e seis laminas mais os dois pseudo-elementos de cada uma,
 * setenta e oito recalculos por quadro, durante o pan e o tunel
 * inteiros, para desenhar algo que ainda esta em opacidade zero.
 * Subarvore em display:none nao recalcula. */
.brise{display:none}
.ab--parede .brise{display:block}
.brise{position:absolute;inset:0;z-index:11;
  perspective:1500px;perspective-origin:50% 50%;
  transform-style:preserve-3d;
  pointer-events:none;
  /* no fim da varredura a parede inteira some, para a foto ficar
   * limpa de verdade antes de a secao seguinte subir */
  --vai:clamp(0,(var(--brise,0) - .86) / .14,1);
  opacity:calc(var(--bri-on,0) * (1 - var(--vai)))}

.brise__l{position:absolute;top:0;bottom:0;
  /* largura e posicao em PIXEL INTEIRO, vindas do motor. Em
   * porcentagem o arredondamento se somaria lamina a lamina e a frase
   * recortada sairia torta no fim da fileira; em fracao de pixel o
   * compositor deixa fresta e a foto de tras vaza. */
  left:var(--x);
  width:var(--w);
  overflow:hidden;
  background:var(--portal);
  transform-origin:0% 50%;
  backface-visibility:hidden;
  /* --d, o atraso de uma lamina para a proxima, vem do motor e e
   * dividido pela quantidade: a varredura tem de levar a MESMA fatia
   * do curso com vinte e seis laminas no monitor e com doze no
   * celular. Com atraso fixo, no celular a parede abria quase toda
   * junta e a varredura sumia. */
  --a:clamp(0,(var(--brise,0) - var(--i) * var(--d,.021)) / .46,1);
  transform:rotateY(calc(var(--a) * -84deg))}
/* A promocao a camada propria so vale ENQUANTO a parede trabalha.
 *
 * Medido: com `will-change:transform` fixo, as vinte e seis laminas
 * viram vinte e seis camadas de composicao permanentes, e o
 * compositor desenha a borda de cada uma com meio pixel de mistura.
 * Com a parede fechada dava para contar vinte e seis riscos claros no
 * terracota, o que entregava a transicao antes de ela acontecer.
 * Desligando o will-change o terracota volta a ser cor chapada. */
.ab--abrindo .brise__l{will-change:transform}
/* a sombra que vende o giro: quanto mais de perfil, menos luz pega */
.brise__l::after{content:'';position:absolute;inset:0;
  background:#2A0F06;opacity:calc(var(--a,0) * .62);
  pointer-events:none}
/* O fio de luz na dobra, como numa lamina de verdade. So acende
 * quando a lamina COMECA a girar: com a parede fechada o terracota
 * tem de ser uma cor chapada, sem costura nenhuma, ou a transicao se
 * entrega antes de acontecer. */
.brise__l::before{content:'';position:absolute;inset:0;z-index:2;
  box-shadow:inset 1px 0 0 rgba(255,238,226,.10);
  opacity:clamp(0,var(--a,0) * 6,1);
  pointer-events:none}

/* a copia da frase dentro da lamina: largura do palco inteiro,
 * empurrada para a esquerda pela posicao da propria lamina */
.brise__c{position:absolute;top:0;bottom:0;
  left:calc(var(--x) * -1);
  width:var(--sw);
  display:grid;place-items:center;text-align:center;
  padding:var(--borda);
  opacity:var(--fim,0)}
.brise__c p{max-width:22ch;margin:0;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.8rem,5.4vw,5.2rem);line-height:1.02;
  letter-spacing:-.025em;color:var(--texto-esc-forte)}

/* a foto que a parede revela. Fica ACIMA da cor e das obras, e so
 * liga quando as laminas ja estao opacas por cima dela. */
.ab__rev{position:absolute;inset:0;z-index:10;margin:0;
  opacity:var(--rev,0)}
.ab__rev img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover}
.ab__rev figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(18px,3vw,40px) var(--borda);
  background:linear-gradient(0deg,rgba(14,12,10,.78),transparent);
  color:var(--claro);
  font:400 clamp(.58rem,.74vw,.7rem)/1.5 var(--f-mono);
  letter-spacing:.17em;text-transform:uppercase;
  opacity:var(--vai-leg,0)}
.ab{--vai-leg:clamp(0,(var(--brise,0) - .9) / .1,1)}

/* O hero inteiro precisa de curso para as sete fases, MAIS 100svh de
 * almofada no fim.
 *
 * A almofada e o que faz a transicao fechar: nela o palco continua
 * grudado, com a foto revelada parada, enquanto a secao seguinte sobe
 * por cima em abobada. E o mesmo par `.gruda` + `.sobe` que o resto
 * do site usa, com o palco do hero no papel do `.gruda`. Sem ela a
 * foto subia junto com a pagina e a abobada nao cobria nada: virava
 * rolagem comum logo depois de uma transicao cara. */
.ab{height:860svh}
/* e a secao seguinte, seja ela qual for, e puxada para DENTRO da
 * almofada. A classe fala da POSICAO, nao do assunto: o conteudo
 * desta secao vai mudar varias vezes e o gancho nao pode ir junto. */
.apos-brise{margin-top:-100svh}
@media (max-width:900px){
  .ab{height:770svh}
  .tz--1{width:86vw}
  .tz--2,.tz--3{height:auto;width:72vw}
  /* menos laminas no celular ja vem do motor; aqui so a perspectiva,
   * que precisa ser mais curta para o giro nao achatar numa tela
   * estreita */
  .brise{perspective:760px}
}

@media (prefers-reduced-motion:reduce){
  .ab{height:100svh}
  /* sem a almofada do brise nao ha o que cobrir, e a margem negativa
   * engoliria a secao inteira */
  .apos-brise{margin-top:0}
  .ab__cor{display:none}
  .tz{position:static;opacity:1;transform:none;display:none}
  .ab__fim{display:none}
  .brise,.ab__rev{display:none}
  .ab__marca,.ab__pe,.cartao,.pontos{opacity:1}
}

/* ===================================================================
 * O ENCERRAMENTO, EM QUATRO FASES
 *
 * A foto cresce de uma janelinha ate a tela toda, o convite entra, o
 * grafite toma conta e o logo sobe. O mesmo gesto nas duas pontas: a
 * secao abre e fecha como diafragma, e esse abrir E a transicao que
 * faltava depois dos depoimentos.
 *
 * O grafite e mais frio e mais escuro que o carvao das outras secoes
 * escuras. O fim tem de parecer outro lugar, nao mais uma secao.
 * =================================================================== */
.fim{--v:var(--cena,0);
  --grafite:#191A1C;
  --sobre:#FFF8F0;
  /* as quatro fases, nomeadas, para nao haver numero solto la embaixo */
  --abre:clamp(0,var(--v,0) / .2,1);
  --conv:clamp(0,(var(--v,0) - .12) / .22,1);
  --toma:clamp(0,(var(--v,0) - .52) / .34,1);
  --sobe:clamp(0,(var(--v,0) - .84) / .16,1);
  position:relative;background:var(--grafite);
  height:calc(100svh + clamp(980px,160svh,2000px))}
/* A EMENDA COM OS DEPOIMENTOS.
 *
 * O grafite chegava num corte reto sobre o campo claro dos
 * fornecedores, e a janela da foto so aparecia uma tela inteira
 * depois: um ecra de grafite vazio no meio. Este degrade come a
 * primeira parte da secao, entao a cor TROCA em vez de cortar. */
.fim::before{content:"";position:absolute;z-index:0;
  left:0;right:0;top:0;height:22svh;
  background:linear-gradient(180deg,var(--canvas-2) 0%,
    rgba(25,26,28,.55) 54%,var(--grafite) 100%)}
.fim__palco{position:sticky;top:0;height:100svh;overflow:clip;
  display:grid;align-items:end;
  padding-inline:var(--borda)}

/* --------------------------------------- 1. a foto que cresce --- */
.fim__q{position:absolute;z-index:1;margin:0;overflow:clip;
  /* de janelinha a tela cheia. Em porcentagem o recuo horizontal e
   * vertical sai diferente, e e isso que se quer: a janela nasce
   * deitada, como foto em cima de uma mesa. */
  /* Recuo por lado, e nao `inset` unico: fechada, a janela fica na
   * metade DE CIMA do palco. Centrada, ela so aparecia quando a secao
   * ja tinha subido uma tela, e o que se via antes era grafite vazio. */
  top:calc((1 - var(--abre)) * 17%);
  bottom:calc((1 - var(--abre)) * 51%);
  left:calc((1 - var(--abre)) * 32%);
  right:calc((1 - var(--abre)) * 32%);
  border-radius:calc((1 - var(--abre)) * 3px);
  box-shadow:0 calc(var(--abre) * 0px + 30px) 80px rgba(0,0,0,calc(.5 - var(--abre) * .5))}
.fim__q img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;
  transform:scale(calc(1.05 - var(--abre) * .05))}

/* O veu e por MEDIDA: branco sobre o ceu desta foto da 1,4:1. Com ele
 * a faixa de baixo fecha acima de 12:1. So entra junto com o convite,
 * para a janelinha chegar limpa. */
.fim__veu{position:absolute;inset:0;z-index:2;opacity:var(--conv);
  background:linear-gradient(0deg,
    rgba(14,14,16,.94) 0%,rgba(14,14,16,.86) 26%,
    rgba(14,14,16,.46) 52%,rgba(14,14,16,.08) 78%,transparent 100%)}

/* ------------------------------------------- 2. o convite --- */
.fim__frente{position:relative;z-index:3;width:100%;
  color:var(--sobre);
  padding-bottom:clamp(48px,8vh,86px);
  opacity:var(--conv);
  transform:translate3d(0,calc((1 - var(--conv)) * 26px),0)}
.fim__olho{color:rgba(255,248,240,.8)}
.fim__h{margin:clamp(8px,1.4vh,16px) 0 0;max-width:17ch;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.9rem,min(6.2vw,8.6vh),5.6rem);
  line-height:1.04;letter-spacing:-.022em;color:var(--sobre)}
.fim__p{margin:clamp(12px,2vh,24px) 0 0;max-width:42ch;
  font-size:clamp(.88rem,1.05vw,1.02rem);line-height:1.65;
  color:rgba(255,248,240,.9)}
.fim__btn{display:inline-flex;align-items:center;
  margin-top:clamp(18px,3vh,36px);
  padding:clamp(14px,1.9vh,19px) clamp(24px,3vw,42px);
  border-radius:2px;background:var(--acento-esc);
  font:400 clamp(.6rem,.76vw,.72rem)/1 var(--f-mono);
  letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:#201712;
  transition:background .5s var(--e-suave),transform .5s var(--e-saida)}
.fim__btn:hover{background:#E0A07A;transform:translate3d(0,-2px,0)}
.fim__arq{margin:clamp(16px,2.6vh,30px) 0 0;max-width:56ch;
  font-size:clamp(.78rem,.92vw,.88rem);line-height:1.65;
  color:rgba(255,248,240,.78)}
.fim__arq b{font-weight:400;color:var(--sobre)}
.fim__arq a{color:var(--sobre);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(255,248,240,.45);padding-bottom:2px;
  transition:border-color .4s var(--e-suave)}
.fim__arq a:hover{border-color:var(--sobre)}

/* --------------------------------- 3. o grafite toma conta --- */
/* ACIMA do convite, de proposito: ele tem de ENGOLIR o texto, nao
 * aparecer atras. Em box-shadow inset nao ha layout nenhum, e o
 * navegador recorta na propria caixa, entao a sombra enorme nao vira
 * camada enorme. */
.fim__fecha{position:absolute;inset:0;z-index:4;pointer-events:none;
  box-shadow:inset 0 0 0 calc(var(--toma) * 62vmax) var(--grafite)}

/* ----------------------------------------- 4. o logo sobe --- */
.fim__fim{position:absolute;inset:0;z-index:5;
  display:grid;align-content:center;justify-items:center;
  text-align:center;gap:clamp(18px,3vh,36px);
  padding:var(--borda);
  opacity:var(--sobe);
  transform:translate3d(0,calc((1 - var(--sobe)) * 30px),0);
  pointer-events:none}
.fim__fim > *{pointer-events:auto}
/* `background:none` nao e enfeite: ha uma regra global que da fundo
 * claro a toda imagem, para a foto nao piscar enquanto carrega. Num
 * PNG com transparencia isso vira uma CAIXA CLARA atras do logo, e foi
 * exatamente o que apareceu no grafite. O arquivo estava certo; o
 * elemento renderizado e que nao estava. */
.fim__logo{width:clamp(180px,24vw,340px);height:auto;max-width:none;
  background:none}
.fim__zap{font:400 clamp(.78rem,1.1vw,1rem)/1 var(--f-mono);
  letter-spacing:.2em;text-decoration:none;color:var(--sobre);
  border-bottom:1px solid rgba(255,248,240,.4);padding-bottom:6px;
  transition:border-color .4s var(--e-suave)}
.fim__zap:hover{border-color:var(--sobre)}
.fim__pe{justify-content:center;margin:0;padding-top:0;border-top:0;
  max-width:70ch;color:rgba(255,248,240,.62)}
.pe__l{color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(255,248,240,.3);padding-bottom:3px;
  transition:border-color .4s var(--e-suave)}
.pe__l:hover{border-color:rgba(255,248,240,.8)}

@media (max-width:900px){
  .fim{height:calc(100svh + clamp(820px,140svh,1600px))}
  /* no celular a janelinha nasce menos recuada, ou vira selo */
  .fim__q{top:calc((1 - var(--abre)) * 20%);
    bottom:calc((1 - var(--abre)) * 50%);
    left:calc((1 - var(--abre)) * 12%);
    right:calc((1 - var(--abre)) * 12%)}
  .fim__h{max-width:100%}
  .fim__p{max-width:100%;font-size:clamp(.85rem,3.8vw,.98rem)}
  .fim__frente{padding-bottom:clamp(30px,6svh,56px)}
  .fim__btn{padding:clamp(13px,2.2svh,17px) clamp(22px,6vw,34px)}
  .fim__arq{max-width:100%;font-size:.78rem}
  .fim__arq a{white-space:normal}
  .fim__fim{gap:clamp(14px,2.6svh,26px)}
  .fim__logo{width:clamp(160px,52vw,240px)}
  .fim__pe{gap:5px 14px;font-size:.54rem;line-height:1.5}
}

@media (prefers-reduced-motion:reduce){
  .fim{height:auto}
  .fim__palco{position:static;height:auto;
    padding-block:clamp(70px,12vh,140px)}
  .fim__q{position:relative;inset:auto;height:min(52svh,440px);
    margin-bottom:clamp(26px,4vh,44px)}
  .fim__q img{transform:none}
  .fim__veu{display:none}
  .fim__frente{opacity:1;transform:none;color:var(--sobre)}
  .fim__fecha{display:none}
  .fim__fim{position:static;inset:auto;opacity:1;transform:none;
    margin-top:clamp(40px,7vh,80px);padding:0}
}

/* ===================================================================
 * O CANTEIRO E A EQUIPE
 *
 * A secao que diz QUEM levanta. O resto da pagina conta o desenho, o
 * modelo, o cronograma e a obra pronta; esta conta a obra enquanto ela
 * acontece, que e justamente o que os clientes elogiam nas falas.
 *
 * As quatro fotos sao verticais e desencontradas de proposito. Em
 * fileira alinhada elas viram uma tira de contato; desencontradas, com
 * cada uma andando na sua velocidade pelo parallax de `.mask`, a
 * fileira respira e o olho percorre.
 * =================================================================== */
.cant__olho{color:var(--acento-texto)}
.cant__h{max-width:16ch;margin-top:clamp(8px,1.4vh,16px)}
.cant__p{margin-top:clamp(16px,2.6vh,32px);max-width:52ch}

.cant__fotos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.8vw,30px);
  margin-top:clamp(40px,7vh,96px);
  align-items:start}
.cant__f{margin:0;min-width:0}
/* o desencontro: a 2a e a 4a descem */
.cant__f:nth-child(even){margin-top:clamp(20px,4.5vh,64px)}
.cant__q{aspect-ratio:7 / 10;border-radius:2px}
.cant__f figcaption{margin-top:clamp(10px,1.6vh,16px);
  font:400 clamp(.56rem,.7vw,.66rem)/1.4 var(--f-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--texto-2)}

/* as tres regras do canteiro */
.cant__r{list-style:none;margin:clamp(44px,8vh,110px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3.6vw,64px)}
.cant__r li{min-width:0;border-top:1px solid var(--linha);
  padding-top:clamp(14px,2.2vh,22px)}
.cant__r h3{margin:0;font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.05rem,1.7vw,1.45rem);line-height:1.16;
  letter-spacing:-.012em;color:var(--texto-forte)}
.cant__r p{margin:clamp(8px,1.2vh,14px) 0 0;max-width:34ch;
  font-size:clamp(.82rem,.96vw,.92rem);line-height:1.65;
  color:var(--texto-2)}

@media (max-width:900px){
  .cant__h{max-width:100%}
  .cant__p{max-width:100%}
  /* quatro colunas num celular dao foto de 70px: duas e o minimo que
   * ainda deixa ver o que esta na foto */
  .cant__fotos{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(10px,3vw,16px);
    margin-top:clamp(26px,5svh,46px)}
  .cant__f:nth-child(even){margin-top:clamp(14px,3svh,28px)}
  .cant__r{grid-template-columns:minmax(0,1fr);
    margin-top:clamp(30px,6svh,56px);
    gap:clamp(16px,3svh,26px)}
  .cant__r p{max-width:100%}
}

/* ===================================================================
 * A PONTE: O CANTEIRO VIRA GRADE
 *
 * O canteiro e claro, em preto e branco, e e gente. A gestao e escura
 * e e tela. O corte entre os dois era seco e jogava fora o sentido da
 * passagem: o que acontece no canteiro vira linha no cronograma.
 *
 * A grade que desce e a DO CRONOGRAMA, as mesmas dezesseis colunas.
 * Fios de um pixel, nao laminas: a parede que fecha ja e o fim da
 * pagina, e repetir o gesto aqui gastaria os dois. Aqui e desenho
 * tecnico chegando antes da secao tecnica.
 * =================================================================== */
.ponte{--v:var(--cena,0);
  position:relative;background:var(--canvas-2);
  height:calc(100svh + clamp(480px,72svh,900px))}
.ponte__palco{position:sticky;top:0;height:100svh;overflow:clip;
  display:grid;place-items:center;
  padding-inline:var(--borda)}

/* --------------------------------------------------- a grade --- */
/* A grade fica ACIMA do escuro, e nao abaixo. Embaixo, o escuro a
 * cobria e a ideia se perdia: o que tem de acontecer e a grade
 * SOBREVIVER a virada, porque ela e a mesma do cronograma que vem
 * logo depois. O fio e um tom medio, que le nos dois campos. */
.ponte__grade{position:absolute;inset:0;z-index:3;
  display:grid;grid-template-columns:repeat(16,1fr);
  /* a ultima coluna pousa por volta de 0,40 do curso */
  --passo:.018;
  --leva:.12}
.ponte__grade i{display:block;position:relative;
  --f:clamp(0,(var(--v,0) - var(--i,0) * var(--passo)) / var(--leva),1);
  /* os fios somem no fim, para a gestao comecar em campo limpo */
  opacity:calc(var(--f) * clamp(0,(1 - var(--v,0)) / .14,1))}
.ponte__grade i::after{content:'';position:absolute;
  top:0;bottom:0;left:0;width:1px;
  background:var(--linha-forte);
  /* o fio firma conforme o campo escurece: a mesma opacidade que le
   * bem no osso quase some no carvao */
  opacity:calc(.5 + var(--v,0) * .28);
  transform:scaleY(var(--f));transform-origin:50% 0}

/* ------------------------------------------- o escuro que sobe --- */
/* Sobe DEPOIS que a frase saiu. Com as duas ao mesmo tempo havia um
 * momento de texto escuro a quarenta por cento sobre fundo escurecendo
 * a trinta, e isso e lama. */
.ponte__escuro{position:absolute;inset:0;z-index:2;
  background:var(--canvas-esc);
  opacity:clamp(0,(var(--v,0) - .48) / .24,1)}

/* ---------------------------------------------------- a frase --- */
.ponte__f{position:relative;z-index:4;margin:0;
  max-width:24ch;text-align:center;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.5rem,min(4.4vw,6.4vh),3.4rem);
  line-height:1.1;letter-spacing:-.018em;
  color:var(--texto-forte);
  /* entra, segura, e sai antes de o escuro comecar */
  opacity:calc(clamp(0,var(--v,0) / .12,1) * clamp(0,(.46 - var(--v,0)) / .12,1));
  transform:translate3d(0,calc((1 - clamp(0,var(--v,0) / .16,1)) * 22px),0)}

@media (max-width:900px){
  .ponte{height:calc(100svh + clamp(420px,64svh,760px))}
  /* dezesseis fios num celular viram textura cinza: oito ainda sao
   * grade e ainda sao os meses do cronograma, de dois em dois */
  .ponte__grade{grid-template-columns:repeat(8,1fr);--passo:.034;--leva:.14}
  .ponte__grade i:nth-child(n+9){display:none}
  .ponte__f{max-width:16ch;font-size:clamp(1.3rem,min(7vw,5.6vh),2.1rem)}
}

@media (prefers-reduced-motion:reduce){
  .ponte{height:auto}
  .ponte__palco{position:static;height:auto;
    padding-block:clamp(70px,12vh,150px)}
  .ponte__grade{display:none}
  .ponte__escuro{opacity:0}
  .ponte__f{opacity:1;transform:none}
}

/* ===================================================================
 * A PONTE PARA AS VOZES
 *
 * O campo escuro das obras SOBE como persiana e descobre o claro dos
 * depoimentos por baixo, com um fio de terracota na aresta para o
 * movimento se ver. Nao e diafragma (o fim ja e) nem lamina girando
 * (o hero ja e): e uma folha saindo da frente.
 * =================================================================== */
.pv{--v:var(--cena,0);
  --sobe:clamp(0,(var(--v,0) - .1) / .5,1);
  --fala:clamp(0,(var(--v,0) - .34) / .26,1);
  position:relative;background:var(--canvas-2);
  height:calc(100svh + clamp(440px,66svh,860px))}
.pv__palco{position:sticky;top:0;height:100svh;overflow:clip;
  display:grid;place-items:center;padding-inline:var(--borda)}

.pv__claro{position:relative;z-index:1;text-align:center;
  opacity:var(--fala);
  transform:translate3d(0,calc((1 - var(--fala)) * 18px),0)}
.pv__aspas{margin:0;font-family:var(--f-display);font-weight:400;
  font-size:clamp(3.4rem,min(11vw,16vh),9rem);line-height:.7;
  color:var(--acento-texto);opacity:.5}
.pv__f{margin:clamp(6px,1.2vh,16px) 0 0;max-width:18ch;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.5rem,min(4.6vw,6.6vh),3.4rem);
  line-height:1.08;letter-spacing:-.018em;color:var(--texto-forte)}

/* a folha escura saindo da frente */
.pv__esc{position:absolute;inset:0;z-index:2;
  background:var(--canvas-esc);
  transform:translate3d(0,calc(var(--sobe) * -101%),0)}
/* o fio na aresta: sem ele a folha sobe e ninguem ve que ela subiu */
.pv__esc::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--acento-esc);
  opacity:clamp(0,var(--sobe) * 8,1)}

@media (max-width:900px){
  .pv{height:calc(100svh + clamp(380px,56svh,720px))}
  .pv__f{max-width:14ch}
}

@media (prefers-reduced-motion:reduce){
  .pv{height:auto}
  .pv__palco{position:static;height:auto;
    padding-block:clamp(60px,10vh,120px)}
  .pv__claro{opacity:1;transform:none}
  .pv__esc{display:none}
}