/* =========================================================
   SorvFood's — Site e Catálogo · topo da landing com o caminhão animado
   (opção hero_visual = caminhao; carregado só na landing, nesse modo, depois do sorvfoods.css)

   Porte do componente aprovado em landing/hero-caminhao/ (componente/sf-hero.css e sf-truck.css),
   com as classes e variáveis do plugin. Mesmos valores da prévia; o que muda é só o nome:
   .wrap → .sf-wrap, .hero-provas → .sf-hero-provas, .tile → .sf-tile, --ouro → --sf-ouro etc.
   As classes sf-hero__* e sf-truck-* são do componente.

   Ordem (= marcação, hero.php): texto e botão, nota e horário, cena do caminhão, provas e a faixa
   de atalhos. Computador sem sticky: grade texto | provas | atalhos, com a cena à direita do texto.
   Computador com o palco preso: o palco tem a altura da tela; texto e provas em cima, faixa de
   atalhos presa ao pé e a cena entre os dois (absolutas). Celular e tablet: uma coluna.
   Rolagem: o palco só fica preso (sticky) quando cabe INTEIRO na tela, abaixo do topo fixo (tela
   de 860 px de altura ou mais; o JS confere e solta com .sf-hero--solto se não couber). Nos outros
   casos o efeito acontece na rolagem normal e termina antes de o botão passar por baixo do topo.
   Sem JS (sem .sf-js-anim no <html>) ou com movimento reduzido: o quadro final, parado.
   O movimento é do assets/js/sorvfoods-caminhao.js (só transform e opacity).
   ========================================================= */

/* ---------- sf-hero: o topo ---------- */
.sf-hero--caminhao {
  /* altura do topo fixo (o JS mede o próprio topo; esta conta vale para o palco preso) */
  --sf-topo: var(--sf-topo-h);
  --sf-anel: var(--sf-ouro);
  --sf-rolagem: 38vh;
  --sf-modo: flow;
  position: relative;
  overflow: visible;
  padding: 0;
  color: var(--sf-texto-claro);
  background: var(--sf-choco-fundo);
}

/* com a barra de admin (só para quem está logado) o topo fixo desce junto; até 600 px ela rola com a página */
.admin-bar .sf-hero--caminhao {
  --sf-topo: calc(var(--sf-topo-h) + var(--wp-admin--admin-bar--height, 32px));
}

@media screen and (max-width:600px) {
  .admin-bar .sf-hero--caminhao {
    --sf-topo: var(--sf-topo-h);
  }
}

.sf-hero--caminhao .sf-sobre {
  color: var(--sf-ouro);
}

.sf-hero__palco {
  position: relative;
  overflow: clip;
  padding: 58px 0 34px;
  background: radial-gradient(780px 520px at 86% 6%, rgba(255,194,14,.16), transparent 64%), radial-gradient(520px 420px at 0% 0%, rgba(255,122,0,.10), transparent 60%), linear-gradient(180deg, #5C2E13 0%, var(--sf-choco-fundo) 100%);
}

.sf-hero__wrap {
  position: relative;
  z-index: 2;
}

/* mesma largura da coluna de texto da hero final (1.12fr de 2fr, com 56px de vão) */
.sf-hero__col {
  width: calc((100% - 56px) * .56);
}

.sf-hero__folga {
  height: 0;
}

/* ---------- computador (sem sticky): grade texto | provas | (linha elástica) | atalhos ----------
   A cena cobre as linhas 1 a 3, à direita do texto: as rodas ficam na altura do fim das provas. */
@media (min-width:981px) {
  .sf-hero__palco {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto 1fr auto;
    padding: 44px 0 32px;
  }
  .sf-hero__wrap--texto {
    grid-row: 1;
    grid-column: 1;
  }
  .sf-hero__wrap--base {
    grid-row: 2;
    grid-column: 1;
  }
  .sf-hero__atalhos {
    grid-row: 4;
    grid-column: 1;
  }
  /* a linha das provas termina no fim do conteúdo: não encosta na frente do caminhão */
  .sf-hero--caminhao .sf-hero-provas {
    margin-top: 26px;
    width: max-content;
    max-width: 100%;
  }
}

/* ---------- palco preso (sticky): só em tela alta, onde texto + provas + atalhos cabem inteiros ----------
   Trilho = palco + folga; o palco fica preso enquanto a folga passa (= rolagem do efeito, 38vh).
   Preso, o palco tem a altura da tela abaixo do topo fixo. Cena e faixa de atalhos ficam presas a ele
   (absolutas): só o texto depende da fonte, e a troca de fonte não move caminhão, chão nem atalhos. */
@media (min-width:981px) and (min-height:860px) {
  .sf-hero--caminhao {
    --sf-modo: pin;
  }
  .sf-js-anim .sf-hero--caminhao:not(.sf-hero--solto) .sf-hero__palco {
    /* --sf-pad-topo: respiro de cima, só pela altura da tela; --sf-pe: respiro de baixo;
       --sf-faixa-h: altura da faixa de atalhos (cartões de 80 px + linha "Também no catálogo") */
    --sf-pad-topo: clamp(44px, 50vh - 406px, 180px);
    --sf-pe: 40px;
    --sf-faixa-h: 140px;
    position: sticky;
    top: calc(var(--sf-topo) + 1px);
    height: calc(100vh - var(--sf-topo) - 1px);
    grid-template-rows: auto auto;
    align-content: start;
    padding-top: var(--sf-pad-topo);
    padding-bottom: calc(var(--sf-pe) + var(--sf-faixa-h));
  }
  .sf-js-anim .sf-hero--caminhao:not(.sf-hero--solto) .sf-hero__atalhos {
    position: absolute;
    grid-area: auto;
    left: 0;
    right: 0;
    bottom: var(--sf-pe);
    height: var(--sf-faixa-h);
  }
  .sf-js-anim .sf-hero--caminhao:not(.sf-hero--solto) .sf-hero__folga {
    height: var(--sf-rolagem);
  }
}

@media (min-width:981px) and (max-width:1099px) and (min-height:860px) {
  .sf-js-anim .sf-hero--caminhao:not(.sf-hero--solto) .sf-hero__palco {
    --sf-faixa-h: 150px;
  }
}

@supports (padding-top:round(1.5px, 1px)) {
  @media (min-width:981px) and (min-height:860px) {
    .sf-js-anim .sf-hero--caminhao:not(.sf-hero--solto) .sf-hero__palco {
      --sf-pad-topo: clamp(44px, round(50vh - 406px, 1px), 180px);
    }
    /* folga em px inteiros: depois que o palco solta, o caminhão fica na mesma fração de pixel da página sem JS */
    .sf-js-anim .sf-hero--caminhao:not(.sf-hero--solto) .sf-hero__folga {
      height: round(var(--sf-rolagem), 1px);
    }
  }
}

.sf-hero--caminhao.sf-hero--solto {
  --sf-modo: flow;
}

/* movimento desligado em tempo real (a preferência mudou depois de carregar) */
.sf-js-anim .sf-hero--caminhao.sf-truck--quieto .sf-hero__folga {
  height: 0;
}

.sf-js-anim .sf-hero--caminhao.sf-truck--quieto .sf-hero__palco {
  position: relative;
  top: auto;
  height: auto;
}

/* ---------- atalhos de categoria: faixa compacta dentro do palco (hero-atalhos.php, formato faixa) ---------- */
.sf-hero__atalhos {
  position: relative;
  z-index: 2;
  padding-top: 24px;
}

.sf-hero__atalhos-grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}

.sf-hero__mais {
  margin-top: 14px;
}

@media (min-width:768px) {
  .sf-hero__atalhos .sf-tile {
    --sf-y: 0px;
    display: grid;
    grid-template-columns: 60px minmax(0,1fr) auto;
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 10px 12px 10px 10px;
    border-radius: 18px;
  }
  .sf-hero__atalhos .sf-tile-img {
    grid-row: 1 / 5;
    grid-column: 1;
    width: 60px;
    aspect-ratio: 1/1;
    border-radius: 12px;
  }
  .sf-hero__atalhos .sf-tile-img img {
    inset: 4%;
    width: 92%;
    height: 92%;
  }
  .sf-hero__atalhos .sf-tile-nome {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    padding: 0;
    font-size: 15.5px;
    line-height: 1.2;
  }
  .sf-hero__atalhos .sf-tile-marcas {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    margin-top: 3px;
    padding: 0;
    font-size: 13px;
    line-height: 1.3;
  }
  .sf-hero__atalhos .sf-tile-seta {
    position: static;
    grid-column: 3;
    grid-row: 1 / 5;
  }
}

/* computador: 4 em linha, sem a seta (o cartão inteiro é o link): nome e marcas cabem numa linha */
@media (min-width:981px) {
  .sf-hero__atalhos .sf-tile {
    grid-template-columns: 60px minmax(0,1fr);
    padding: 10px 14px 10px 10px;
  }
  .sf-hero__atalhos .sf-tile-seta {
    display: none;
  }
  .sf-hero__atalhos .sf-tile-nome,
  .sf-hero__atalhos .sf-tile-marcas {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width:981px) and (max-width:1099px) {
  /* coluna de texto estreita: provas mais compactas, sem quebrar "Desde 1990" */
  .sf-hero--caminhao .sf-prova-item {
    padding: 0 18px;
  }
  .sf-hero--caminhao .sf-prova-item:first-child {
    padding-left: 0;
  }
  .sf-hero--caminhao .sf-prova-item b {
    font-size: 27px;
    white-space: nowrap;
  }
  .sf-hero__atalhos-grade {
    gap: 12px;
  }
  .sf-hero__atalhos .sf-tile {
    grid-template-columns: 52px minmax(0,1fr);
    column-gap: 12px;
    padding: 9px 10px 9px 9px;
  }
  .sf-hero__atalhos .sf-tile-img {
    width: 52px;
  }
  .sf-hero__atalhos .sf-tile-nome,
  .sf-hero__atalhos .sf-tile-marcas {
    white-space: normal;
  }
  .sf-hero__atalhos .sf-tile-nome {
    font-size: 14.5px;
  }
  .sf-hero__atalhos .sf-tile-marcas {
    font-size: 12.5px;
  }
}

/* tablet: 2 x 2 */
@media (min-width:768px) and (max-width:980px) {
  .sf-hero__atalhos-grade {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
  }
}

/* ---------- celular e tablet: uma coluna, na ordem da marcação ---------- */
@media (max-width:980px) {
  .sf-hero__col {
    width: auto;
  }
  .sf-hero--caminhao .sf-hero-provas {
    margin-top: 18px;
  }
}

@media (min-width:768px) and (max-width:980px) {
  .sf-hero__palco {
    padding: 44px 0 34px;
  }
}

@media (max-width:767px) {
  .sf-hero__palco {
    padding: 26px 0 26px;
  }
  .sf-hero--caminhao .sf-hero-provas {
    margin-top: 12px;
  }
  .sf-hero__atalhos {
    padding-top: 22px;
  }
  .sf-hero__atalhos-grade {
    gap: 8px;
  }
}

/* =========================================================
   sf-truck · cena do caminhão (chão + brilho + caminhão + rodas + selo)
   Só transform e opacity. O JS escreve os transforms a cada quadro.
   Medidas das camadas: landing/hero-caminhao/assets/camadas.json (recorte de 1276 x 650).
   ========================================================= */
.sf-truck-scene {
  /* borda direita da coluna de texto (mesma conta do .sf-wrap e da grade do topo) */
  --sf-wrap: min(1200px, 100cqw - 64px);
  --sf-xt: calc((100cqw - var(--sf-wrap)) / 2 + (var(--sf-wrap) - 56px) * .56);
  --sf-gap: 32px;      /* respiro entre a coluna de texto e a frente do caminhão */
  --sf-chao: 22px;     /* piso visível sob as rodas, no fim do efeito */
  /* caixa do caminhão no quadro final (p = 1): largura, canto esquerdo e topo.
     As rodas ficam no pé da cena (logo acima dos atalhos); o caminhão encosta à direita. */
  --sf-w: min(840px, 100cqw - var(--sf-xt) - var(--sf-gap) - 3cqw, (100cqh - var(--sf-chao) - 96px) * 1.9631);
  --sf-x: calc(100cqw - 3cqw - var(--sf-w));
  --sf-y: calc(100cqh - var(--sf-chao) - var(--sf-w) / 1.9631);
  /* movimento (lido pelo JS):
     --sf-s0  escala no começo (o caminhão cresce até 1)
     --sf-dx  quanto ele começa à direita (fração da largura do caminhão)
     --sf-dy  quanto as rodas começam acima (fração da altura): ele desce isso
     --sf-pan travelling da câmera: quanto o chão corre para a direita (fração da largura) */
  --sf-s0: .85;
  --sf-dx: .24;
  --sf-dy: .11;
  --sf-pan: .32;
  position: relative;
  grid-row: 1 / 4;
  grid-column: 1;
  z-index: 1;
  container-type: size;
  overflow-x: clip;
  overflow-y: visible;
  pointer-events: none;
}

/* palco preso: a cena fica presa ao palco, entre o respiro de cima e a faixa de atalhos */
@media (min-width:981px) and (min-height:860px) {
  .sf-js-anim .sf-hero--caminhao:not(.sf-hero--solto) .sf-truck-scene {
    position: absolute;
    grid-area: auto;
    left: 0;
    right: 0;
    top: var(--sf-pad-topo);
    bottom: calc(var(--sf-pe) + var(--sf-faixa-h));
  }
}

/* fundo: some à esquerda (atrás do texto), em cima e embaixo */
.sf-truck-fundo {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--sf-xt) - 10px), #000 calc(var(--sf-xt) + 220px)), linear-gradient(180deg, transparent, #000 70px, #000 calc(100% - var(--sf-chao) - 6px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent calc(var(--sf-xt) - 10px), #000 calc(var(--sf-xt) + 220px)), linear-gradient(180deg, transparent, #000 70px, #000 calc(100% - var(--sf-chao) - 6px), transparent);
  mask-composite: intersect;
}

.sf-truck-mundo {
  position: absolute;
  left: var(--sf-x);
  top: var(--sf-y);
  width: var(--sf-w);
  aspect-ratio: 1276/650;
}

@supports (left:round(1.5px, 1px)) {
  .sf-truck-mundo {
    left: round(var(--sf-x), 1px);
    top: round(var(--sf-y), 1px);
    width: round(var(--sf-w), 2px);
  }
}

.sf-truck-plano {
  position: absolute;
  display: block;
  max-width: none;
  overflow: visible;
}

/* brilho de fim de tarde no horizonte, atrás do caminhão (parado: está "no infinito") */
.sf-truck-brilho {
  position: absolute;
  left: -38%;
  top: -28%;
  width: 196%;
  height: 176%;
  background: radial-gradient(closest-side, rgba(255,186,30,.28), rgba(255,160,20,.11) 50%, rgba(255,150,20,0));
}

/* caminhão: transform-origin no canto; o JS faz translate + scale */
.sf-truck {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

.sf-truck img {
  display: block;
  max-width: none;
}

.sf-truck-sombra {
  position: absolute;
  left: 3.2132%;
  top: 85.5385%;
  width: 100.3135%;
  height: 18.7692%;
}

.sf-truck-corpo {
  position: absolute;
  inset: 0;
  transform-origin: 75.39% 97%;
}

.sf-truck-img {
  position: relative;
  width: 100%;
  height: auto;
}

.sf-truck-roda {
  position: absolute;
  aspect-ratio: 1;
  transform-origin: 50% 50%;
}

.sf-truck-roda img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sf-truck-roda--d {
  left: 28.1628%;
  top: 78.6568%;
  width: 9.0125%;
  transform: matrix(0.787556, -0.024593, -0.024593, 0.997153, 0, 0);
}

.sf-truck-roda--t {
  left: 71.5909%;
  top: 76.4615%;
  width: 7.6019%;
  transform: matrix(0.708276, -0.007962, -0.007962, 0.999783, 0, 0);
}

/* selo "prove antes de comprar": preso no canto de cima do baú, anda e balança com o caminhão.
   Cobre só a quina do baú e o alto do defletor da cabine: letreiro, logo e telefones ficam livres.
   Sombra e giro vêm das regras-base .sf-selo/.sf-giro do sorvfoods.css. */
.sf-truck-selo {
  --sf-selo: clamp(88px, 18.5%, 122px);
  left: 39.58%;
  top: -1.23%;
  width: var(--sf-selo);
  height: auto;
  aspect-ratio: 1/1;
  margin: calc(var(--sf-selo) / -2) 0 0 calc(var(--sf-selo) / -2);
  z-index: 3;
}

/* o texto do selo gira só com o caminhão parado: andando, o caminhão é uma camada própria e cada quadro
   do giro obrigava a rasterizar a camada de novo. A pausa não se nota. */
.sf-truck--anda .sf-truck-selo .sf-giro {
  animation-play-state: paused;
}

/* com movimento: estado inicial (p = 0) já no CSS, para o primeiro quadro bater com o JS */
.sf-js-anim .sf-truck {
  transform: translate(calc(var(--sf-dx) * 100%), calc((1 - var(--sf-s0) - var(--sf-dy)) * 100%)) scale(var(--sf-s0));
}

.sf-js-anim .sf-truck-plano {
  will-change: transform;
  transform: translate3d(calc(var(--sf-k) * var(--sf-pan) * var(--sf-w) * -1), 0, 0);
}

/* caminhão: camada própria só enquanto anda; parado, o navegador redesenha nítido o letreiro e o logo */
.sf-truck--anda,
.sf-truck--anda .sf-truck-corpo,
.sf-truck--anda .sf-truck-gira,
.sf-truck--anda .sf-truck-sombra {
  will-change: transform;
}

.sf-truck--quieto .sf-truck,
.sf-truck--quieto .sf-truck-plano,
.sf-truck--quieto .sf-truck-corpo,
.sf-truck--quieto .sf-truck-gira {
  transform: none !important;
}

/* impressão: sempre o quadro final, sem o vão da rolagem */
@media print {
  .sf-truck,
  .sf-truck-plano,
  .sf-truck-corpo,
  .sf-truck-gira {
    transform: none !important;
  }
  .sf-hero__folga {
    height: 0 !important;
  }
  .sf-hero__palco {
    position: relative !important;
    top: auto !important;
    height: auto !important;
  }
}

/* ---------- celular e tablet: a cena entra no fluxo, entre o horário e as provas ---------- */
@media (max-width:980px) {
  .sf-truck-scene {
    grid-row: auto;
    grid-column: auto;
    margin-top: 6px;
    aspect-ratio: 390/222;
    overflow: clip;
    --sf-w: 90cqw;
    --sf-x: 5cqw;
    --sf-chao: 18px;
    --sf-s0: .84;
    --sf-dx: .21;
    --sf-dy: .1;
    --sf-pan: .3;
  }
  .sf-truck-fundo {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 calc(100% - var(--sf-chao) - 4px), transparent);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, transparent, #000 20%, #000 calc(100% - var(--sf-chao) - 4px), transparent);
    mask-composite: add;
  }
  /* como na hero final: o selo só aparece no computador */
  .sf-truck-selo {
    display: none;
  }
}

@media (min-width:768px) and (max-width:980px) {
  .sf-truck-scene {
    aspect-ratio: 820/330;
    margin-top: 14px;
    --sf-w: 66cqw;
    --sf-x: 30cqw;
    --sf-chao: 24px;
    --sf-dx: .16;
  }
}