feat(hero): camadas reconheciveis (tela, integracoes, tabela de dados), etiquetas e legendas do mergulho

A cena passa de discos abstratos para formas que um leigo reconhece. A camera
enquadra cada camada enquanto a legenda em linguagem simples explica o que e,
e so entao atravessa para a proxima.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

app/globals.css

@@ -1093,11 +1093,107 @@ textarea {
   }
 }
 
+/* Etiquetas presas às camadas da cena: a posição vem da cena a cada quadro (transform), o recuo para a
+   esquerda do ponto de ancoragem fica no translate */
+.hero-tag {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  max-width: 230px;
+  translate: calc(-100% - 14px) -50%;
+  border: 1px solid rgba(244, 242, 237, 0.14);
+  background: rgba(10, 10, 10, 0.62);
+  backdrop-filter: blur(4px);
+  padding: 7px 11px;
+  color: rgba(244, 242, 237, 0.78);
+  font: 13px / 1.35 var(--font-body);
+  text-align: right;
+  opacity: 0;
+  pointer-events: none;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: -14px;
+    width: 14px;
+    height: 1px;
+    background: var(--slash);
+  }
+
+  @media (min-width: 1024px) {
+    display: block;
+  }
+}
+
+.hero-tag-title,
+.hero-caption-title {
+  display: block;
+  color: var(--slash);
+  font: 600 11px / 1.4 var(--font-mono);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.hero-captions {
+  display: none;
+}
+
 @media (min-width: 1024px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
   .hero {
     height: 220svh;
   }
 
+  /* Legendas do mergulho: cada uma aparece enquanto a câmera atravessa a sua camada (--hero-p) */
+  .hero-captions {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: end center;
+    margin: 0;
+    padding: 0 var(--sp-6) 11svh;
+    list-style: none;
+    pointer-events: none;
+    /* faixa escura atrás da legenda, como em legenda de cinema, sem cobrir o centro da cena */
+    background: linear-gradient(0deg, rgba(10, 10, 10, 0.75), transparent 38%);
+    opacity: clamp(0, min((var(--hero-p) - 0.24) * 14, (0.94 - var(--hero-p)) * 14), 1);
+
+    & li {
+      --mid: calc((var(--from) + var(--to)) / 2);
+      grid-area: 1 / 1;
+      max-width: 26ch;
+      color: #f4f2ed;
+      font: 600 clamp(28px, 2.8vw, 48px) / 1.1 var(--font-display);
+      letter-spacing: -0.035em;
+      text-align: center;
+      text-shadow: 0 2px 40px rgba(10, 10, 10, 0.9);
+      opacity: clamp(0, min((var(--hero-p) - var(--from)) * 14, (var(--to) - var(--hero-p)) * 14), 1);
+      translate: 0 calc((var(--hero-p) - var(--mid)) * -160px);
+    }
+
+    /* mesmos intervalos em que a câmera enquadra cada camada (CAMERA_Z em HeroFieldScene.tsx) */
+    & li:nth-child(1) {
+      --from: 0.26;
+      --to: 0.46;
+    }
+
+    & li:nth-child(2) {
+      --from: 0.52;
+      --to: 0.71;
+    }
+
+    & li:nth-child(3) {
+      --from: 0.76;
+      --to: 0.92;
+    }
+
+    & .hero-caption-title {
+      margin-bottom: var(--sp-3);
+      font-size: 12px;
+    }
+  }
+
   .hero-stage {
     position: sticky;
     top: 0;
@@ -1108,7 +1204,7 @@ textarea {
   .hero-content {
     transform: translate3d(0, calc(var(--hero-p) * -16vh), 0) scale(calc(1 - var(--hero-p) * 0.08));
     transform-origin: 0 50%;
-    opacity: calc(1 - var(--hero-p) * 2.6);
+    opacity: calc(1 - var(--hero-p) * 4.2);
     filter: blur(calc(var(--hero-p) * 18px));
   }