/* ═══════════════════════════════════════════════════════════════════════════
   Motion design do site novo (02/11/2026)
   Regra de ouro: conteúdo nunca fica escondido esperando animação. O estado
   "antes da entrada" só existe com .vh-mov-on (posto pelo vh-motion.js quando
   o navegador suporta) e some no máximo 1,5 s depois para o que está na tela.
   Quem pede menos movimento no sistema recebe a página parada.
   ═══════════════════════════════════════════════════════════════════════════ */

/* entrada ao rolar, em cascata dentro do mesmo grupo */
.vh-mov-on .vh-a{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1) var(--vh-atraso,0ms),transform .7s cubic-bezier(.2,.7,.3,1) var(--vh-atraso,0ms)}
.vh-mov-on .vh-a.vh-v{opacity:1;transform:none}

/* abertura: painel laranja desliza, título e botões sobem, vídeo com zoom lento */
@media (prefers-reduced-motion:no-preference){
  .vh-hero .vh-painel{animation:vh-painel .9s cubic-bezier(.2,.7,.2,1) both}
  .vh-hero .vh-painel::before{animation:vh-diag .9s cubic-bezier(.2,.7,.2,1) both}
  .vh-hero h1{animation:vh-sobe .9s cubic-bezier(.2,.7,.3,1) .25s both}
  .vh-hero .vh-painel > p{animation:vh-sobe .9s cubic-bezier(.2,.7,.3,1) .4s both}
  .vh-hero .vh-acoes{animation:vh-sobe .9s cubic-bezier(.2,.7,.3,1) .55s both}
  .vh-hero .vh-midia video,.vh-hero .vh-midia{animation:vh-zoom 14s ease-out both}
  .vh-orc form{animation:vh-sobe .9s cubic-bezier(.2,.7,.3,1) .7s both}
  .vh-cab h1{animation:vh-sobe .8s cubic-bezier(.2,.7,.3,1) .1s both}
  .vh-cab .vh-wrap > div > p,.vh-cab .vh-acoes{animation:vh-sobe .8s cubic-bezier(.2,.7,.3,1) .25s both}
  .vh-cab img{animation:vh-foto 1s cubic-bezier(.2,.7,.3,1) .15s both}
}
@keyframes vh-painel{from{transform:translateX(60px);opacity:0}to{transform:none;opacity:1}}
@keyframes vh-diag{from{transform:translateX(80px)}to{transform:none}}
@keyframes vh-sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes vh-zoom{from{transform:scale(1.09)}to{transform:scale(1)}}
@keyframes vh-foto{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* cards reagem ao mouse: sobem um pouco e a foto aproxima */
.vh-prod,.vh-modelo,.vh-familia,.vh-tec,.vh-noticia,.vh-merc,.vh-mercb,.vh-canal,.vh-dif{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .2s}
.vh-prod img,.vh-modelo img,.vh-familia img,.vh-noticia img,.vh-merc img,.vh-mercb img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .vh-prod:hover,.vh-modelo:hover,.vh-familia:hover,.vh-tec:hover,.vh-noticia:hover,.vh-merc:hover,.vh-mercb:hover,.vh-canal:hover,.vh-dif:hover{transform:translateY(-6px);box-shadow:0 18px 36px -20px rgba(61,61,61,.45)}
  .vh-prod:hover img,.vh-modelo:hover img,.vh-familia:hover img,.vh-noticia:hover img,.vh-merc:hover img,.vh-mercb:hover img{transform:scale(1.05)}
  .vh .vh-btn{transition:transform .2s,background-color .2s,color .2s,box-shadow .2s}
  .vh .vh-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(0,0,0,.45)}
  .vh-zap{transition:transform .25s}
  .vh-zap:hover{transform:scale(1.05)}
}
.vh-prod,.vh-modelo,.vh-familia,.vh-noticia,.vh-merc,.vh-mercb{overflow:hidden}

/* WhatsApp: pulso discreto a cada 6 s para chamar atenção sem incomodar */
@media (prefers-reduced-motion:no-preference){
  .vh-zap::after{content:"";position:absolute;inset:0;border-radius:40px;box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:vh-pulso 6s ease-out 3s infinite}
}
.vh-zap{position:fixed}
@keyframes vh-pulso{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}18%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* faixa de produtos deslizando sem parar (para quando o mouse passa) */
.vh-marquee{overflow:hidden;background:#fff;padding:28px 0;border-top:1px solid var(--linha,#E5E5E5);border-bottom:1px solid var(--linha,#E5E5E5)}
.vh-marquee-trilho{display:flex;gap:18px;width:max-content}
@media (prefers-reduced-motion:no-preference){.vh-marquee-trilho{animation:vh-desliza 48s linear infinite}.vh-marquee:hover .vh-marquee-trilho{animation-play-state:paused}}
@media (prefers-reduced-motion:reduce){.vh-marquee{overflow-x:auto}}
.vh-marquee a{display:block;width:180px;text-decoration:none;color:var(--grafite,#3D3D3D);text-align:center}
.vh-marquee img{width:180px;height:180px;object-fit:cover;border-radius:12px;background:#EDEDED;transition:transform .4s}
.vh-marquee a:hover img{transform:scale(1.04)}
.vh-marquee span{display:block;margin-top:8px;font:500 14px/1.3 "Roboto",Arial,sans-serif}
@keyframes vh-desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* linhas da tabela entram ao filtrar */
@media (prefers-reduced-motion:no-preference){.vh-tabcat tr.vh-entra{animation:vh-linha .35s ease-out both}}
@keyframes vh-linha{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* profundidade: fotos de fundo andam mais devagar que a página */
.vh-par{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .vh-mov-on .vh-a{opacity:1;transform:none;transition:none}
  .vh-par{transform:none!important}
}