/* ==========================================================================
   FAIXA HORIZONTAL PINADA — prefixo pin-
   A seção prende a tela e a fila de imagens atravessa da direita para a
   esquerda: 1px de rolagem vertical = 1px de deslocamento horizontal.

   Tokens usados:
     --pad --max          conta do recuo que alinha o trilho à coluna
     --sec-gap            respiro vertical — só no modo nativo (ver abaixo)
     --display            tipografia de título, número e contador
     --accent             preenchimento da barra de progresso
     --dark-rgb           véus em gradiente sobre a foto
     --light              texto sobre a foto (ilha escura)
     --radius-media       canto do card
     --rule-2             trilho da barra de progresso
     --fg --fg-muted      título do cabeçalho e contador (fora da foto)

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

   modo PINADO   .pin.is-pinned — o palco gruda (position:sticky) e o script
                 escreve --pin-x e --pin-p a cada quadro.
   modo NATIVO   .pin sozinho — faixa comum de scroll-snap horizontal, o
                 mesmo mecanismo do midia/galeria-scroll-horizontal.

   O modo pinado é OPT-IN por classe, e não o contrário, porque ele depende
   de JavaScript para existir: sem o script não há --pin-len, e uma seção de
   uma tela com overflow:hidden esconderia quatro dos seis cards para
   sempre. Sendo o nativo o padrão, JS bloqueado, quebrado ou ainda não
   executado entrega uma faixa que rola — não uma dobra truncada.

   A troca entre os dois é toda por VARIÁVEL (--pin-pos, --pin-of, --pin-tx…),
   não por regra duplicada: cada modo mora num lugar só, e a media query do
   fim precisa de uma regra apenas para desligar o pinado no celular.

   NÃO HÁ backdrop-filter nos véus do cabeçalho e do pé: eles cobrem a
   largura inteira do palco por cima de um trilho que se move todo quadro, e
   desfocar essa faixa manda o navegador re-rasterizar a tela a cada quadro.
   Gradiente sozinho já é a sua própria máscara. O véu da legenda, esse sim,
   é o do §6 (gradiente + blur + máscara), porque é caixa pequena e o texto
   está dentro da foto.
   ========================================================================== */

.pin{
  /* SANGRIA SEM MARGEM NEGATIVA (contrato §4).
     Não existe .wrap nesta dobra: o trilho precisa atravessar a página
     inteira. Esta variável refaz a conta do .wrap — metade da sobra mais o
     respiro — e alinha o PRIMEIRO card à coluna; o mesmo valor no
     padding-inline-end alinha o ÚLTIMO à borda direita dela.
       tela estreita  ->  a coluna já encosta nas bordas, vale --pad
       tela larga     ->  (100% - --max) / 2 + --pad
     O 100% é a largura do palco, que é a largura da seção. */
  --pin-inset:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));

  --pin-gap:clamp(18px,2.4vw,34px);    /* vão entre um card e o próximo */

  /* Altura do palco. svh e não vh: em tablet com barra de endereço que some,
     vh muda de valor no meio do gesto e o sticky salta; svh é a menor das
     alturas e não se mexe. dvh seria pior ainda — muda a cada quadro. */
  --pin-vh:100vh;

  /* Faixa reservada em cima e embaixo para o cabeçalho e o pé. É um
     CONTRATO com o tamanho do card: o card nunca passa de --pin-free de
     altura, então nunca invade a faixa, em nenhuma altura de tela.
     O piso de 140px é a altura MEDIDA do cabeçalho em 1440x900 (136px: olho,
     título de uma linha e o respiro de 30px em cima e embaixo) mais folga.
     Se o título ganhar uma segunda linha ele passa de 172px e come essa
     folga — nesse caso suba o piso junto, ou encurte o título. */
  --pin-band:clamp(140px,15vh,168px);
  --pin-free:calc(var(--pin-vh) - var(--pin-band) * 2);

  /* Largura dos cards, alternada para dar ritmo. O segundo termo do min()
     é o que garante a folga acima: com caixa 16:10, uma largura de
     --pin-free * 1.6 tem exatamente --pin-free de altura. Em tela baixa
     manda o teto de altura; em tela larga e alta, o vw. */
  --pin-w-wide:min(58vw,calc(var(--pin-free) * 1.6));
  --pin-w-small:min(36vw,calc(var(--pin-free) * 1.6));

  /* Suavização do trilho, 0 a 1: fração do que falta percorrida a cada
     quadro de 60Hz (a conta é por tempo, então 120Hz anda igual).
     .14 é perseguição visível sem borracha; 1 gruda no scroll. */
  --pin-lerp:.14;

  /* ---- modo NATIVO (padrão) ---- */
  --pin-pos:static;         /* palco */
  --pin-h:auto;             /* palco */
  --pin-of:visible;         /* palco */
  --pin-sec-h:auto;         /* seção */
  --pin-pad:var(--sec-gap); /* respiro da seção, do mesmo token do .sec-pad */
  --pin-abs:static;         /* cabeçalho e pé */
  --pin-track-h:auto;
  --pin-track-ofx:auto;     /* o trilho é quem rola */
  --pin-track-ofy:hidden;
  --pin-snap:x mandatory;
  --pin-tx:none;
  --pin-veil-top:none;
  --pin-veil-bottom:none;
  --pin-head-pad:0 0 clamp(26px,4vh,44px);
  --pin-foot-pad:clamp(26px,4vh,44px) 0 0;

  position:relative;
  height:var(--pin-sec-h);
  padding-block:var(--pin-pad);
}

/* Onde svh existe (todo motor desde 2022), ele vale. Fora do @supports o
   var() não teria como cair de volta para vh: custom property aceita
   qualquer token, e um --pin-vh inválido derrubaria a altura para auto. */
@supports (height:100svh){
  .pin{--pin-vh:100svh}
}

/* ---- modo PINADO ----
   Ligado pelo script quando a tela é larga e ninguém pediu menos movimento.
   --pin-len (o quanto o trilho sobra da tela) e --pin-x (o quanto ele já
   andou) são escritos pelo script na raiz. */
.pin.is-pinned{
  --pin-pos:sticky;
  --pin-h:var(--pin-vh);
  --pin-of:hidden;
  --pin-sec-h:calc(var(--pin-vh) + var(--pin-len,0px));
  --pin-pad:0;
  --pin-abs:absolute;
  --pin-track-h:100%;
  /* Os DOIS eixos em visible, e não só o x: quando um dos dois é visible e o
     outro não, o navegador promove o visible a auto e o trilho vira
     contêiner de rolagem por baixo do pano — com scrollLeft próprio brigando
     com o transform, e um pulo lateral toda vez que o foco entra nele.
     Medido: com overflow-y:hidden, o computado do x saía "auto". */
  --pin-track-ofx:visible;
  --pin-track-ofy:visible;
  --pin-snap:none;
  --pin-tx:translate3d(calc(var(--pin-x,0px) * -1),0,0);
  --pin-veil-top:linear-gradient(to bottom,
    rgba(var(--dark-rgb),.86) 0%,rgba(var(--dark-rgb),.5) 48%,transparent 100%);
  --pin-veil-bottom:linear-gradient(to top,
    rgba(var(--dark-rgb),.9) 0%,rgba(var(--dark-rgb),.52) 52%,transparent 100%);
  --pin-head-pad:clamp(22px,3.4vh,38px) 0;
  --pin-foot-pad:clamp(22px,3.4vh,38px) 0;
}

/* A camada que se move ganha camada própria só enquanto a dobra está por
   perto — o script põe e tira .is-near por IntersectionObserver.
   O trilho pinado mede ~4570 x 522 px em 1440: promovido para sempre, isso
   é textura de GPU parada na memória a página inteira. Enquanto está aceso,
   porém, ele se paga: o cabeçalho e o pé ficam em outra camada e param de
   ser repintados a cada quadro. */
.pin.is-near .pin-track{will-change:transform}

/* ---------------------------------------------------------------- palco */
/* O recorte mora AQUI, no elemento que gruda — nunca na seção. overflow
   diferente de visible num ANCESTRAL do sticky o prende a um scrollport que
   não rola, e o palco deixa de grudar. É por isso que .pin não tem
   overflow:hidden, por mais que o trilho vaze dela. */
.pin-stage{
  position:var(--pin-pos);top:0;
  height:var(--pin-h);
  overflow:var(--pin-of);
}

/* ---------------------------------------------------------------- cabeçalho */
/* Absoluto no pinado (flutua sobre as fotos, com véu), em fluxo no nativo.
   top/left/right e z-index são ignorados sozinhos quando --pin-abs é static:
   uma regra só serve aos dois modos.
   A faixa cobre a foto de ponta a ponta: sem pointer-events:none ela seria
   uma tampa invisível sobre o card em toda a largura do palco. O texto
   dentro dela volta a receber ponteiro, senão deixaria de ser selecionável. */
.pin-head{
  position:var(--pin-abs);top:0;left:0;right:0;z-index:2;
  padding:var(--pin-head-pad);
  padding-inline:var(--pin-inset);
  background:var(--pin-veil-top);
  pointer-events:none;
}
.pin-head > *{pointer-events:auto}
/* 22ch é a largura do h2.sec-title do core, e nela um título de 26 caracteres
   quebra em duas linhas — o cabeçalho passa de 172px de altura e come a
   folga do card em tela baixa. Aqui ele tem a coluna inteira e cabe numa
   linha só até 32 caracteres. */
.pin-head .sec-title{
  font-size:clamp(20px,2.2vw,30px);
  max-width:34ch;margin-top:10px;
}

/* ---------------------------------------------------------------- trilho */
.pin-track{
  display:flex;align-items:center;
  gap:var(--pin-gap);
  height:var(--pin-track-h);
  margin:0;list-style:none;
  padding-inline:var(--pin-inset);
  transform:var(--pin-tx);

  /* Daqui para baixo só vale no modo nativo, onde o trilho é contêiner de
     rolagem. No pinado o overflow é visible e o navegador ignora tudo. */
  overflow-x:var(--pin-track-ofx);overflow-y:var(--pin-track-ofy);
  scroll-snap-type:var(--pin-snap);
  scroll-padding-inline:var(--pin-inset);
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.pin-track::-webkit-scrollbar{width:0;height:0;display:none}
/* O trilho é focável (tabindex no markup) para que as setas do teclado
   rolem a faixa no modo nativo — no pinado elas rolam a página, que é o que
   move a faixa. O anel do core sai 3px para fora e seria comido pelo
   overflow:hidden do palco; para dentro ele aparece nos dois modos. */
.pin-track:focus-visible{outline-offset:-4px}

.pin-item{flex:0 0 auto;width:var(--pin-w-small);scroll-snap-align:start}
/* Mesma especificidade da regra acima: quem decide é a ordem no arquivo.
   Não inverta. */
.pin-item--wide{width:var(--pin-w-wide)}

/* ---------------------------------------------------------------- card */
/* A caixa 16:10 existe ANTES de a foto chegar: é ela que impede o trilho de
   mudar de largura quando as imagens carregam, e é por isso que o --pin-len
   medido no primeiro quadro continua valendo depois. */
.pin-card{
  position:relative;margin:0;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:var(--radius-media);
  background:rgba(var(--dark-rgb),.5);
}
.pin-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Cinza parcial mantém a fila coesa sem a foto virar outra imagem. */
  filter:grayscale(.22);
}

/* Número grande no canto, sobre a foto: lê --light, como tudo que está
   dentro da imagem. A sombra é o que garante leitura sobre céu claro sem
   pedir mais uma camada de véu. */
.pin-num{
  position:absolute;top:0;left:0;z-index:2;
  padding:clamp(14px,1.6vw,26px) clamp(16px,1.8vw,28px);
  font-family:var(--display);font-weight:700;line-height:1;
  font-size:clamp(30px,3vw,42px);letter-spacing:-.03em;
  color:color-mix(in srgb,var(--light) 74%,transparent);
  text-shadow:0 2px 30px rgba(var(--dark-rgb),.55);
}
.pin-item--wide .pin-num{font-size:clamp(38px,4.2vw,58px)}

/* Legenda DENTRO da foto (contrato §6): gradiente, desfoque e máscara. Aqui
   o backdrop-filter se paga — é caixa pequena, e sem ele o texto sobre uma
   foto clara pediria um gradiente tão pesado que apagaria a imagem. */
.pin-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(44px,6vw,86px) clamp(16px,1.8vw,28px) clamp(16px,1.8vw,26px);
  background:linear-gradient(to top,
    rgba(var(--dark-rgb),.92) 0%,rgba(var(--dark-rgb),.5) 48%,transparent 100%);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 44%,transparent 100%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 44%,transparent 100%);
}
.pin-name{
  font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.5vw,21px);line-height:1.2;letter-spacing:-.022em;
  color:var(--light);
}
.pin-line{
  font-size:clamp(13px,1.05vw,15px);line-height:1.45;
  color:color-mix(in srgb,var(--light) 78%,transparent);
  max-width:34ch;
  /* Duas linhas equilibradas em vez de uma cheia e uma com uma palavra só:
     "…relatório no dia / 5" era o que saía sem isto. */
  text-wrap:balance;
}
.pin-item--wide .pin-name{font-size:clamp(20px,2.1vw,28px)}
.pin-item--wide .pin-line{font-size:clamp(14px,1.2vw,17px)}

/* ---------------------------------------------------------------- pé */
.pin-foot{
  position:var(--pin-abs);bottom:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;gap:clamp(16px,2vw,28px);
  padding:var(--pin-foot-pad);
  padding-inline:var(--pin-inset);
  background:var(--pin-veil-bottom);
  pointer-events:none;
}
.pin-foot > *{pointer-events:auto}
.pin-bar{
  flex:1 1 auto;position:relative;height:2px;overflow:hidden;
  background:var(--rule-2);
}
/* scaleX e não width: largura anima em layout, escala anima no compositor —
   e esta barra é redesenhada em todo quadro de rolagem. */
.pin-bar-fill{
  position:absolute;inset:0;
  background:var(--accent);
  transform-origin:left center;
  transform:scaleX(var(--pin-p,0));
}
.pin-count{
  flex:0 0 auto;
  font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.12em;
  /* Sem tabular-nums o contador muda de largura entre "01" e "06" e a barra
     pulsa junto a cada troca. */
  font-variant-numeric:tabular-nums;
  color:var(--fg-muted);
}
.pin-count-now{color:var(--fg)}

/* ---------------------------------------------------------------- movimento reduzido */
/* Não há @media(prefers-reduced-motion) aqui, e é de propósito: quem pediu
   menos movimento simplesmente não entra no modo pinado, e quem decide isso
   é o script — que também respeita o ?motion=on do core. Uma media query
   neste arquivo ignoraria o parâmetro e brigaria com ele, deixando o script
   escrevendo transform num trilho que o CSS já devolveu ao modo nativo.
   Fora o modo pinado, nada neste componente anda sozinho: a faixa nativa só
   se move quando a pessoa a empurra. */

/* ---------------------------------------------------------------- mobile */
/* Abaixo de 760px o modo pinado é desligado no CSS, mesmo que a classe
   esteja lá: prender a rolagem vertical a um deslocamento horizontal
   desorienta no celular e briga com o gesto de voltar do navegador. Isto é
   rede de segurança — o script chega à mesma conclusão pela mesma media
   query —, e é o que protege quem colar a classe à mão no HTML.
   Uma regra só, porque o modo inteiro é variável. */
@media(max-width:760px){
  .pin.is-pinned{
    --pin-pos:static;--pin-h:auto;--pin-of:visible;
    --pin-sec-h:auto;--pin-pad:var(--sec-gap);--pin-abs:static;
    --pin-track-h:auto;--pin-track-ofx:auto;--pin-track-ofy:hidden;
    --pin-snap:x mandatory;
    --pin-tx:none;--pin-veil-top:none;--pin-veil-bottom:none;
    --pin-head-pad:0 0 clamp(26px,4vh,44px);
    --pin-foot-pad:clamp(26px,4vh,44px) 0 0;
  }
  /* Card único na tela, com um pedaço do próximo à mostra: 36vw seriam
     140px de foto num celular. A alternância de larguras só faz sentido
     onde cabe mais de um card. */
  .pin{--pin-w-wide:min(84vw,360px);--pin-w-small:min(84vw,360px)}
  /* 16:10 num card de 328px deixa 195px de foto, e a legenda come metade
     dela. Em tela estreita a caixa fica mais alta para sobrar imagem — o
     recorte muda, o assunto continua no meio. */
  .pin-card{aspect-ratio:4/3}
  .pin-num{font-size:26px;padding:12px 14px}
  /* Respiro para o anel de foco do trilho não ser cortado pelo overflow. */
  .pin-track{padding-block:6px 10px}
  .pin-cap{padding:40px 14px 14px;gap:6px}
}