/* Campos Pizza: ajustes por cima do kit. Sem o kit (?motion=0 ou movimento reduzido) o site fica como era. */

/* vídeo novo é horizontal: do tablet para cima ele ocupa o hero inteiro, com a comanda por cima.
   Fica fora do html.m-on de propósito: o layout vale mesmo com o kit desligado */
.hc-video{background-image:url("../img/hero-capa.webp")}
@media (min-width:641px){
  .hero{min-height:min(78vh,820px);display:grid;align-items:center}
  .hc-grid{grid-template-columns:minmax(0,1fr);width:100%}
  .hc-txt{position:relative;z-index:1;max-width:520px}
  .hero .hc-video{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .hc-video::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(23,17,15,.94) 0,rgba(23,17,15,.78) 34%,rgba(23,17,15,.12) 66%,rgba(23,17,15,.08) 100%),linear-gradient(0deg,rgba(23,17,15,.55),transparent 28%)}
  .hc-selo,.hc-pausa{z-index:1}
  .hc-selo{left:auto;right:max(20px,calc((100vw - var(--larg))/2 + 20px));bottom:24px}
}
/* no computador o vídeo começa depois do texto, para quem aparece nele não ficar atrás da comanda */
@media (min-width:901px){
  .hero .hc-video{left:30%;width:70%}
  .hc-video::after{background:linear-gradient(90deg,#17110f 0,rgba(23,17,15,.7) 20%,rgba(23,17,15,.06) 46%,rgba(23,17,15,0) 100%),linear-gradient(0deg,rgba(23,17,15,.5),transparent 26%)}
}

/* o surgir do site só roda em navegador com animation-timeline; o kit assume e roda em todos */
html.m-on .cab-secao,html.m-on .intro-secao,html.m-on .sabor,html.m-on .tam,html.m-on .pilar,html.m-on .depo,
html.m-on .galeria figure,html.m-on .bloco,html.m-on .foto-legenda,html.m-on .historia-txt,html.m-on .grupos,
html.m-on .form,html.m-on .visite > *,html.m-on .mapa,html.m-on .promo{animation:none}

/* "Do tamanho da sua fome": cada pizza cresce e gira até o tamanho real */
.tam.m-rv .disco{transform:scale(.3) rotate(-140deg)}
.tam.m-rv.m-anima .disco{transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:inherit}
.tam.m-rv.m-visto .disco{transform:none}

/* faixa: pontinho entre as palavras, como os pontilhados da comanda */
.m-fita span{display:inline-flex;align-items:center;gap:1.2em;padding-inline:.6em}
.m-fita span::after{content:"";width:.28em;height:.28em;border-radius:50%;background:currentColor;opacity:.55}
.m-fita[style*="f-mono"]{font-size:clamp(.95rem,1.9vw,1.4rem);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.7em 0;border-block:2px dashed rgba(120,31,39,.35)}

/* legenda da galeria: as fotos ficam quadradas e a esteira precisa respirar */
.m-gal-trilho figure{border-radius:12px}
.m-gal-pin .m-gal-fixa{padding-top:96px}