feat(site): blocos 3D da marca, novas ofertas e hero mais abrangente

Hero e movimento
- cena 3D em tempo real com os blocos da marca (kit feito no Blender, 3d/blocos.py):
  marca, tela, integrações e dados; segue a rolagem, tem vida em repouso, reage ao
  cursor e, parada no topo, passa sozinha pelos estados com legenda
- três níveis de aparelho (full, lite, static); sem WebGL fica o pôster
- título novo: "Sites e sistemas sob medida para o jeito que a sua empresa trabalha."
- faixa de clientes com o ramo, linha do primeiro passo, hero alinhado às seções
- rótulos digitados, entrada dos blocos, cortina de blocos entre páginas e capa
  compartilhada entre a lista de cases e o case

Ofertas
- atendimento no WhatsApp com IA e nota fiscal para a reforma tributária
  (páginas de serviço, cartões da home, formulário e aviso com data de validade)
- página /ia atualizada, com fontes
- peças 3D em loop nos cartões e topos de página (3d/pecas.py)

Design
- hover por papel (bloco nos botões, barra nos links), rótulos sem caixa alta
- um destino por rótulo: "Falar sobre meu projeto" leva ao formulário,
  "Chamar no WhatsApp" abre o WhatsApp
- logo montado em blocos, 404 redesenhado, grades sem célula vazia
- ícones do PWA e manifesto novos

Specs em specs/, contexto de design em DESIGN.md e PRODUCT.md.

app/globals.css

@@ -32,6 +32,9 @@
   --white: #ffffff;
   --slash: #ccff00;
   --slash-dim: rgba(204, 255, 0, 0.16);
+  /* verde da marca WhatsApp: só nos controles que abrem o WhatsApp */
+  --whatsapp: #25d366;
+  --whatsapp-hover: #54e58b;
   --meta: #4a4a4a;
   --border: rgba(10, 10, 10, 0.1);
   --border-light: rgba(10, 10, 10, 0.06);
@@ -56,8 +59,8 @@
   --shell: clamp(1240px, 76vw, 1760px);
   --fs-section-title: min(max(clamp(24px, 4vw, 44px), 3.05vw), 68px);
   --fs-lead: min(max(15px, 1.05vw), 19px);
-  /* Piso do texto corrido em qualquer tela. Só os rótulos mono curtos (.ds-eyebrow, .ds-kicker, .ds-tag,
-     .ds-metric) descem a 12 px. */
+  /* Piso do texto corrido em qualquer tela. Os rótulos mono curtos ficam abaixo: .ds-eyebrow e .ds-kicker em 13 px,
+     .ds-tag e .ds-metric em 12 px. */
   --fs-body: 15px;
   /* Dois pesos de título, e só: seção (h1 e h2) e cartão (h3 e menores). */
   --fw-section: 700;
@@ -312,12 +315,11 @@ textarea {
   }
 }
 
-/* rótulos curtos em mono: 12 px no mínimo e espaçamento moderado */
+/* rótulos curtos em mono: 13 px, sem caixa alta, espaçamento leve */
 .ds-eyebrow,
 .ds-kicker {
-  font-size: 12px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font-size: 13px;
+  letter-spacing: 0.02em;
   color: var(--meta);
 }
 
@@ -433,14 +435,6 @@ textarea {
   line-height: 1.25;
   letter-spacing: 0;
   text-transform: none;
-  transition:
-    transform 0.2s ease,
-    background 0.2s ease,
-    border-color 0.2s ease;
-}
-
-.ds-link:hover {
-  transform: translateY(-1px);
 }
 
 .ds-link-accent {
@@ -448,43 +442,12 @@ textarea {
   background: var(--slash);
   padding: 12px 18px;
   font-weight: 600;
-  transition:
-    transform 0.25s ease,
-    box-shadow 0.25s ease,
-    background 0.25s ease;
-}
-
-.ds-link-accent:hover {
-  background: #ffffff;
-  box-shadow:
-    0 0 20px rgba(204, 255, 0, 0.45),
-    0 0 48px rgba(204, 255, 0, 0.18);
-}
-
-.ds-section-dark .ds-link-accent:hover {
-  box-shadow:
-    0 0 24px rgba(204, 255, 0, 0.55),
-    0 0 60px rgba(204, 255, 0, 0.22);
 }
 
 /* contorno: ação secundária (sem lima) */
 .ds-link-muted {
   padding: 12px 18px;
   border: 1px solid rgba(10, 10, 10, 0.28);
-  transition:
-    transform 0.25s ease,
-    box-shadow 0.25s ease,
-    border-color 0.25s ease;
-}
-
-.ds-link-muted:hover {
-  border-color: var(--ink-40);
-  box-shadow: 0 4px 20px rgba(10, 10, 10, 0.12);
-}
-
-.ds-section-dark .ds-link-muted:hover {
-  border-color: rgba(255, 255, 255, 0.7);
-  box-shadow: none;
 }
 
 /* link de texto: ação terciária, sublinhada, sem caixa */
@@ -495,9 +458,160 @@ textarea {
   text-underline-offset: 5px;
 }
 
-.ds-link-text:hover {
+/*
+ * Resposta ao ponteiro e ao foco: um tratamento por papel, entrando pela esquerda em 280 ms (DESIGN.md). Só
+ * `transform` anima; cor e borda trocam na hora. Com movimento reduzido a troca inteira é instantânea.
+ *
+ * Bloco (botão verde e de contorno): o ::before cobre o botão da esquerda para a direita, entre o fundo e o texto
+ * (`isolation` faz o z-index -1 ficar dentro do botão). Verde: bloco cor de papel, texto escuro. Contorno no fundo
+ * escuro: branco a 12%. Contorno no fundo claro: bloco escuro e o texto inverte.
+ */
+:is(
+    .cv-fill,
+    .cv-outline-dark,
+    .cv-outline-light,
+    .ds-link-accent,
+    .ds-link-muted
+  ) {
+  position: relative;
+  isolation: isolate;
+}
+
+:is(
+    .cv-fill,
+    .cv-outline-dark,
+    .cv-outline-light,
+    .ds-link-accent,
+    .ds-link-muted
+  )::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--block, var(--paper));
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 280ms var(--ease-out);
+  pointer-events: none;
+}
+
+.cv-outline-light,
+.ds-link-muted {
+  --block: var(--ink);
+}
+
+.cv-outline-dark,
+.ds-section-dark .ds-link-muted {
+  --block: rgba(255, 255, 255, 0.12);
+}
+
+/* Link de texto e item do menu: uma barra de 2 px cresce da esquerda sob o texto. --bar-x recua as pontas (o padding
+   do item), --bar-y põe a barra na altura do sublinhado. */
+:is(.cv-bar, .ds-link-text) {
+  position: relative;
+}
+
+:is(.cv-bar, .ds-link-text)::after {
+  content: "";
+  position: absolute;
+  left: var(--bar-x, 0);
+  right: var(--bar-x, 0);
+  top: var(--bar-y, calc(50% + 0.62em));
+  height: 2px;
+  background: currentColor;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 280ms var(--ease-out);
+  pointer-events: none;
+}
+
+:is(
+    .cv-fill,
+    .cv-outline-dark,
+    .cv-outline-light,
+    .ds-link-accent,
+    .ds-link-muted
+  ):focus-visible::before,
+:is(.cv-bar, .ds-link-text):focus-visible::after {
   transform: none;
-  text-decoration-thickness: 2px;
+}
+
+.cv-outline-light:focus-visible,
+.ds-link-muted:focus-visible {
+  border-color: var(--ink);
+  color: var(--paper);
+}
+
+.cv-outline-dark:focus-visible,
+.ds-section-dark .ds-link-muted:focus-visible {
+  border-color: rgba(255, 255, 255, 0.55);
+  color: #fff;
+}
+
+/* só com mouse: no toque o :hover fica preso depois do toque */
+@media (hover: hover) {
+  :is(
+      .cv-fill,
+      .cv-outline-dark,
+      .cv-outline-light,
+      .ds-link-accent,
+      .ds-link-muted
+    ):hover::before,
+  :is(.cv-bar, .ds-link-text):hover::after {
+    transform: none;
+  }
+
+  .cv-outline-light:hover,
+  .ds-link-muted:hover {
+    border-color: var(--ink);
+    color: var(--paper);
+  }
+
+  .cv-outline-dark:hover,
+  .ds-section-dark .ds-link-muted:hover {
+    border-color: rgba(255, 255, 255, 0.55);
+    color: #fff;
+  }
+}
+
+/* Botão verde sobre fundo claro (seções e cartões claros): o bloco cor de papel sumia no branco e o botão parecia
+   desativado. Ali o bloco é escuro e o texto inverte, como no botão de contorno claro. */
+.ds-section:not(.ds-section-dark) :is(.cv-fill, .ds-link-accent) {
+  --block: var(--ink);
+}
+
+.ds-section:not(.ds-section-dark) :is(.cv-fill, .ds-link-accent):focus-visible {
+  color: var(--paper);
+}
+
+@media (hover: hover) {
+  .ds-section:not(.ds-section-dark) :is(.cv-fill, .ds-link-accent):hover {
+    color: var(--paper);
+  }
+}
+
+/* botão verde: ao pressionar, encolhe um pouco */
+:is(.cv-fill, .ds-link-accent) {
+  transition: scale 0.15s ease-out;
+}
+
+:is(.cv-fill, .ds-link-accent):active {
+  scale: 0.98;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(
+      .cv-fill,
+      .cv-outline-dark,
+      .cv-outline-light,
+      .ds-link-accent,
+      .ds-link-muted
+    )::before,
+  :is(.cv-bar, .ds-link-text)::after,
+  :is(.cv-fill, .ds-link-accent) {
+    transition: none;
+  }
 }
 
 /* O preflight do Tailwind zera o list-style de ul/ol: o marcador volta aqui. Na cor do texto (o lima sobre o
@@ -651,10 +765,11 @@ ol.ds-list {
 }
 
 /* Hero: palco de 100svh; com a cena 3D (data-dive, mais abaixo) ele fica fixo enquanto a rolagem conduz o mergulho.
-   --hero-p (0 a 1) e --hero-open (0 a 1: a máscara do fundo se abrindo) vêm de cinematic/HeroField.tsx. */
+   --hero-p (0 a 1) vem de cinematic/HeroField.tsx. */
 .hero {
   --hero-p: 0;
-  --hero-open: 0;
+  /* lado da peça (a marca em blocos) abaixo de 1024 px, onde ela divide a linha com o rótulo */
+  --hero-piece: clamp(112px, 30vw, 200px);
   isolation: isolate;
 }
 
@@ -674,54 +789,127 @@ ol.ds-list {
   }
 }
 
-/* Máscara dos fundos ambientes do hero (cena 3D e malha estática): transparente no miolo, onde ficam o título
-   e as molduras da direita, e opaca nas bordas e cantos. Com o mergulho (--hero-open 0 → 1) o miolo some e o
-   fundo aparece inteiro, quando o texto e a coluna da direita já saíram de cena. */
-.hero-glow::after,
-.hero-field {
-  --clear: calc((1 - var(--hero-open)) * 52% - 1%);
-  --feather: calc((1 - var(--hero-open)) * 30%);
-  mask-image: radial-gradient(
-    ellipse at 46% 50%,
-    transparent var(--clear),
-    #000 calc(var(--clear) + var(--feather) + 1%)
-  );
-}
-
-/* Sem WebGL, com aparelho que não aguenta a cena, ou antes de ela carregar: malha de pontos estática, leve */
-.hero-glow::after {
-  content: "";
+/* Peça do hero: a marca em blocos renderizada no Blender (3d/blocos.py). É o primeiro quadro em qualquer aparelho; onde
+   a cena 3D roda, o canvas assume no mesmo lugar. Abaixo de 1024 px ela fica no canto, na linha do rótulo (que ganha a
+   altura dela); de 1024 px em diante fica logo à direita da coluna do texto. `translate`, e não `transform`, porque a
+   entrada (.hero-in) anima o `transform`. */
+.hero-piece {
   position: absolute;
-  inset: 0;
-  background:
-    radial-gradient(circle, rgba(244, 242, 237, 0.22) 1px, transparent 1.5px) 0
-    0 / 22px 22px;
-  opacity: 0.6;
-  transition: opacity 1.2s var(--ease-out);
+  top: calc(var(--site-header-height) + clamp(8px, 2.5svh, 32px));
+  right: var(--sp-6);
+  width: var(--hero-piece);
+  pointer-events: none;
 }
 
-.hero:has(.hero-field[data-ready]) .hero-glow::after {
-  opacity: 0;
+.hero-kicker {
+  min-height: var(--hero-piece);
+  padding-right: calc(var(--hero-piece) + var(--sp-3));
 }
 
-/* Fundo ambiente: a cena 3D fica com pouca opacidade (sobe para a opacidade cheia só no mergulho). O
-   desenho entra por animação (e não por transition) para a opacidade poder seguir a rolagem sem atraso. */
+@media (min-width: 1024px) {
+  /* o palco é a referência de largura (cqw) do conteúdo, da coluna do texto e da peça */
+  .hero-stage {
+    container-type: inline-size;
+  }
+
+  .hero {
+    /* A mesma coluna do .ds-section-shell das outras seções: o padding de .ds-section ou a sobra de --shell, o que for
+       maior. */
+    --hero-gutter: max(clamp(24px, 6vw, 64px), (100cqw - var(--shell)) / 2);
+    /* 20% maior que o min(46%, 680px) de antes */
+    --hero-piece: min(55.2cqw, 816px);
+    /* folga entre o fim da coluna do texto e o desenho da peça */
+    --hero-gap: 40px;
+    /* O texto ocupa o que sobra à esquerda do desenho da peça (65% da largura do pôster), menos a folga. */
+    --hero-col-w: calc(
+      100cqw -
+      2 *
+      var(--hero-gutter) -
+      0.65 *
+      var(--hero-piece) -
+      var(--hero-gap)
+    );
+  }
+
+  .hero-content,
+  .hero-foot {
+    max-width: none;
+    padding-inline: var(--hero-gutter);
+  }
+
+  .hero-col {
+    max-width: var(--hero-col-w);
+  }
+
+  /* O desenho ocupa de 16,3% a 81,3% da largura do pôster (o resto é transparente): a borda direita do desenho fica na
+     borda direita da coluna das seções, e a sobra transparente passa para a margem (o palco a corta). -49%, e não
+     -52%: em 1280x720 o topo dos blocos fica a uns 20 px do cabeçalho, em vez de encostar nele. */
+  .hero-piece {
+    top: 50%;
+    right: calc(var(--hero-gutter) - 0.187 * var(--hero-piece));
+    width: var(--hero-piece);
+    translate: 0 -49%;
+  }
+
+  /* Telas baixas (1280x720, 1024x768): os espaços entre os blocos do texto encolhem com a altura, para o palco fixo
+     caber inteiro. Em 900 px de altura ou mais ficam como no celular. */
+  .hero-kicker {
+    min-height: 0;
+    padding-right: 0;
+    margin-bottom: clamp(8px, 1.6svh, 16px);
+  }
+
+  /* O título acompanha a coluna: a primeira linha, "Sites e sistemas sob medida" (12,4em, e "sob medida" não quebra),
+     cabe inteira nela, e o título fica em 3 linhas. */
+  .hero-title {
+    font-size: clamp(
+      34px,
+      min(8.4vw, 5.2svh + 14px, var(--hero-col-w) / 12.6),
+      84px
+    );
+  }
+
+  .hero-title + p {
+    margin-top: clamp(8px, 1.6svh, 16px);
+  }
+
+  .hero-actions {
+    margin-top: clamp(12px, 2.2svh, 20px);
+  }
+
+  .hero-actions ~ .hero-col {
+    margin-top: clamp(8px, 1.4svh, 12px);
+  }
+}
+
+/* De 1280 px em diante a linha dos botões pode passar da coluna até 24 px do desenho da peça: assim os dois botões e o
+   link do WhatsApp ficam numa linha só onde couberem (1440 px sim; 1280 px não, e o link desce como antes). */
+@media (min-width: 1280px) {
+  .hero-actions {
+    max-width: calc(var(--hero-col-w) + var(--hero-gap) - 24px);
+  }
+}
+
+/* Cena 3D do hero: o canvas cobre o palco (nível full, com o mergulho) ou só a caixa da peça (nível lite, por estilo em
+   linha de HeroField) e entra com fade por cima do pôster, que some quando a cena está pronta. Se a cena desiste, o
+   pôster volta. */
 .hero-field {
   position: absolute;
   inset: 0;
   opacity: 0;
   pointer-events: none;
+  transition: opacity 0.6s var(--ease-out);
 
   &[data-ready] {
-    opacity: calc(0.5 + 0.5 * var(--hero-open));
-    animation: hero-field-in 1.6s var(--ease-out) both;
+    opacity: 1;
   }
 }
 
-@keyframes hero-field-in {
-  from {
-    opacity: 0;
-  }
+/* O pôster some por `visibility`, depois que o canvas terminou de entrar por baixo dele: mudar a opacidade da imagem a
+   repintava, e o navegador contava essa repintura como um novo maior elemento da dobra (LCP) aos 2,3 s. */
+.hero:has(.hero-field[data-ready]) .hero-piece img {
+  visibility: hidden;
+  transition: visibility 0s linear 0.6s;
 }
 
 .hero-scrim {
@@ -747,15 +935,16 @@ ol.ds-list {
 }
 
 /* Entrada: as palavras do título já pintam no primeiro quadro (sem opacity:0, bom para o LCP) e sobem em cascata
-   (só deslocamento: desfocar texto grande a cada quadro obriga a redesenhá-lo) */
+   (só deslocamento: desfocar texto grande a cada quadro obriga a redesenhá-lo). Título, apoio, botões, primeiro passo,
+   faixa de clientes e rodapé do hero assentam em até 1,5 s depois da carga. */
 .hero-title {
   font-weight: var(--fw-section);
 }
 
 .hero-word {
   display: inline-block;
-  animation: hero-word 1.1s var(--ease-out) both;
-  animation-delay: calc(0.12s + var(--i) * 45ms);
+  animation: hero-word 0.85s var(--ease-out) both;
+  animation-delay: calc(0.06s + var(--i) * 35ms);
 }
 
 @keyframes hero-word {
@@ -764,14 +953,39 @@ ol.ds-list {
   }
 }
 
+/* As palavras em verde entram sob um bloco da mesma cor, que recolhe para a direita; o texto já está pintado
+   por baixo desde o primeiro quadro. */
+@media (prefers-reduced-motion: no-preference) {
+  .hero-mark {
+    position: relative;
+  }
+
+  .hero-mark::after {
+    content: "";
+    position: absolute;
+    inset: 0.08em -0.04em 0.02em;
+    background: var(--slash);
+    transform: scaleX(0);
+    transform-origin: right;
+    animation: hero-mark 0.45s var(--ease-in) both;
+    animation-delay: calc(0.35s + var(--i) * 60ms);
+  }
+}
+
+@keyframes hero-mark {
+  from {
+    transform: scaleX(1);
+  }
+}
+
 .hero-in,
 .hero-foot > * {
-  animation: hero-in 1s var(--ease-out) both;
+  animation: hero-in 0.8s var(--ease-out) both;
   animation-delay: var(--d, 0.05s);
 }
 
 .hero-foot > * {
-  --d: 0.85s;
+  --d: 0.66s;
 }
 
 @keyframes hero-in {
@@ -1005,10 +1219,10 @@ html.lenis {
     0 0 1px rgba(204, 255, 0, 0.1);
 }
 
-/* Navegação entre páginas (app/template.tsx liga as transições de visualização do React): a página atual
-   recua e some, a nova chega de baixo. Sem desfoque e sem sobreposição (a nova só começa quando a antiga acabou de
-   sumir), e o fundo (html e body) fica escuro (--ink) enquanto dura a troca: cada página some e vem de um fundo só,
-   nunca de uma mistura de creme com preto. O cabeçalho tem nome próprio e fica parado durante a troca. */
+/* Navegação entre páginas (app/template.tsx liga as transições de visualização do React): cortina de blocos. A página
+   que sai fica parada por baixo e a que entra aparece por uma máscara em degraus de blocos quadrados, da esquerda
+   embaixo para a direita em cima (a diagonal do símbolo). O fundo (html e body) fica escuro (--ink) enquanto dura a
+   troca, e o cabeçalho tem nome próprio e fica parado por cima. */
 /* biome-ignore lint/correctness/noUnknownPseudoClass: :active-view-transition é do CSS de transições de visualização (Chrome 134+); Biome ainda não o conhece */
 html:active-view-transition {
   background: var(--ink);
@@ -1029,43 +1243,119 @@ html:active-view-transition body {
   z-index: 100;
 }
 
-/* biome-ignore lint/correctness/noUnknownTypeSelector: page é um nome de view-transition, não um elemento */
-::view-transition-group(page) {
+/* --page-wipe vai de 0 (nada da página nova à vista) a 1 (tudo). Registrada, ela anima como número; o valor
+   inicial 1 deixa a página nova inteira onde a animação não roda */
+@property --page-wipe {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
+/* A classe "page" vem do `default` do ViewTransition (template.tsx); a página que sai e a que entra têm nomes
+   próprios, cada uma no lugar em que estava na tela */
+::view-transition-old(.page) {
   animation: none;
 }
 
-/* biome-ignore lint/correctness/noUnknownTypeSelector: page é um nome de view-transition, não um elemento */
-::view-transition-old(page) {
-  animation: page-out 240ms cubic-bezier(0.7, 0, 0.84, 0) both;
+/* 8 colunas de 12,5% da largura, cada uma crescendo do pé da tela para cima em blocos da largura da coluna
+   (round(down, …, 12.5vw)), uma coluna um bloco atrás da outra: a borda é uma escada na diagonal. A imagem da
+   página nova mede a página inteira e começa no topo da tela (o Next a abre rolada para cima), por isso a
+   altura se conta em vh a partir do pé da tela. Com 100vw + 100vh de caminho, a última coluna passa da altura
+   da tela em 1. Sem round() ou sem máscara, a declaração não vale e a página nova aparece inteira na hora. Cada
+   coluna tem 1px a mais de largura para não sobrar fresta entre colunas vizinhas. */
+::view-transition-new(.page) {
+  --page-step: 12.5vw;
+  --page-run: calc(var(--page-wipe) * (100vh + 100vw));
+  --c0: max(0px, round(down, var(--page-run), var(--page-step)));
+  --c1: max(
+    0px,
+    round(down, var(--page-run) - var(--page-step), var(--page-step))
+  );
+  --c2: max(
+    0px,
+    round(down, var(--page-run) - 2 * var(--page-step), var(--page-step))
+  );
+  --c3: max(
+    0px,
+    round(down, var(--page-run) - 3 * var(--page-step), var(--page-step))
+  );
+  --c4: max(
+    0px,
+    round(down, var(--page-run) - 4 * var(--page-step), var(--page-step))
+  );
+  --c5: max(
+    0px,
+    round(down, var(--page-run) - 5 * var(--page-step), var(--page-step))
+  );
+  --c6: max(
+    0px,
+    round(down, var(--page-run) - 6 * var(--page-step), var(--page-step))
+  );
+  --c7: max(
+    0px,
+    round(down, var(--page-run) - 7 * var(--page-step), var(--page-step))
+  );
+  animation: page-wipe 600ms linear both;
+  mask-image:
+    linear-gradient(#000, #000), linear-gradient(#000, #000),
+    linear-gradient(#000, #000), linear-gradient(#000, #000),
+    linear-gradient(#000, #000), linear-gradient(#000, #000),
+    linear-gradient(#000, #000), linear-gradient(#000, #000);
+  mask-repeat: no-repeat;
+  mask-size:
+    calc(12.5% + 1px) var(--c0),
+    calc(12.5% + 1px) var(--c1),
+    calc(12.5% + 1px) var(--c2),
+    calc(12.5% + 1px) var(--c3),
+    calc(12.5% + 1px) var(--c4),
+    calc(12.5% + 1px) var(--c5),
+    calc(12.5% + 1px) var(--c6),
+    calc(12.5% + 1px) var(--c7);
+  mask-position:
+    0% calc(100vh - var(--c0)),
+    calc(100% / 7) calc(100vh - var(--c1)),
+    calc(200% / 7) calc(100vh - var(--c2)),
+    calc(300% / 7) calc(100vh - var(--c3)),
+    calc(400% / 7) calc(100vh - var(--c4)),
+    calc(500% / 7) calc(100vh - var(--c5)),
+    calc(600% / 7) calc(100vh - var(--c6)),
+    100% calc(100vh - var(--c7));
 }
 
-/* biome-ignore lint/correctness/noUnknownTypeSelector: page é um nome de view-transition, não um elemento */
-::view-transition-new(page) {
-  animation: page-in 600ms var(--ease-out) 240ms both;
-}
-
-@keyframes page-out {
-  to {
-    opacity: 0;
-    transform: scale(0.97);
-  }
-}
-
-@keyframes page-in {
+@keyframes page-wipe {
   from {
-    opacity: 0;
-    transform: translateY(40px) scale(1.015);
+    --page-wipe: 0;
   }
+  to {
+    --page-wipe: 1;
+  }
+}
+
+/* Capa do projeto (lista da home ou de cases -> topo do case): viaja por cima da cortina e por baixo do cabeçalho */
+::view-transition-group(.case-cover) {
+  animation-duration: 500ms;
+  animation-timing-function: var(--ease-out);
+  z-index: 50;
+}
+
+/* o pôster do celular (alto) e o do computador (largo) preenchem a mesma caixa, presos no topo, sem vazar por baixo */
+::view-transition-old(.case-cover),
+::view-transition-new(.case-cover) {
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
+  overflow: clip;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  /* biome-ignore lint/correctness/noUnknownTypeSelector: page é um nome de view-transition, não um elemento */
-  ::view-transition-old(page) {
+  /* nada anima, nem o esmaecer padrão do navegador: a troca é instantânea */
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
     animation: none;
   }
 
-  /* biome-ignore lint/correctness/noUnknownTypeSelector: page é um nome de view-transition, não um elemento */
-  ::view-transition-new(page) {
+  ::view-transition-new(.page) {
     animation: none;
   }
 }
@@ -1124,6 +1414,38 @@ html:active-view-transition body {
     transform: none;
   }
 
+  /* Rótulo digitado: o texto se revela em passos, um por caractere, com um cursor de bloco na ponta, que pisca
+     três vezes e some. Só clip-path, translate e opacity. */
+  .ds-type {
+    position: relative;
+    width: fit-content;
+    max-width: 100%;
+    clip-path: inset(0 100% 0 0);
+  }
+
+  .ds-type::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background:
+      linear-gradient(currentColor, currentColor) left / 1ch 100% no-repeat;
+    opacity: 0;
+    translate: -1ch 0;
+  }
+
+  .ds-section-header[data-shown] .ds-type {
+    animation: ds-type calc(var(--n) * 32ms) steps(var(--n))
+      var(--reveal-delay, 0s) forwards;
+  }
+
+  .ds-section-header[data-shown] .ds-type::after {
+    animation:
+      ds-type-caret calc(var(--n) * 32ms) steps(var(--n))
+      var(--reveal-delay, 0s) forwards,
+      ds-type-blink 0.9s steps(1)
+      calc(var(--reveal-delay, 0s) + var(--n) * 32ms) forwards;
+  }
+
   .ds-lazy-reveal {
     opacity: 0;
     transform: translateY(20px) scale(1.02);
@@ -1138,6 +1460,37 @@ html:active-view-transition body {
   }
 }
 
+@keyframes ds-type {
+  to {
+    clip-path: inset(0);
+  }
+}
+
+@keyframes ds-type-caret {
+  from {
+    opacity: 1;
+    translate: -1ch 0;
+  }
+  to {
+    opacity: 1;
+    translate: calc(100% - 1ch) 0;
+  }
+}
+
+@keyframes ds-type-blink {
+  0%,
+  34%,
+  67% {
+    opacity: 1;
+  }
+  17%,
+  50%,
+  83%,
+  100% {
+    opacity: 0;
+  }
+}
+
 /* ScrollProgress: barra do topo e trilho lateral ligados à rolagem da página, sem JavaScript */
 @keyframes ds-progress-x {
   from {
@@ -1214,3 +1567,51 @@ html:active-view-transition body {
     display: none;
   }
 }
+
+/* Entrada de componentes que o React monta ao abrir (menu do celular, barra de cookies, botão do WhatsApp): o estado
+   inicial vem de @starting-style, sem JavaScript. A saída só anima onde o elemento continua no DOM ao fechar: o
+   vídeo ampliado (lightbox.css) e as perguntas frequentes (abaixo). Sem suporte do navegador, a troca é instantânea.
+   A altura das perguntas frequentes é a única propriedade de leiaute animada no site. */
+@media (prefers-reduced-motion: no-preference) {
+  .ds-enter {
+    transition:
+      opacity 280ms var(--ease-out),
+      translate 280ms var(--ease-out);
+
+    @starting-style {
+      opacity: 0;
+      translate: 0 var(--enter-y, 12px);
+    }
+  }
+
+  .ds-enter-pop {
+    transition:
+      opacity 280ms var(--ease-out),
+      scale 280ms var(--ease-out),
+      translate 200ms var(--ease-out);
+
+    @starting-style {
+      opacity: 0;
+      scale: 0.85;
+    }
+  }
+
+  .ds-faq-item {
+    interpolate-size: allow-keywords;
+  }
+
+  .ds-faq-item::details-content {
+    block-size: 0;
+    overflow-y: clip;
+    opacity: 0;
+    transition:
+      block-size 280ms var(--ease-out),
+      opacity 280ms var(--ease-out),
+      content-visibility 280ms allow-discrete;
+  }
+
+  .ds-faq-item[open]::details-content {
+    block-size: auto;
+    opacity: 1;
+  }
+}