/* ==========================================================================
   VÍDEO ESCOVADO PELO SCROLL · prefixo esc-
   Um trilho alto, um palco que gruda nele e um <video> cujo currentTime
   acompanha a fração rolada. O CSS não anima nada: quem escreve --esc-p
   (0 a 1) e o currentTime é o script, dentro do laço único do core.

   Tokens usados:
     --dark-rgb          scrim e véu sobre a mídia
     --fg --fg-2         tinta do título e da prosa
     --fg-muted          marcas "Início"/"Fim" e a ressalva (via .nota)
     --rule --rule-2     filete do pé e calha da barra de progresso
     --accent            preenchimento da barra
     --accent-ink        realce em itálico do título (NUNCA --accent cru: em
                         escopo claro o accent puro não fecha contraste, §3)
     --display --sans    faces
     --fs-body           corpo da prosa
     --nav-h             folga do menu fixo no topo do palco preso
     --sec-gap           respiro da seção no modo estático
     --radius-pill       ponta da barra
     --ease              curva única do projeto

   Parafusos (custom properties do próprio componente, §3):
     --esc-trilho        QUANTAS TELAS o trilho mede, sem unidade. 3.2 no
                         padrão, com piso 2.2 e teto 4.8 obrigados pelo
                         clamp() — ver "a conta do trilho" abaixo
     --esc-vh            altura de uma tela (svh onde existe, vh no resto)
     --esc-video-op      opacidade do vídeo sob o scrim — o parafuso do
                         CONTRASTE
     --esc-veu-alt       altura do véu desfocado
     --esc-veu-blur      raio do desfoque do véu — o único custo por quadro
                         desta peça. Zerar mantém o degradê e devolve a GPU
     --esc-barra-h       espessura da barra de progresso
     --esc-p             0 a 1, ESCRITO PELO SCRIPT. Não é para o consumidor

   ---------------------------------------------------------------------
   A CONTA DO TRILHO, que é o que se ajusta quando a peça "corre demais".

   O trilho mede --esc-trilho telas. O palco mede UMA. Logo o palco fica
   preso por (--esc-trilho - 1) telas de rolagem, e é esse curso que vale a
   duração inteira do vídeo. No padrão 3.2:

     2,2 telas de rolagem  =  o vídeo inteiro
     numa janela de 900px  ->  1.980px de rolagem
     num vídeo de 6s       ->  330px de rolagem por segundo de filme

   Um dedo dá uns 600px por gesto de rolagem em celular; uma roda de mouse
   dá ~100px por clique. Ou seja: cada clique de roda avança 0,3s de filme,
   que é a densidade em que o olho ainda lê movimento contínuo.

   O PISO É 2.2 E O TETO É 4.8, e os dois são obrigados pelo clamp() de
   propósito. Abaixo de 2.2 o vídeo inteiro passa em pouco mais de uma tela
   de rolagem: um gesto de dedo pula segundos, o decodificador não alcança e
   a peça vira estroboscópio. Acima de 4.8 a dobra vira armadilha de
   rolagem — cinco telas sem conteúdo novo, e quem só queria chegar ao
   rodapé fica preso girando a roda. Quem precisar sair da faixa troca o
   clamp e assume a decisão por escrito na própria página.

   ---------------------------------------------------------------------
   DOIS MODOS, E O PADRÃO É O SEGURO.

   modo ESTÁTICO  .esc sozinho — uma dobra comum: o pôster ocupa a caixa, a
                  copy por cima, sem sticky e sem trilho alto. É o que se vê
                  sem JavaScript, sob movimento reduzido e sob economia de
                  dados.
   modo PRESO     .esc.is-preso — o script mede, o palco gruda e a escova
                  acontece.

   O preso é OPT-IN por classe, e não o contrário, porque ele depende de
   JavaScript para fazer sentido: sem o script, uma seção de 3,2 telas com
   um pôster parado seriam duas telas e meia de nada. Sendo o estático o
   padrão, JS bloqueado, quebrado ou ainda não executado entrega uma dobra
   íntegra — não um vão.

   Por isso também NÃO HÁ @media(scripting:none) neste arquivo: o estado de
   repouso já é o correto, e não há portão de classe a destravar. O único
   bloco que nasce invisível é a leitura de progresso, e ela nasce [hidden]
   no markup — sem script ela continua escondida, que é o certo.

   A troca entre os dois modos é toda por VARIÁVEL (--esc-pos, --esc-h,
   --esc-of…), não por regra duplicada: cada modo mora num lugar só. Mesma
   forma do midia/faixa-horizontal-pinada.

   ---------------------------------------------------------------------
   O QUE NÃO PODE GANHAR overflow: a <section> e o .esc-trilho. Overflow
   diferente de visible num ancestral do sticky prende o palco a um
   scrollport que não rola, e ele deixa de grudar — sem erro, sem aviso, só
   um palco que desce junto com a página. Quem recorta é o .esc-palco, que é
   o próprio elemento que gruda.

   OS NÚMEROS DE CONTRASTE SÃO HERDADOS, e é honesto dizer de onde: a
   receita de scrim vertical + véu desfocado com máscara é a mesma do irmão
   hero/video-fundo, e --esc-video-op repete os valores que ELE mediu contra
   um quadro de vídeo branco chapado (.46 no desktop, .38 no celular, para
   4,5:1 de piso em todo texto). O que muda aqui é a favor da leitura: a
   mancha de texto é menor e o véu sobe mais alto, então o piso medido lá é
   conservador aqui. Quem trocar o vídeo por um material claro de verdade
   refaz a medida — a tabela do irmão está no estilo.css dele.
   ========================================================================== */

.esc{
  /* ---- parafusos ---- */
  --esc-vh:100vh;
  --esc-trilho:3.2;
  --esc-video-op:.46;
  --esc-veu-alt:66%;
  --esc-veu-blur:10px;
  --esc-barra-h:2px;

  /* ---- modo ESTÁTICO (padrão) ---- */
  --esc-pos:static;
  --esc-h:auto;
  --esc-min:clamp(520px,calc(var(--esc-vh) * .78),880px);
  --esc-of:visible;
  --esc-rail:auto;
  --esc-pad:var(--sec-gap);
  --esc-top:clamp(24px,4vh,48px);

  position:relative;
}

/* svh desconta a barra do navegador no celular, onde vh a ignora e o pé do
   palco fica embaixo dela. No sticky isso é pior que estética: com vh o
   valor muda no meio do gesto e o palco salta. svh é a MENOR das alturas e
   não se mexe; dvh seria pior ainda, muda a cada quadro. Em @supports
   porque a peça tem de abrir inteira em base antiga, e ali vh é o que há. */
@supports (height:100svh){.esc{--esc-vh:100svh}}

/* ---- modo PRESO ----
   Ligado pelo script depois de ele confirmar que ninguém pediu menos
   movimento e que a conexão não está em economia de dados. */
.esc.is-preso{
  --esc-pos:sticky;
  --esc-h:var(--esc-vh);
  --esc-min:0px;
  --esc-of:hidden;
  --esc-rail:calc(var(--esc-vh) * clamp(2.2,var(--esc-trilho),4.8));
  --esc-pad:0px;
  /* A folga do menu fixo só existe no modo preso, e é por isso que ela é
     variável: no estático o palco passa por baixo do menu como qualquer
     outra dobra, e reservar --nav-h ali seria um vão de 84px no meio da
     página. */
  --esc-top:calc(var(--nav-h) + clamp(32px,6vh,72px));
}

/* Cinto e suspensório do §6.6, colado à regra que desliga: o script já não
   põe .is-preso sob movimento reduzido, mas se alguém colar a classe à mão
   no markup — ou um script futuro a puser antes de consultar a preferência
   — o modo preso morre aqui. Prender a rolagem da página a uma agulha de
   vídeo é exatamente o movimento imposto que a preferência pede para
   evitar. */
@media(prefers-reduced-motion:reduce){
  .esc.is-preso{
    --esc-pos:static;
    --esc-h:auto;
    --esc-min:clamp(520px,calc(var(--esc-vh) * .78),880px);
    --esc-of:visible;
    --esc-rail:auto;
    --esc-pad:var(--sec-gap);
    --esc-top:clamp(24px,4vh,48px);
  }
}

.esc-trilho{height:var(--esc-rail)}

.esc-palco{
  position:var(--esc-pos);top:0;
  height:var(--esc-h);
  min-height:var(--esc-min);
  overflow:var(--esc-of);
  padding-block:var(--esc-pad);
  display:flex;flex-direction:column;
}

/* ---- mídia ----------------------------------------------------------------
   z-index:0 de propósito: cria o contexto de empilhamento que prende o
   .grain (que traz z-index:1 do core) aqui dentro, e deixa véu e corpo
   ordenados sem ninguém adivinhar número.

   inset:0 nos DOIS modos, e é o que faz a geometria ser uma só: no preso a
   mídia enche a tela grudada; no estático ela enche a caixa de --esc-min,
   inclusive por baixo do padding. Um único desenho, dois tamanhos. */
.esc-media{position:absolute;inset:0;z-index:0;overflow:hidden}

/* object-fit vale para o vídeo E para o pôster — e aqui o pôster é o que
   sustenta a dobra em quatro caminhos de falha (sem script, movimento
   reduzido, economia de dados, iOS que recusou o destravamento). Sem ele o
   pôster de 16:9 entra com tarja dos dois lados em tela mais alta que
   larga. */
.esc-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 45%;
  opacity:var(--esc-video-op);
}

/* Dois gradientes cruzados, com o VERTICAL como principal: o texto atravessa
   a coluna inteira ancorado embaixo, e o que precisa escurecer é o pé — mais
   o topo, por causa do menu fixo, que neste componente encosta no palco toda
   vez que ele está preso. O horizontal entra fraco, para o canto direito não
   brilhar sozinho em tela larga por trás da leitura de progresso. */
.esc-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,
      rgba(var(--dark-rgb),.62) 0%,
      rgba(var(--dark-rgb),.20) 28%,
      rgba(var(--dark-rgb),.34) 56%,
      rgba(var(--dark-rgb),.66) 100%),
    linear-gradient(94deg,
      rgba(var(--dark-rgb),.34) 0%,
      rgba(var(--dark-rgb),.08) 52%,
      rgba(var(--dark-rgb),.30) 100%);
}

/* ---- véu desfocado -------------------------------------------------------
   A regra de forma do §6: backdrop-filter SEMPRE com máscara em degradê.
   Caixa reta desenharia uma linha horizontal dura no meio do vídeo e leria
   "chapado".

   POR QUE ESTA PEÇA PEDE MAIS VÉU QUE A DE FOTO: com foto o autor escolhe o
   quadro e calibra o scrim contra ele. Aqui TODO quadro do vídeo passa por
   baixo da mesma copy, e passa porque a pessoa está rolando — o clarão do
   segundo cinco chega debaixo do título sem aviso. Gradiente escurece a
   média; o desfoque apaga o DETALHE, que é o que come a leitura de texto
   claro sobre imagem em movimento.

   É também o único custo por quadro do CSS desta peça: o desfoque é
   recalculado enquanto a imagem por baixo muda — e aqui ela muda a cada
   escova. Em máquina fraca, --esc-veu-blur:0 mantém o degradê e devolve a
   GPU. */
.esc-veu{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  height:var(--esc-veu-alt);pointer-events:none;
  background:linear-gradient(to top,
    rgba(var(--dark-rgb),.66) 0%,
    rgba(var(--dark-rgb),.38) 52%,
    rgba(var(--dark-rgb),0) 100%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 48%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 48%,transparent 100%);
}
/* Mesma cautela do .glass no core: sem suporte sobra só o degradê, em vez de
   uma faixa translúcida e sem função. */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .esc-veu{
    backdrop-filter:blur(var(--esc-veu-blur)) saturate(112%);
    -webkit-backdrop-filter:blur(var(--esc-veu-blur)) saturate(112%);
  }
}

/* ---- corpo ---------------------------------------------------------------
   Ancorado embaixo: o topo fica para a mídia respirar sob o menu fixo, e o
   texto vive DENTRO da imagem, como manda o §6 — nunca num parágrafo abaixo
   dela.

   O padding vertical é local e legítimo: o §4 proíbe o componente de mexer
   em padding-inline, max-width de página e margem lateral, e é o .wrap desta
   mesma <div> que continua respondendo sozinho pela coluna. */
.esc-body{
  position:relative;z-index:2;
  flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:var(--esc-top);
  padding-bottom:clamp(40px,7vh,88px);
}

/* Os dois parafusos da primitiva .display-xl entram AQUI, no ancestral, e
   não na regra do título: o core os lê como fallback dentro do var(), e um
   valor escrito no mesmo elemento venceria o que o ancestral põe. Mesma
   forma do conteudo/pilares-texto-na-foto.

   O corpo é menor que o padrão da primitiva (clamp(46px,6vw,104px)) porque
   aqui o título divide UMA TELA com a prosa e a leitura de progresso — e a
   tela é fixa, o palco está preso. Em display gigante a dobra não fechava
   em notebook de 900px. */
.esc-copy{
  --display-xl:clamp(32px,4.6vw,68px);
  --display-xl-lh:1.05;
}
/* A medida vai no TÍTULO e não no .esc-copy, e isto foi medido: `ch` resolve
   contra a fonte do PRÓPRIO elemento, e o .esc-copy herda o corpo de 17px do
   body — 20ch ali deram 210px de coluna e cinco linhas de título em
   1440x900, quando a intenção eram duas. No .esc-title o mesmo `ch` vale a
   letra de 66px. Mesma forma do h2.sec-title do core, que leva o max-width
   de 22ch no próprio h2. */
.esc-title{max-width:15ch;margin-top:18px}
/* Elemento descendente do próprio prefixo, no precedente do `.btn svg` e do
   `.field label` do core: preso à classe, não vaza. Lê a TINTA DE REALCE do
   escopo, e não o --accent cru — em escopo claro o accent puro mede 1.36:1
   com o sage da Liberta, contra um mínimo de 3:1 (§3). O fallback mantém de
   pé quem colar a peça fora de um escopo de tom. */
.esc-title em{
  font-style:italic;font-weight:700;letter-spacing:-.01em;
  color:var(--accent-ink,var(--accent));
}

/* ---- pé: prosa à esquerda, leitura à direita ---------------------------- */
.esc-pe{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(28px,4vw,72px);
  margin-top:clamp(30px,5vh,58px);
  border-top:1px solid var(--rule);
  padding-top:22px;
}

.esc-texto{max-width:52ch}
/* Prosa que o autor do texto escreve livre: `p` como descendente do próprio
   prefixo é o caso PERMITIDO pelo §6.3 — fora daí, classe. */
.esc-texto p{
  font-size:var(--fs-body);line-height:1.6;color:var(--fg-2);
}
.esc-texto p + p{margin-top:14px}

/* ---- leitura de progresso ------------------------------------------------
   Nasce [hidden] no markup e quem a mostra é o script: sem JavaScript ela
   seria um mostrador travado em 0%. A primeira regra é a do §6.5 — quem dá
   `display` a algo que às vezes é [hidden] desliga à mão, porque QUALQUER
   regra de autor com display vence o [hidden] do navegador. Aqui a
   armadilha chegaria pela porta de trás do flex: um item de flex container
   continua obedecendo display:none, mas basta alguém somar um display nesta
   classe para o mostrador nascer visível e morto, sem nada acusar. */
.esc-leitura[hidden]{display:none}
.esc-leitura{flex:0 0 auto;width:min(34ch,100%)}

.esc-barra{
  position:relative;overflow:hidden;
  height:var(--esc-barra-h);
  background:var(--rule-2);
  border-radius:var(--radius-pill);
}
/* Cresce por transform:scaleX e não por width: width remonta a caixa a cada
   quadro, e este valor muda em todo quadro de rolagem. Mesma decisão do
   navegacao/progresso-leitura. Não há transition: o valor já vem do scroll,
   que é contínuo — suavizar por cima só atrasaria a barra em relação à
   imagem que ela mede. */
.esc-barra-fill{
  position:absolute;inset:0;
  transform-origin:0 50%;
  transform:scaleX(var(--esc-p,0));
  background:var(--accent);
}

.esc-marcas{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:11px;
  font-family:var(--display);font-weight:700;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-muted);
}
.esc-pct{
  font-size:15px;letter-spacing:.02em;text-transform:none;
  color:var(--fg);font-variant-numeric:tabular-nums;
}

/* .nota do core traz corpo, entrelinha e tinta; margem, medida e alinhamento
   continuam locais, como a primitiva manda. --nota-max entra porque 74ch num
   canto de 34ch não teria efeito nenhum e esconderia a intenção. */
.esc-nota{--nota-max:34ch;margin-top:13px}

/* ---- mobile --------------------------------------------------------------
   O trilho encurta e o palco verticaliza. O modo preso CONTINUA no celular,
   ao contrário do midia/faixa-horizontal-pinada: lá o modo nativo é uma
   faixa que o dedo arrasta, e existe; aqui o "modo nativo" seria um pôster
   parado, ou seja, o componente deixaria de existir na metade do tráfego.

   Os números fecham a dobra dentro de 844px de janela:
     folga do topo = menu + 22px (era menu + 54)          -32px
     respiro do pé 40px                                   -20px
     prosa em 14.5px e o pé em coluna                     o resto
   --esc-trilho cai de 3.2 para 2.6 porque o gesto de dedo é longo: 2,2 telas
   de curso num celular são quatro ou cinco arremessos, e o filme de seis
   segundos nunca chegava ao fim antes de a pessoa desistir. */
@media(max-width:760px){
  .esc{--esc-trilho:2.6;--esc-video-op:.38;--esc-veu-alt:80%;--esc-veu-blur:8px}
  .esc.is-preso{--esc-top:calc(var(--nav-h) + 22px)}
  .esc-body{padding-bottom:40px}
  .esc-copy{max-width:100%}
  .esc-pe{
    display:block;
    margin-top:26px;padding-top:18px;
  }
  .esc-texto{max-width:100%}
  .esc-texto p{font-size:14.5px}
  .esc-leitura{width:100%;margin-top:22px}
  .esc-nota{--nota-max:none;--nota-size:11.5px}
}