/* ═══════════════════════════════════════════════════════════════════
   carris.css — as tiras que andam sozinhas passam a andar ao DEDO.

   ═══ O QUE SE MEDIU, E PORQUE É QUE ISTO NÃO É POLIMENTO ═══
   A Roupa tem três tiras de dez peças e os Brindes duas de oito. Cada
   tira é uma caixa de 390 com uma fita de 1840 lá dentro, empurrada por
   um `@keyframes`. Medido no browser, a 390:

     · `deslizaArmM` vai de +20px a −900px. A caixa mede 390, por isso
       a fita só chega a mostrar até x=1290 dos seus 1840 — **as três
       últimas peças de cada tira NUNCA aparecem.** Nas duas dos Brindes
       é o mesmo: 1106 de 1472, as duas últimas nunca.

     · a caixa tem `pointer-events: none`. As dez peças de cada tira da
       Roupa são `<a href="#armario-mob">` — **trinta ligações mortas**,
       que se vêem a passar e não respondem ao toque.

     · e com MOVIMENTO REDUZIDO — que num telemóvel é uma opção comum,
       e no iOS está a um interruptor de distância — a folha do artboard
       diz `animation: none; transform: translateX(20px)`. A fita
       congela no princípio: ficam duas peças à vista e **oito
       inalcançáveis, para sempre.**

   Um efeito que falha degrada. Isto não degradava: escondia conteúdo.

   ═══ A CORRECÇÃO, E PORQUE NÃO MATA A ANIMAÇÃO ═══
   A tira continua a andar sozinha — é o gesto da casa, e é o que faz
   com que uma página de catálogo não pareça um catálogo. O que muda é
   que a caixa passa a ROLAR, e o `carris.js` entrega-a ao dedo no
   instante em que alguém lhe toca: congela a fita onde ela está e
   converte a posição do `transform` em `scrollLeft`, ao pixel. Quem não
   toca vê o que via; quem toca manda.

   Com movimento reduzido não há nada a congelar — a caixa já nasce a
   rolar, e as dez peças estão todas lá.
   ═══════════════════════════════════════════════════════════════════ */

/* Três classes para ganhar à folha do artboard, que entra como
   `:is(.palco--estreito, .barra--estreito) .mcarril` — duas. */
.palco--estreito .quadro .mcarril,
.palco--estreito .quadro .fcarril {
  overflow-x: auto;
  overflow-y: hidden;

  /* A caixa recuperada. Sem isto as dez ligações continuavam mortas —
     e é por elas que isto tudo começou. */
  pointer-events: auto;

  /* Um arrasto horizontal aqui dentro não deve puxar a página nem
     disparar o «voltar atrás» do browser. */
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;

  /* A barra de rolagem não se vê: a tira já diz que anda, e uma barra
     por baixo de fotografias partia a faixa. */
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* ═══ AQUI A ROLAGEM É SECA, E TEM DE SER ═══
     O `palco.css` dá `scroll-behavior: smooth` ao `<html>`, e isso
     HERDA-SE para dentro de tudo. O `carris.js` escreve um `scrollLeft`
     para congelar a fita sem salto — e com a herança esse número deixava
     de ser uma posição e passava a ser uma VIAGEM de uns 300ms. A tira
     partia do zero e ia lá ter devagar, que é exactamente o salto que
     isto existe para não dar.

     Mediu-se, e a prova dizia-o sem se perceber: com movimento reduzido
     o salto era 0 e com movimento normal 19px — porque o
     `prefers-reduced-motion` do `palco.css` já punha o `scroll-behavior`
     em `auto`. O suave estava a ser a avaria.

     A rolagem do DEDO não perde nada com isto: essa é do sistema, e o
     `scroll-behavior` só manda nos saltos escritos em JavaScript. */
  scroll-behavior: auto;
}

.palco--estreito .quadro .mcarril::-webkit-scrollbar,
.palco--estreito .quadro .fcarril::-webkit-scrollbar { display: none; }

/* ═══ A FITA NÃO PODE ENCOLHER ═══
   Uma caixa que passa a rolar dá aos filhos a SUA largura como base, e
   um `flex` que caiba encolhe-os. A fita tem `width: max-content`, mas
   as peças lá dentro têm de recusar o encolhimento — senão as dez de
   166px espremiam-se para 39 cada uma. */
.palco--estreito .quadro .mcarril > *,
.palco--estreito .quadro .fcarril > * { flex: 0 0 auto; }

.palco--estreito .quadro .mcarril .mpeca,
.palco--estreito .quadro .fcarril .fpeca { flex: 0 0 auto; }

/* ═══ DEPOIS DE O DEDO PEGAR NELA ═══
   O `carris.js` põe esta classe ao congelar a fita: a partir daqui a
   tira já não tem relógio e a caixa é do dedo.

   ═══ E NÃO LEVA ÍMAN ═══
   Houve aqui um `scroll-snap-type: x proximity`, para as peças
   encostarem. Saiu, e não por gosto: o íman IMANTA A ESCRITA. O
   `carris.js` congela a fita escrevendo um `scrollLeft` — e com o íman
   aceso esse número não era respeitado, era arredondado ao encosto mais
   próximo. Medido: escrever 25,5 dava 0, e o que estava debaixo do dedo
   saltava 19px. Escrever 200 dava 184.

   Numa tira de fotografias de 166px o íman valia pouco e custava o
   único número que aqui interessa. Fica a rolagem livre, que é o que
   uma fila de fotografias quer ser.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ A ARESTA QUE DIZ «HÁ MAIS» ═══
   Uma tira parada e cortada a direito lê-se como um erro de
   maquetação; a mesma tira com a última peça a desvanecer lê-se como
   uma fila que continua. É a única pista que uma caixa sem barra de
   rolagem pode dar, e não gasta um pixel de altura.

   Só depois de o dedo pegar: enquanto anda sozinha, a peça a entrar já
   diz que há mais. */
.palco--estreito .quadro .mcarril--dedo,
.palco--estreito .quadro .fcarril--dedo {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
}

/* Chegada ao fim, a aresta apaga-se — senão a última peça ficava
   sempre meio apagada e parecia um defeito. */
.palco--estreito .quadro .mcarril--fim,
.palco--estreito .quadro .fcarril--fim {
  -webkit-mask-image: none;
          mask-image: none;
}