/* ── variante contato-moto (09/out) ──
   o rodapé vira duas telas: a cena (o Snup de moto à direita + "Brands I’ve ridden with." e os logos à esquerda) e o contato de
   hoje (.ft__ct, que repete as regras do .ft do v1). base = sem JS, movimento reduzido ou sem espaço: uma depois da outra.
   com JS (.ft--seq) as duas ficam numa caixa fixa (.ft__pin) e o contato.js troca uma pela outra com a rolagem. */

.ft.ft--moto{ display:block; min-height:0; padding:0; overflow:visible }
.ft__pin{ position:relative }
.ft__ima{ display:none }
.cm__defs{ position:absolute; width:0; height:0; overflow:hidden }

/* ── o contato de hoje, dentro da caixa (as regras do .ft no style.css do v1) ── */
.ft__ct{ position:relative; min-height:100vh; min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr);
  padding:0 var(--gut) clamp(24px,4svh,52px); overflow:hidden; overflow:clip }
@media (min-width:761px) and (min-aspect-ratio:13/10){
  /* as mesmas colunas do .ft do v1 (09/out): a perna com a altura da página (INEGOCIÁVEL) e o texto começando depois dela */
  .ft__ct{ grid-template-columns:max(calc(50% - 1.75vw), calc(4.5vw + .765 * min(104svh, 66vw) + clamp(52px,5vw,100px))) minmax(0,1fr); column-gap:0; padding:0 var(--gut) 0 0 }
  /* (padrão, pedido do Di: "vem deslizando do crop da direita ... para a direita da tela") a perna para à direita, no
     lugar da moto, e o contato fica à esquerda, no lugar da lista. a classe .ft--dir vem no HTML (montar.py, PERNA),
     então vale igual sem JS e com movimento reduzido; sem ela fica o lado de hoje. ?perna=esquerda|direita compara */
  .ft--dir .ft__ct{ padding:0 0 0 var(--gut) }
  .ft--dir .ft__perna{ left:auto; right:4.5vw }
  .ft--dir .ft__txt{ grid-column:1 }
}
/* a calça subindo: o rig do v1 com outro nome (o script.js do v1 não o acha; quem troca o data-q é o contato.js) */
.ft__rigm{ position:relative; height:100%; aspect-ratio:1856 / 2304; flex:none }
.ft__rigm[data-q="0"] .ft__q[data-k="0"],
.ft__rigm[data-q="1"] .ft__q[data-k="1"],
.ft__rigm[data-q="2"] .ft__q[data-k="2"],
.ft__rigm[data-q="3"] .ft__q[data-k="3"],
.ft__rigm[data-q="4"] .ft__q[data-k="4"],
.ft__rigm[data-q="5"] .ft__q[data-k="5"],
.ft__rigm[data-q="6"] .ft__q[data-k="6"],
.ft__rigm[data-q="7"] .ft__q[data-k="7"],
.ft__rigm[data-q="8"] .ft__q[data-k="8"],
.ft__rigm[data-q="9"] .ft__q[data-k="9"],
.ft__rigm[data-q="10"] .ft__q[data-k="10"],
.ft__rigm[data-q="11"] .ft__q[data-k="11"],
.ft__rigm[data-q="12"] .ft__q[data-k="12"],
.ft__rigm[data-q="13"] .ft__q[data-k="13"],
.ft__rigm[data-q="14"] .ft__q[data-k="14"],
.ft__rigm[data-q="15"] .ft__q[data-k="15"],
.ft__rigm[data-q="16"] .ft__q[data-k="16"],
.ft__rigm[data-q="17"] .ft__q[data-k="17"],
.ft__rigm[data-q="18"] .ft__q[data-k="18"]{ visibility:visible }

/* ── a cena: moto + marcas ──
   o quadro da moto (1960×1416, recorte justo dos 2560×1440) tem a moto de 1,28% a 98,52% da largura (a ponta do
   para-lama de trás é o ponto mais à esquerda, a 77% da altura) e o chão (contato dos pneus) a 98% da altura; a touca
   voando chega ao topo do quadro. a parte visível tem 1,346 × a altura do quadro de largura (1,3842 × 0,9724).
   --mh altura do quadro, --mw largura, --cw largura de uma célula da grade, --nc o número de colunas (3 no celular, 4 no
   desktop; 15 logos), --rh altura da linha em células, --f (no HTML) a fração da célula que cada logo ocupa: o mesmo
   peso ótico para logo largo e logo quadrado.
   (09/out, Di: "a pessoa e a moto bem maiores", "clientes em três colunas", "logos maiores", título em vez do rótulo)
   celular / em pé: a moto em cima (largura toda, um pouco cortada), o título e a grade 3 colunas (5 linhas cheias) embaixo, o conjunto
   centrado na tela. na sequência (.ft--seq) tudo tem de caber numa tela: a moto vai de 108vw até 96vw (ou 40svh) e as
   células encolhem com a altura; se nem assim couber, o contato.js desliga a sequência e tudo fica em fluxo */
.cm{ position:relative; min-height:100vh; min-height:100svh; overflow:hidden; overflow:clip; pointer-events:none;
  display:flex; flex-direction:column; justify-content:center; gap:var(--gap);
  padding:var(--pt) var(--gut) var(--pb);
  --pt:calc(var(--hdh) + clamp(6px,1.4svh,18px)); --pb:clamp(10px,2.4svh,28px); --gap:clamp(12px,2.6svh,32px);
  --tfs:min(9vw, 4.6svh, 52px); --tm:clamp(10px,1.8svh,20px);
  --cg:clamp(12px,3.6vw,22px); --rg:clamp(6px,1.4svh,18px); --rh:.42; --nc:3;
  --cwW:calc((100vw - 2 * var(--gut) - 2 * var(--cg)) / 3);
  /* a altura que sobra para a moto e as 5 linhas da grade (15 logos em 3 colunas; 5 x .42 = 2,1 células) */
  --resto:calc(100svh - var(--pt) - var(--pb) - var(--gap) - var(--tfs) * 1.8 - var(--tm) - 4 * var(--rg) - 4px);
  --mmin:min(calc(96vw / 1.3842), 40svh);
  --cw:min(var(--cwW), calc((var(--resto) - var(--mmin)) / 2.1), 190px);
  --gw:calc(3 * var(--cw) + 2 * var(--cg));
  --mh:max(var(--mmin), min(calc(108vw / 1.3842), calc(var(--resto) - var(--cw) * 2.1)));
  --mw:calc(var(--mh) * 1.3842) }
.cm__moto{ order:-1; position:relative; flex:none; align-self:flex-start; width:var(--mw); height:var(--mh);
  margin:0 0 0 calc(50% - var(--mw) / 2) }
.cm__tremor{ position:absolute; inset:0; transform-origin:50% 98% }
.cm__f{ position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; visibility:hidden }
.cm__f.on{ visibility:visible }
.cm__lista{ position:relative; flex:none }
/* o título: a mesma voz dos títulos do site (Switzer Black, caixa alta, entrelinha .9), ~10% maior que o dos prêmios.
   sempre 2 linhas ("BRANDS I’VE / RIDDEN WITH."): a largura vem do texto (até 7,6em), não da grade, para não quebrar em
   3 quando as células encolhem (o contato.js mede o título uma vez e encaixa a grade embaixo dele) */
.cm__h{ margin:0 0 var(--tm); width:max-content; max-width:7.6em; font:900 var(--tfs)/.9 'Switzer',Poppins,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.035em; word-spacing:.08em; text-transform:uppercase; text-wrap:balance; color:var(--fg) }
.cm__grade{ position:relative; margin:0; padding:0; list-style:none; display:grid;
  grid-template-columns:repeat(var(--nc), var(--cw)); grid-auto-rows:calc(var(--cw) * var(--rh)); column-gap:var(--cg); row-gap:var(--rg);
  align-items:center; justify-items:center }   /* 09/out (Di): grade de moodboard, cada logo no centro da sua célula */
.cm__lg{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--cw) * .045) }
.cm__lg img{ display:block; width:calc(var(--cw) * var(--f)); height:auto; max-width:none; filter:url(#tinta-branca) }
.cm__lg--mlb{ align-items:center }
.cm__lg b{ display:block; font:900 calc(var(--cw) * .115)/.8 'Switzer',Poppins,"Helvetica Neue",Arial,sans-serif; letter-spacing:-.01em; color:#fff }   /* o nome da MLB no branco dos logos */
/* em fluxo no celular (sem JS, movimento reduzido ou tela que não cabe): a moto na largura toda, a grade pela largura */
@media not all and (min-width:761px) and (min-aspect-ratio:13/10){
  .ft--moto:not(.ft--seq) .cm{ --cw:min(var(--cwW), 190px); --mh:min(calc(108vw / 1.3842), 62svh) }
}

/* desktop (09/out, 3ª rodada, Di: "essa moto um pouco maior ... até a ponta da orelha um pouquinho abaixo do menu do
   topo, pode cortar um pouco da roda dianteira" e "sobe esses logos juntos ... em cima do paralama e atrás das costas"):
   a moto à direita, do chão (perto do pé da tela) até a ponta da orelha da touca 1,5svh abaixo da barra do topo (a
   orelha mais alta dos 21 quadros é o topo do quadro); a frente sai pelo corte da direita, no máximo até o cubo da roda
   da frente (85,7% do quadro) ficar a 2,5% do quadro da borda. o título e a grade sobem juntos para o alto, à esquerda
   (o título a --lt, logo abaixo da barra), no rosa livre atrás das costas e acima do para-lama de trás.
   quem faz o encaixe fino é o contato.js (encaixar(): o contorno da moto nos 21 quadros, a maior célula que não encosta
   na moto, o espaço entre as linhas e o corte); ele põe --mh, --mx, --mt, --cw, --rg e --lt no .cm. as contas abaixo são
   o ponto de partida sem JS, mais simples: a grade inteira à esquerda da ponta do para-lama de trás (1,28% do quadro),
   a 1,6vw dela; se a moto não deixar espaço para a grade (4 células de 5,25vw), ela diminui.
   (5ª rodada, Di: "ao invés de ter cinco [linhas], ter quatro e fazer mais uma coluna") 4 colunas: linhas de 4, 4, 4 e 3,
   a última encostada à esquerda */
@media (min-width:761px) and (min-aspect-ratio:13/10){
  .cm{ display:block; padding:0;
    --pb:clamp(16px,3.5svh,44px); --chao:calc(100svh - var(--pb));          /* o chão (contato dos pneus) */
    --tfs:calc(min(clamp(30px,5.6vw,80px),7svh) * .92); --tm:clamp(14px,2.4svh,32px);
    --cg:clamp(16px,1.6vw,32px); --rg:clamp(14px,3.2svh,44px); --rh:.46; --nc:4;
    --lt0:calc(var(--hdh) + var(--gut) + var(--desl));                       /* o topo do título: a mesma distância da lateral */
    --desl:2.5vw;   /* 09/out (Di: "move sensivelmente para a direita até quase o limite da orelhinha da touca"): o bloco sai da margem */
    --mh:min(calc((var(--chao) - var(--hdh) - 1.5svh) / .98), calc((77.4vw - var(--gut) - 3 * var(--cg)) / 1.2032));
    --mw:calc(var(--mh) * 1.3842);
    --cw:min(11vw, 21svh, calc((100vw - .8692 * var(--mw) - 1.6vw - var(--gut) - var(--desl) - 3 * var(--cg)) / 4),
      calc((var(--chao) - var(--lt0) - var(--tfs) * 1.8 - var(--tm) - 3 * var(--rg)) / 1.84));
    --gw:calc(4 * var(--cw) + 3 * var(--cg)) }
  .cm__moto{ position:absolute; margin:0; left:var(--mx, calc(100vw - .882 * var(--mw))); top:var(--mt, calc(var(--chao) - var(--mh) * .98)) }
  .cm__lista{ position:absolute; left:calc(var(--gut) + var(--desl)); top:var(--lt, var(--lt0)); width:var(--gw) }
}

/* ── fumaça do escapamento (09/out, 5ª rodada, Di: "uma fumacinha saindo do escapamento para preencher o vazio que fica
   na parte esquerda abaixo") ── só no desktop. as nuvens de tatuagem (creme, traço preto, sombra amarela) saem da boca
   do escapamento e vão para a esquerda, para o canto de baixo, sempre abaixo da grade; o contato.js põe e move
   cada uma (em passos de 12 qps, como os quadros da moto) e apaga a camada inteira junto com a cena (opacity no
   .cm__fumaca). revisão: todas saem da boca cromada do silencioso de cima, que passa na frente da roda, então ficam na
   .cm__fumaca--frente (em cima da moto); a .cm__fumaca de baixo da moto só é usada com ?fumaca=atras. sem JS: nada */
.cm__fumaca{ display:none; position:absolute; inset:0; overflow:hidden; overflow:clip; pointer-events:none }
@media (min-width:761px) and (min-aspect-ratio:13/10){ .cm__fumaca{ display:block } }
.cm__nv{ position:absolute; left:0; top:0; display:block; max-width:none; height:auto; visibility:hidden;
  transform-origin:50% 50%; user-select:none; -webkit-user-drag:none }
.cm__nv.on{ visibility:visible }
.ft--seq .cm__nv{ will-change:transform, opacity }

/* ── sequência (com JS) ── */
.ft--seq{ height:420vh; height:420svh }   /* 3,2 telas de curso: entrada, parada, saída, perna e calça */
.ft--seq .ft__pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; overflow:clip }
.ft--seq .cm{ position:absolute; inset:0; min-height:0; z-index:2 }
.ft--seq .ft__ct{ position:absolute; inset:0; min-height:0; z-index:1 }
.ft--seq .cm__moto, .ft--seq .ft__perna, .ft--seq .cm__lg, .ft--seq .cm__h{ will-change:transform, opacity }
.ft--seq .ft__txt.fora{ pointer-events:none }
/* ímã leve na parada (moto parada, marcas montadas); o script liga html.ima-ct só no desktop */
.ft--seq .ft__ima{ display:block; position:absolute; top:0; left:0; width:1px; height:1px; pointer-events:none; scroll-snap-align:start }
html.ima-ct{ scroll-snap-type:y proximity }

/* 09/out (Di: "deixar essa bota maior ... aumenta ela de cima para baixo, para ela ficar bem ali no limite do Let's
   Ride ... um respiro bem menor"): no celular a foto da perna ocupa toda a altura que sobra acima do texto (linha 1fr,
   o topo continua no topo da seção) e o texto vem logo abaixo da bota. o desktop não muda */
@media not all and (min-width:761px) and (min-aspect-ratio:13/10){
  .ft--moto .ft__ct{ grid-template-rows:minmax(0,1fr) auto }
  .ft--moto .ft__perna{ height:100%; min-height:min(46svh, 100vw); max-height:150vw }
  .ft--moto .ft__txt{ padding-top:4px }
}