/* A abertura das letras 3D · LABORATÓRIO · rodada 3 (04/10/2026)

   Tokens, fonte e vidro são os do site aprovado (salmão e branco, Archivo): nada de paleta nova. A
   abertura agora segue o tema: escura no modo escuro, marfim no modo claro (a cena 3D muda junto).

   Dois estados:
   - html.ab-js (JavaScript, sem movimento reduzido): a cena presa na tela enquanto se rola; uma
     mensagem por vez, numa faixa embaixo, separada das letras, que ficam no alto.
   - sem a classe (movimento reduzido, sem JavaScript): a palavra parada, em imagem, e as mensagens em
     sequência — sem rolagem presa. */

:root{--ab-fundo:#000;--ab-fundo-rgb:0,0,0}
html[data-tema=claro]{--ab-fundo:#FFFAF7;--ab-fundo-rgb:255,250,247}

.abertura{position:relative;background:var(--ab-fundo);color:var(--ink);isolation:isolate}
.abertura:focus{outline:none}
.ab-palco{position:relative;overflow:hidden;background:var(--ab-fundo)}
.ab-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.ab-poster{display:block}
.ab-poster img{display:block;width:100%;height:auto}
/* a imagem de apoio do tema certo */
html[data-tema=claro] .ab-poster--escuro,html:not([data-tema=claro]) .ab-poster--claro{display:none}
.ab-veu{pointer-events:none}
.ab-passagem{height:clamp(56px,10vh,120px);background:linear-gradient(var(--ab-fundo),var(--void))}

/* ---------- a copy: tipografia ---------- */
.ab-msg .kicker{display:block}
.ab-msg h1{font-size:clamp(32px,3.9vw,56px);line-height:1;letter-spacing:-.03em;font-weight:900;max-width:20ch}
.ab-msg h1 em{font-style:normal;color:var(--acento)}
.ab-msg h2{margin-top:12px;font-size:clamp(26px,2.75vw,40px);line-height:1;letter-spacing:-.03em;font-weight:900}
.ab-msg p{margin-top:14px;font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:var(--ink-dim);max-width:52ch}
/* o fecho: as quatro linhas que estavam abaixo dos planos, no mesmo desenho (a que ecoa, leve) */
.ab-msg--tese h2{margin:0;font-size:clamp(30px,3.7vw,54px);line-height:.95;letter-spacing:-.04em;font-weight:900}
.ab-msg--tese h2 + h2{margin-top:4px}
.ab-msg--tese h2.eco{font-weight:300;color:var(--ink-ghost);letter-spacing:-.03em}
.ab-msg--tese h2 em{font-style:normal;color:var(--acento)}

/* ---------- a assinatura (rodada 6): WEBSTUDIO na largura do PARADOXO, a frase, o que fazemos ----------
   Texto em HTML, sobre a água, abaixo do reflexo mais claro das letras. Parado (movimento reduzido, sem JS): logo
   abaixo da imagem da palavra. Com a cena: entra no fim, depois de um instante da palavra sozinha (abaixo). */
.ab-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ab-assinatura{text-align:center;color:var(--ink)}
.ab-selo{margin:0;font:600 clamp(13px,1.3vw,20px)/1 var(--body);color:var(--ink)}
.ab-selo-letras{display:flex;justify-content:space-between}
.ab-selo-letras i{display:block;font-style:normal}
.ab-frase{margin:clamp(20px,2.5vw,34px) 0 0;font-weight:900;font-size:clamp(30px,3.6vw,54px);line-height:.98;letter-spacing:-.035em}
.ab-frase em{font-style:normal;color:var(--acento)}
/* cada linha é uma janela: a frase sobe por dentro dela (o acento do Í e o pé do G cabem na folga) */
.ab-linha{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .04em .08em;margin:-.14em -.04em -.08em}
.ab-linha > span{display:inline-block}
.ab-sub{margin:clamp(12px,1.3vw,18px) 0 0;font-size:clamp(16px,1.2vw,18px);line-height:1.4;color:var(--ink-dim)}
html:not(.ab-js) .ab-assinatura{width:min(calc(100% - 2 * var(--gut)),980px);margin:clamp(28px,4vw,44px) auto 0}

/* ---------- "Quero meu site" e "Começar agora": vidro salmão, quase invisível (rodada 4) ----------
   No jeito dos botões de vidro do iOS — borda de luz em cima, um véu de cor, o fundo desfocado —, só que o
   vidro é salmão em vez de incolor. Sem a sombra forte (o "brilho intenso" que o fundador pediu para tirar),
   o texto no centro, sem seta. html:root … vence o vidro cheio do site (:root body :is(…,.fim-cta,…)). */
html:root body .abertura a.ab-cta.fim-cta,html:root body .fim a.fim-cta.vidro-salmao{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;min-width:224px;
  background:linear-gradient(180deg,rgba(248,176,148,.34),rgba(224,128,96,.17) 55%,rgba(217,119,87,.24));
  color:#FFF1EA;text-shadow:0 1px 1px rgba(60,20,10,.22);
  box-shadow:inset 0 1px 0 rgba(255,232,222,.5),inset 0 0 0 1px rgba(255,190,165,.28),inset 0 -1px 0 rgba(150,60,35,.18),0 10px 28px -20px rgba(217,119,87,.5);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
}
html[data-tema=claro]:root body .abertura a.ab-cta.fim-cta,html[data-tema=claro]:root body .fim a.fim-cta.vidro-salmao{
  background:linear-gradient(180deg,rgba(240,158,126,.24),rgba(217,119,87,.11) 55%,rgba(217,119,87,.17));
  color:#8A3418;text-shadow:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(181,83,47,.24),inset 0 -1px 0 rgba(181,83,47,.12),0 10px 26px -20px rgba(181,83,47,.42);
}
@media(hover:hover) and (pointer:fine){
  html:root body .abertura a.ab-cta.fim-cta:hover,html:root body .fim a.fim-cta.vidro-salmao:hover{
    background:linear-gradient(180deg,rgba(246,170,140,.34),rgba(217,119,87,.18) 55%,rgba(217,119,87,.24));transform:none}
}
/* o fim: o PARADOXO grande de volta, e o botão no mesmo vidro do hero */
.fim--marca{padding:clamp(80px,11vw,150px) 0 clamp(72px,10vw,128px)}
.fim--marca .fim-luz{top:46%}
html:root body .fim a.fim-cta.vidro-salmao{margin-top:clamp(30px,4vw,52px)}
/* o halo do cursor (branco, em "screen") somava com o vidro e estourava: fica em menos da metade */
.halo.on{opacity:.38}

/* ---------- a legenda: o fio, "Reproduzir transformação" e "Ir ao hero" ---------- */
.ab-botao{position:relative;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;border:0;border-radius:999px;
  font:600 13px/1 var(--body);letter-spacing:0;color:var(--ink);cursor:pointer;touch-action:manipulation;
  background:rgba(var(--tinta-rgb),.06);box-shadow:inset 0 0 0 1px rgba(var(--tinta-rgb),.10);
  transition:background .18s cubic-bezier(.2,.8,.2,1),transform .16s cubic-bezier(.23,1,.32,1)}
.ab-botao::after{content:"";position:absolute;inset:-3px -2px}       /* o alvo de toque chega a 44 px */
.ab-botao--rever{color:var(--acento)}
.ab-botao:active{transform:scale(.97)}
.ab-botao:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.ab-botao:hover{background:rgba(var(--tinta-rgb),.12)}}
.ab-seta{width:14px;height:14px;display:block}
.ab-trilho{height:1px;background:rgba(var(--tinta-rgb),.14);position:relative}
.ab-trilho i{position:absolute;inset:0;background:var(--acento);transform-origin:0 50%;transform:scaleX(var(--ab-t,0))}

/* ---------- o topo durante a abertura: só o botão do tema, à mão ---------- */
html.ab-js.sob-o-hero body .topo{opacity:1;visibility:visible;transform:none;pointer-events:none}
html.ab-js.sob-o-hero body .topo::before{opacity:0}
html.ab-js.sob-o-hero body .topo > .marca,html.ab-js.sob-o-hero body .topo > .topo-nav{opacity:0;visibility:hidden}
html.ab-js.sob-o-hero body .topo .tema{pointer-events:auto}
html[data-tema=claro].ab-js.sob-o-hero body .topo .tema{color:#1F1714}

/* ---------- o símbolo do tema: sol (no escuro, para clarear) e lua (no claro, para escurecer) ---------- */
html .tema-icone.tema-icone--sol-lua,html[data-tema=claro] .tema-icone.tema-icone--sol-lua{transform:none}
.tema-icone--sol-lua .ic-sol,.tema-icone--sol-lua .ic-lua{transform-origin:12px 12px;transition:opacity .22s cubic-bezier(.2,.8,.2,1),transform .34s cubic-bezier(.23,1,.32,1)}
.tema-icone--sol-lua .ic-lua{opacity:0;transform:rotate(-40deg) scale(.6)}
html[data-tema=claro] .tema-icone--sol-lua .ic-sol{opacity:0;transform:rotate(60deg) scale(.6)}
html[data-tema=claro] .tema-icone--sol-lua .ic-lua{opacity:1;transform:none}

/* ================= sem a cena conduzida: parado, em sequência ================= */
html:not(.ab-js) .ab-canvas,html:not(.ab-js) .ab-veu,html:not(.ab-js) .ab-legenda{display:none}
html:not(.ab-js) .ab-poster img{height:min(64vh,620px);object-fit:cover;object-position:50% 36%}
html:not(.ab-js) .ab-textos{display:grid;gap:clamp(40px,6vw,64px);padding:clamp(40px,6vw,72px) var(--gut) 24px;max-width:calc(760px + 2 * var(--gut))}
html:root:not(.ab-js) body .abertura a.ab-cta.fim-cta{margin:24px var(--gut) clamp(48px,8vw,96px)}

/* ================= a cena conduzida pela rolagem ================= */
html.ab-js .abertura{height:460vh} /* o script ajusta em px: 1 tela + a rolagem presa */
html.ab-js .ab-palco{position:sticky;top:0;height:100vh;height:100svh}
html.ab-js .ab-poster{position:absolute;inset:0;opacity:0;pointer-events:none}
html.ab-js .ab-poster img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* sem WebGL ou aparelho fraco: a imagem da cena acende com a rolagem, no lugar do 3D */
html.ab-js.ab-imagem .ab-canvas{display:none}
html.ab-js.ab-imagem .ab-poster{opacity:clamp(0,calc((var(--ab-p,0) - .05) * 1.4),1)}

/* o véu: apaga só a faixa de baixo, onde a copy mora — as letras ficam no alto */
html.ab-js .ab-veu{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(var(--ab-fundo-rgb),0) 50%,rgba(var(--ab-fundo-rgb),.55) 68%,rgba(var(--ab-fundo-rgb),.86) 100%)}
/* ousado, no escuro: o espectro é mais claro que a aurora salmão — o véu atrás da copy fecha mais cedo e mais fundo */
html.ab-ousado.ab-js:not([data-tema=claro]) .ab-veu{background:linear-gradient(to bottom,rgba(0,0,0,0) 42%,rgba(0,0,0,.74) 58%,rgba(0,0,0,.94) 100%)}
/* no claro o véu começa antes: marfim por trás da copy, para o salmão escuro ler com folga */
html[data-tema=claro].ab-js .ab-veu{background:linear-gradient(to bottom,rgba(var(--ab-fundo-rgb),0) 42%,rgba(var(--ab-fundo-rgb),.72) 58%,rgba(var(--ab-fundo-rgb),.94) 100%)}

html.ab-js .ab-textos{position:absolute;left:var(--gut);bottom:clamp(112px,15vh,160px);width:min(760px,calc(100% - 2 * var(--gut) - 260px));display:grid;align-items:end}
html.ab-js .ab-msg{grid-area:1/1;opacity:0;transform:translate3d(0,12px,0);pointer-events:none;
  transition:opacity .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1)}
html.ab-js .ab-msg.on{opacity:1;transform:none}

html:root.ab-js body .abertura a.ab-cta.fim-cta{position:absolute;right:var(--gut);bottom:clamp(112px,15vh,160px);margin:0;
  transition:opacity .24s cubic-bezier(.2,.8,.2,1),visibility 0s,background .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s cubic-bezier(.2,.8,.2,1)}
html.ab-js .ab-legenda{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(22px,4vh,40px);display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;
  transition:opacity .24s cubic-bezier(.2,.8,.2,1),visibility 0s}
html.ab-js .ab-legenda .ab-trilho{margin-right:14px}

/* a palavra formada fica sozinha: nenhuma mensagem, nenhum botão (o tema, só um símbolo, fica) */
html:root.ab-js.ab-so-palavra body .abertura a.ab-cta.fim-cta,html.ab-js.ab-so-palavra .ab-legenda{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s}

/* ---------- o fim, como cena de cinema (rodada 6) ----------
   A palavra fica um instante sozinha; a luz atravessa as letras (letras3d.js) e, junto com ela, WEBSTUDIO abre do
   centro até a largura da palavra; depois a frase sobe de dentro da linha e, por último, o que fazemos. Subiu de
   volta: tudo sai rápido, sem esperar. A posição vem da cena (--ab-pe, --ab-alt, --ab-larg, --ab-cx, em px, medidas
   no enquadramento final); sem a cena, das proporções da imagem de apoio. */
html.ab-js .ab-assinatura{position:absolute;pointer-events:none;
  --larg:var(--ab-larg,88vw);
  width:var(--larg);left:calc(var(--ab-cx,48.4%) - var(--larg) / 2);
  top:calc(var(--ab-pe,calc(35svh + 5.3vw)) + var(--ab-alt,10.6vw) * .62);
  visibility:hidden;transition:visibility 0s linear .3s}
html.ab-js .ab-selo-letras i{opacity:0;transform:translate3d(calc((4 - var(--i)) * var(--larg) / 9 * .86),0,0);
  transition:opacity .22s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1)}
html.ab-js .ab-linha > span{transform:translate3d(0,150%,0);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
html.ab-js .ab-sub{opacity:0;transform:translate3d(0,8px,0);transition:opacity .22s cubic-bezier(.2,.8,.2,1),transform .22s cubic-bezier(.2,.8,.2,1)}
html.ab-js.ab-so-palavra .ab-assinatura{visibility:visible;transition:visibility 0s}
html.ab-js.ab-so-palavra .ab-selo-letras i{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.8,.2,1) calc(.8s + max(4 - var(--i), var(--i) - 4) * .06s),transform 1.3s cubic-bezier(.16,1,.3,1) .72s}
html.ab-js.ab-so-palavra .ab-linha > span{transform:none;transition:transform 1s cubic-bezier(.16,1,.3,1) 1.4s}
html.ab-js.ab-so-palavra .ab-linha + .ab-linha > span{transition-delay:1.52s}
html.ab-js.ab-so-palavra .ab-sub{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.8,.2,1) 2.05s,transform .9s cubic-bezier(.16,1,.3,1) 2.05s}
/* os atalhos levam direto ao fim: sem a espera do filme, a assinatura já está lá */
html.ab-js.ab-so-palavra.ab-assinatura-ja .ab-assinatura *{transition-delay:0s!important}

/* a passagem: os parceiros sobem por baixo da assinatura, sem cobri-la */
html.ab-js .ab-passagem{position:relative;z-index:1;height:16vh;height:16svh;margin-top:-30vh;margin-top:-30svh;
  background:linear-gradient(to bottom,rgba(var(--ab-fundo-rgb),0),var(--void));pointer-events:none}
html.ab-js .ab-passagem + .galeria{z-index:1;background:var(--void)}

/* celular: a copy embaixo; abaixo dela o botão; no pé, o fio e os dois botões; as letras no terço de cima */
@media (max-width:899px){
  html.ab-js .ab-textos{left:16px;width:calc(100% - 32px);bottom:calc(146px + env(safe-area-inset-bottom,0px))}
  html:root.ab-js body .abertura a.ab-cta.fim-cta{right:auto;left:16px;bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  html.ab-js .ab-legenda{left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom,0px));grid-template-columns:auto auto 1fr;row-gap:12px}
  html.ab-js .ab-legenda .ab-trilho{grid-column:1/-1;grid-row:1;margin:0}
  .ab-botao{height:36px;padding:0 13px;font-size:12.5px}
  .ab-botao::after{inset:-4px -2px}
  .ab-msg h1{font-size:clamp(30px,8.4vw,40px)}
  .ab-msg h2{font-size:clamp(24px,6.6vw,30px)}
  .ab-msg p{font-size:16px}
  .ab-msg--tese h2{font-size:clamp(30px,8.6vw,40px)}
  /* a palavra no celular tem ~40 px de altura: a frase fica abaixo dela na hierarquia */
  .ab-selo{font-size:11px}
  .ab-frase{margin-top:clamp(36px,7svh,64px);font-size:clamp(26px,8vw,34px)}
  .ab-sub{margin-top:10px}
  html.ab-js .ab-passagem{margin-top:-36svh}
  html.ab-js .ab-assinatura{top:calc(var(--ab-pe,calc(31svh + (100vw - 32px) / 16.6)) + var(--ab-alt,calc((100vw - 32px) / 8.3)) * 1.05);
    --larg:var(--ab-larg,calc(100vw - 32px));left:calc(var(--ab-cx,50%) - var(--larg) / 2)}
}
@media (max-height:620px) and (min-width:900px){
  html.ab-js .ab-textos,html:root.ab-js body .abertura a.ab-cta.fim-cta{bottom:96px}
  .ab-msg h1{font-size:clamp(28px,3.4vw,44px)}
}

@media (prefers-reduced-motion:reduce){
  html.ab-js .ab-msg{transform:none}
}

/* --------- o bloco final só com o botão --------- */
.fim--so-botao{padding:clamp(88px,12vw,160px) 0 clamp(72px,10vw,128px)}
.fim--so-botao .fim-luz{top:50%}
.fim--so-botao .fim-cta{margin-top:0}

/* a captura da imagem de apoio: só a cena, sem copy nem botões */
html.ab-captura .ab-assinatura,html.ab-captura .ab-textos,html.ab-captura .ab-cta,html.ab-captura .ab-legenda,html.ab-captura .ab-veu,html.ab-captura .topo,html.ab-captura .ponto,html.ab-captura .halo{display:none!important}