/* ===========================================================
   ANIMAÇÕES
   Toda animação da página está aqui. O JS só liga e desliga
   o atributo data-visivel; quem anima é o CSS.

   Como usar no HTML:
     <div data-revela>...</div>              sobe e aparece
     <div data-revela="escala">...</div>     aparece crescendo
     <div data-revela="esquerda">...</div>   entra da esquerda
     <h2 data-revela-palavras>...</h2>       palavra por palavra
     <div data-sequencia>                    filhos em cascata
       <div data-revela>..</div>
       <div data-revela>..</div>
     </div>
   =========================================================== */

/* ---------- 1. REVELAÇÃO NO SCROLL -----------------------
   O movimento principal. Sobe 24px e aparece. Curto, discreto,
   usado em quase tudo. */

[data-revela] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-lento) var(--ease-saida),
              transform var(--dur-lento) var(--ease-saida);
  transition-delay: var(--atraso, 0ms);
  will-change: opacity, transform;
}

[data-revela="escala"]   { transform: translateY(16px) scale(0.97); }
[data-revela="esquerda"] { transform: translateX(-28px); }
[data-revela="direita"]  { transform: translateX(28px); }
[data-revela="suave"]    { transform: none; }  /* só fade */

[data-revela][data-visivel] {
  opacity: 1;
  transform: none;
}

/* Quando a animação termina, solta o will-change para não
   segurar camada de GPU à toa. O JS remove a classe. */
[data-revela].pronto { will-change: auto; }

/* ---------- 2. TÍTULO PALAVRA POR PALAVRA ----------------
   Cada palavra sobe de baixo de uma máscara. É o efeito do
   título principal. O JS quebra o texto em <span>. */

[data-revela-palavras] .palavra-mascara {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* folga embaixo para não cortar o rabo do g e do p */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

[data-revela-palavras] .palavra {
  display: inline-block;
  transform: translateY(105%);
  transition: transform var(--dur-lento) var(--ease-saida);
  transition-delay: var(--atraso, 0ms);
}

[data-revela-palavras][data-visivel] .palavra { transform: none; }

/* ---------- 3. FIO QUE SE DESENHA ------------------------
   Divisor que cresce da esquerda para a direita quando entra
   na tela. Dá ritmo entre blocos sem precisar de imagem. */

[data-fio] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-lento) var(--ease-saida);
  transition-delay: var(--atraso, 0ms);
}
[data-fio][data-visivel] { transform: scaleX(1); }

/* ---------- 4. SHEET: O PAINEL CLARO QUE SOBE ------------
   O bloco claro de cantos arredondados que sobe por cima do
   fundo escuro. É o que dá a sensação de camadas empilhadas. */

.sheet {
  position: relative;
  background: var(--papel);
  color: var(--tinta);
  border-radius: var(--raio-sheet) var(--raio-sheet) 0 0;
  z-index: 2;
}
.sheet--fim { border-radius: 0 0 var(--raio-sheet) var(--raio-sheet); }

/* Painel claro logo depois de outro painel claro: sobe um pouco por cima
   do anterior, para os cantos arredondados mostrarem o claro, não o preto. */
.sheet:has(+ .sheet) { padding-bottom: calc(clamp(80px, 11vw, 168px) + var(--raio-sheet)); }
.sheet + .sheet { margin-top: calc(var(--raio-sheet) * -1); }

/* ---------- 5. PARALAXE LEVE -----------------------------
   O JS escreve --parallax (em px) conforme a rolagem.
   Mantenha o deslocamento pequeno, 40px no máximo, senão
   vira efeito de template. */

[data-parallax] {
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

/* ---------- 6. GRÃO ---------------------------------------
   Textura sutil sobre o fundo escuro. Sem imagem: é um SVG
   de ruído embutido no próprio CSS. */

.grao::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- 7. HALO QUE GIRA ------------------------------
   Círculo de linha fina girando devagar atrás do hero.
   Decoração, nunca carrega informação. */

@keyframes girar {
  to { transform: rotate(360deg); }
}

.halo {
  position: absolute;
  border: 1px solid var(--acento);
  border-radius: 50%;
  opacity: 0.35;
  pointer-events: none;
  animation: girar 48s linear infinite;
}
.halo::before {
  content: '';
  position: absolute;
  inset: 14%;
  border: 1px solid var(--acento);
  border-radius: 50%;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .halo { animation: none; }
}

/* ---------- 8. HEADER QUE REAGE À ROLAGEM -----------------
   Fica transparente no topo e ganha vidro fosco ao descer.
   O JS marca data-preso no header. */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding-block: 20px;
  transition: background-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              padding var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

.header[data-preso] {
  padding-block: 12px;
  background: rgba(11, 10, 9, 0.72);
  backdrop-filter: blur(var(--fosco-blur));
  -webkit-backdrop-filter: blur(var(--fosco-blur));
  border-bottom-color: rgba(247, 244, 239, 0.1);
}

/* Esconde ao descer, reaparece ao subir */
.header[data-oculto] { transform: translateY(-100%); }
.header { transition-property: background-color, backdrop-filter, border-color, padding, transform; }

/* ---------- 9. LINK COM SUBLINHADO QUE CRESCE -------------- */

.link-nav {
  position: relative;
  font-size: 15px;
  color: var(--prata);
  transition: color var(--dur) var(--ease);
  padding-block: 4px;
}
.link-nav::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur) var(--ease-saida);
}
.link-nav:hover { color: var(--papel); }
.link-nav:hover::after,
.link-nav[aria-current="true"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ---------- 10. CARD DE VIDRO FOSCO ------------------------ */

.card-fosco {
  background: var(--fosco-bg);
  border: 1px solid var(--fosco-borda);
  backdrop-filter: blur(var(--fosco-blur));
  -webkit-backdrop-filter: blur(var(--fosco-blur));
  border-radius: var(--raio-sheet);
}

/* ---------- 11. CONTADOR / BARRA DE PROGRESSO -------------- */

.progresso {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--progresso, 0));
  transform-origin: left center;
  background: var(--acento);
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
}