/* ══════════════════════════════════════════════════════════════════════
   PERCURSO · scrollytelling 3D
   O vídeo fica preso na tela e avança com a rolagem. Cada cena entra e sai
   com as palavras animadas uma a uma, em profundidade.

   Notas de implementação que não são óbvias:

   · O vídeo é ALL-INTRA (todo quadro é chave). Com GOP normal, mudar
     currentTime obriga a decodificar o grupo inteiro e a rolagem engasga.

   · NÃO existe `will-change: transform` em nenhum elemento com
     `transform-style: preserve-3d` aqui. will-change promove a camada e
     ACHATA o 3D: o parallax de profundidade simplesmente some.

   · A profundidade de campo é literal: quando o texto entra em foco, o
     vídeo desfoca. É o mesmo gesto de uma lente mudando de plano.

   · O deslocamento é feito por transform e opacity, nunca por top/left ou
     width/height, que disparam layout a cada quadro.
   ══════════════════════════════════════════════════════════════════════ */

.percurso {
  position: relative;
  background: #05070c;
}

/* A altura da pista é a SENSIBILIDADE da seção: quanto mais alta, menos
   acontece por centímetro de rolagem e mais tempo a frase fica legível.
   620vh dava 52vh por cena, e a leitura ficava apertada. 900vh dá 75vh. */
.pc-pista { height: 900vh; }

.pc-palco {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.pc-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  /* o blur, a escala e a máscara são escritos pelo JS a cada quadro.
     ⚠️ A máscara nunca vai no .pc-palco: clip-path no elemento sticky
     quebra o sticky e a seção deixa de prender na tela. */
}
/* a palavra é varrida por clip-path na entrada e na saída.
   ⚠️ clip-path cria contexto de empilhamento e ACHATA preserve-3d, mas aqui
   é folha da árvore: não há filho 3D para achatar, e o rotateX dela continua
   sendo resolvido pela perspective do palco. */
.pc-p { will-change: auto; }

/* véu de leitura: sobe do pé e desce do topo, para a letra clara ter
   contraste em qualquer quadro do vídeo, inclusive nos mais claros */
.pc-veu {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(5,7,12,.86) 0%, rgba(5,7,12,.34) 30%, rgba(5,7,12,0) 58%),
    linear-gradient(to bottom, rgba(5,7,12,.55) 0%, rgba(5,7,12,0) 34%);
}
/* vinheta, para a borda não competir com o texto */
.pc-vinheta {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 78% 68% at 50% 50%, transparent 42%, rgba(5,7,12,.62) 100%);
}

/* ── a cena ─────────────────────────────────────────────────────── */
.pc-cenas { position: absolute; inset: 0; transform-style: preserve-3d; }

.pc-cena {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  /* o pé é maior que o topo: embaixo moram a ressalva, o trilho e o contador,
     e sem essa reserva a frase da cena caía por cima deles */
  padding: clamp(28px, 7vh, 90px) clamp(24px, 7vw, 120px) clamp(108px, 15vh, 170px);
  transform-style: preserve-3d;
  opacity: 0;
  pointer-events: none;
}

/* posições, para a frase não cair sempre no mesmo lugar */
.pc-cena[data-pos="esquerda-baixo"] { justify-content: flex-end; align-items: flex-start; text-align: left; }
.pc-cena[data-pos="direita-baixo"]  { justify-content: flex-end; align-items: flex-end;  text-align: right; }
.pc-cena[data-pos="esquerda-topo"]  { justify-content: flex-start; align-items: flex-start; text-align: left; }
.pc-cena[data-pos="direita-topo"]   { justify-content: flex-start; align-items: flex-end;  text-align: right; }
.pc-cena[data-pos="centro"]         { justify-content: center; align-items: center; text-align: center; }
.pc-cena[data-pos="centro-baixo"]   { justify-content: flex-end; align-items: center; text-align: center; }

.pc-bloco { max-width: min(46rem, 78vw); transform-style: preserve-3d; }

/* ── ícone, com entrada e saída em máscara ──────────────────────── */
.pc-ico {
  display: block; height: clamp(30px, 3.4vw, 46px); width: auto;
  color: #C9A05A; margin-bottom: clamp(14px, 2vh, 26px);
  overflow: visible;
}
.pc-cena[data-pos="direita-baixo"] .pc-ico,
.pc-cena[data-pos="direita-topo"]  .pc-ico { margin-left: auto; }
.pc-cena[data-pos="centro"] .pc-ico,
.pc-cena[data-pos="centro-baixo"] .pc-ico { margin-left: auto; margin-right: auto; }
.pc-ico path, .pc-ico circle, .pc-ico rect, .pc-ico line, .pc-ico polyline {
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  /* o traço é desenhado com dash: o JS escreve o offset conforme a cena */
}

/* ── tipografia por estilo ──────────────────────────────────────── */
/* A seção é toda em Resort Sans, caixa alta. A serifa do resto do site não
   entra aqui: pedido do Matheus em 13/08. Resort Sans é versalete, então
   `text-transform:uppercase` deixa o traço uniforme em vez de misturar
   maiúscula desenhada com versalete. */
.pc-frase {
  margin: 0; color: #F3EEE4;
  font-family: 'Resort', 'Resort Sans', system-ui, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-wrap: balance;
  transform-style: preserve-3d;
}
.pc-cena[data-estilo="display"] .pc-frase {
  font-size: clamp(1.9rem, 5.4vw, 4.5rem); line-height: 1.12; letter-spacing: .04em; font-weight: 400;
}
.pc-cena[data-estilo="bloco"] .pc-frase {
  font-size: clamp(1.7rem, 4.3vw, 3.5rem); line-height: 1.16; letter-spacing: .05em; font-weight: 400;
}
.pc-cena[data-estilo="linha"] .pc-frase {
  font-size: clamp(1.25rem, 3vw, 2.5rem); line-height: 1.24; letter-spacing: .09em;
}
.pc-cena[data-estilo="sussurro"] .pc-frase {
  font-size: clamp(.95rem, 1.8vw, 1.5rem); line-height: 1.6; letter-spacing: .3em;
}

/* cada palavra é uma peça 3D independente */
.pc-p { display: inline-block; transform-style: preserve-3d; white-space: pre; }
.pc-p em { font-style: normal; color: #D9A857; }

.pc-apoio {
  margin: clamp(16px, 2.2vh, 30px) 0 0;
  font-family: 'Resort', 'Resort Sans', system-ui, sans-serif;
  font-size: clamp(.82rem, 1.25vw, 1rem);
  line-height: 1.72; font-weight: 300; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(243,238,228,.7);
  max-width: 34rem;
}
.pc-cena[data-pos="direita-baixo"] .pc-apoio,
.pc-cena[data-pos="direita-topo"]  .pc-apoio { margin-left: auto; }
.pc-cena[data-pos="centro"] .pc-apoio,
.pc-cena[data-pos="centro-baixo"] .pc-apoio { margin-left: auto; margin-right: auto; }

/* ── progresso do percurso, discreto ────────────────────────────── */
.pc-trilho {
  position: absolute; left: 50%; bottom: clamp(18px, 3vh, 34px);
  transform: translateX(-50%);
  width: min(280px, 42vw); height: 1px;
  background: rgba(243,238,228,.16);
}
.pc-trilho i {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: #C9A05A; display: block;
}
.pc-conta {
  position: absolute; right: clamp(20px, 4vw, 54px); bottom: clamp(18px, 3vh, 34px);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(243,238,228,.42);
}

/* ── legal, obrigatório e discreto ──────────────────────────────── */
.pc-legal {
  position: absolute; left: clamp(20px, 4vw, 54px); bottom: clamp(18px, 3vh, 34px);
  max-width: min(30rem, 46vw);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .58rem; line-height: 1.6; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(243,238,228,.34);
}

/* ── celular em pé ────────────────────────────────────────────────
   O vídeo é 16:9 e a tela é ~9:19,5. `object-fit:cover` corta as laterais e
   sobra pouca imagem. Aqui o vídeo fica no ALTO, em proporção cheia, e o texto
   mora embaixo, no escuro: nada tapa a cena, que é a mesma regra das placas.
   O texto também vai sempre para o mesmo lugar, porque no retrato alternar
   posição só faz o olho procurar. */
@media (max-width: 820px) and (orientation: portrait) {
  .pc-pista { height: 760vh; }
  .pc-palco { display: grid; grid-template-rows: 52svh 1fr; }
  .pc-video { position: relative; inset: auto; height: 52svh; }
  .pc-veu {
    inset: 0 0 auto 0; height: 52svh;
    background:
      linear-gradient(to top, rgba(5,7,12,.92) 0%, rgba(5,7,12,.30) 26%, rgba(5,7,12,0) 52%),
      linear-gradient(to bottom, rgba(5,7,12,.5) 0%, rgba(5,7,12,0) 26%);
  }
  .pc-vinheta { display: none; }
  /* começa exatamente onde o vídeo acaba: com sobreposição o título subia
     por cima da cena, que é o que a peça inteira tenta evitar */
  .pc-cenas { position: absolute; inset: 52svh 0 0 0; }
  .pc-cena {
    padding: 26px 22px 104px;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .pc-bloco { max-width: 100%; }
  .pc-ico { margin: 0 0 14px !important; height: 26px; }
  .pc-cena[data-estilo="display"] .pc-frase { font-size: clamp(1.6rem, 8.4vw, 2.5rem); }
  .pc-cena[data-estilo="bloco"]   .pc-frase { font-size: clamp(1.5rem, 7.6vw, 2.3rem); }
  .pc-cena[data-estilo="linha"]   .pc-frase { font-size: clamp(1.15rem, 5.6vw, 1.7rem); }
  .pc-cena[data-estilo="sussurro"].pc-frase,
  .pc-cena[data-estilo="sussurro"] .pc-frase { font-size: clamp(.9rem, 4vw, 1.15rem); letter-spacing: .24em; }
  .pc-apoio { margin-top: 16px; font-size: .78rem; max-width: 100%; }
  .pc-legal { max-width: calc(100% - 44px); font-size: .5rem; bottom: 46px; left: 22px; }
  .pc-conta { display: none; }
  .pc-trilho { bottom: 22px; width: min(220px, 56vw); }
}

/* celular deitado: volta ao comportamento de tela cheia, só com menos altura */
@media (max-height: 520px) and (orientation: landscape) {
  .pc-pista { height: 640vh; }
  .pc-cena { padding: 16px 30px 74px; }
  .pc-legal { max-width: 56vw; font-size: .48rem; bottom: 40px; }
  .pc-conta { display: none; }
}

/* quem pediu menos movimento vê as cenas, sem o 3D nem o desfoque */
@media (prefers-reduced-motion: reduce) {
  .pc-video { filter: none !important; clip-path: none !important; }
  .pc-p { transform: none !important; filter: none !important; clip-path: none !important; }
  .pc-veu, .pc-vinheta { clip-path: none !important; }
}