/* ═══ motion-wow.css — assinatura de movimento "cold stamping + bobina" (MODELO 27/09/2026) ═══
   Leva para o site inteiro a linguagem que já existia no logo e no envio:
   1. títulos sobem por trás de uma máscara (em vez do fade simples)
   2. a palavra dourada em itálico de cada título recebe uma passada de brilho metálico (cold stamping)
   3. o filete dourado dos rótulos de seção se desenha
   4. fotos e vídeos grandes se revelam de cima para baixo, como uma etiqueta saindo da bobina
   5. botões: uma faixa de brilho atravessa no hover (só em telas com mouse)
   6. troca de página com passagem suave (View Transitions; navegadores sem suporte trocam normalmente)
   7. a foto de "Rótulos que identificam…" nasce como uma etiqueta recortada no centro e se abre até o quadro
      inteiro, com a imagem assentando do zoom; depois desliza de leve com a rolagem (motion-wow.js).
      O hero continua fixo, como antes.
   Tudo desligado com "reduzir movimento". */

/* 1 ── títulos: máscara */
@keyframes mvTitulo{
  from{opacity:0;translate:0 .6em;clip-path:inset(0 -12% 100% -12%)}
  to{opacity:1;translate:0 0;clip-path:inset(-25% -12% -35% -12%)}
}
html:root body .ac-in [data-mv="titulo"]{animation:mvTitulo 1.15s cubic-bezier(.19,1,.22,1) var(--d,0s) both}

/* 2 ── palavra dourada: brilho metálico uma vez, depois que ela assenta */
@keyframes mvFoilTexto{from{background-position:120% 0}to{background-position:-20% 0}}
html:root body .ac-in [data-mv="titulo"] em{
  background-image:linear-gradient(105deg,currentColor 0%,currentColor 41%,#fff6da 50%,currentColor 59%,currentColor 100%);
  background-size:280% 100%;background-position:120% 0;background-repeat:repeat-x;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent !important;
  padding-right:.14em;margin-right:-.14em;
  animation:mvEntraEm .7s var(--mv-ease) calc(var(--d,0s) + .28s) both,mvFoilTexto 1.35s cubic-bezier(.45,0,.2,1) calc(var(--d,0s) + 1s) both}

/* 2b ── mesmo brilho nas duas seções que têm entrada própria ("Destacamos marcas…" e "Rótulos que identificam…") */
html:root body .elementor-element.animated .acpf-title em,html:root body .acauth-anim.is-in .acauth-title em{
  background-image:linear-gradient(105deg,currentColor 0%,currentColor 41%,#fff6da 50%,currentColor 59%,currentColor 100%);
  background-size:280% 100%;background-position:120% 0;background-repeat:repeat-x;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent !important;
  padding-right:.14em;margin-right:-.14em;
  animation:mvFoilTexto 1.35s cubic-bezier(.45,0,.2,1) 1.05s both}

/* 3 ── filete dos rótulos de seção */
@keyframes mvTagLinha{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html:root body .ac-in [class*="-tag"][data-mv]::before,html:root body .ac-in [class*="-tag"][data-mv]::after{transform-origin:left center;animation:mvTagLinha .95s var(--mv-ease) calc(var(--d,0s) + .12s) both}
@media (min-width:769px){
  html:root body .ac-in :is(.acvg-tag,.acsp-guias-tag,.actc-sec-tag,.acvid-tag)[data-mv]::before{transform-origin:right center}
}

/* 4 ── mídia grande: sai da bobina (revela de cima para baixo) */
@keyframes mvDesenrola{
  from{opacity:0;translate:0 34px;clip-path:inset(-90px -90px 100% -90px)}
  to{opacity:1;translate:0 0;clip-path:inset(-90px -90px -90px -90px)}
}
@keyframes mvAssenta{from{scale:1.14}to{scale:1}}
html:root body .ac-in :is(.acexp-photo,.acvid-player-wrap,.ac6k-machine-wrap,.acsx-stage)[data-mv="midia"]{animation:mvDesenrola 1.3s cubic-bezier(.65,0,.2,1) var(--d,0s) both}
html:root body .ac-in .acexp-photo[data-mv="midia"] img{animation:mvAssenta 1.8s cubic-bezier(.22,1,.36,1) var(--d,0s) both}

/* 7 ── foto de "Rótulos que identificam…": recorte de etiqueta (v2, 27/09)
   Nasce como uma etiqueta pequena de cantos arredondados no centro (o recorte da faca) e se abre até o quadro
   inteiro; a imagem vem de um zoom e assenta. Depois, desliza levemente dentro do quadro com a rolagem (JS). */
html:root body .acauth-foto.acw-foto{position:relative;clip-path:inset(50% 50% 50% 50% round 22px);
  transition:clip-path 1.45s cubic-bezier(.77,0,.18,1) !important}
html:root body .acauth-foto.acw-foto.acw-in{clip-path:inset(0 0 0 0 round 16px)}
html:root body .acauth-foto.acw-foto img{transform:none !important;scale:1.16;translate:0 var(--acw-y,0px);
  transition:scale 1.9s cubic-bezier(.19,1,.22,1) !important}
html:root body .acauth-foto.acw-foto.acw-in img{scale:1.04}
/* celular: a abertura segue a rolagem (motion-wow.js escreve o recorte e o zoom a cada quadro) — sem transição */
html:root body .acauth-foto.acw-foto.acw-scrub,html:root body .acauth-foto.acw-foto.acw-scrub img{transition:none !important}
html:root body .acauth-foto.acw-foto.acw-scrub{clip-path:inset(var(--acw-v,50%) var(--acw-h,50%) var(--acw-v,50%) var(--acw-h,50%) round var(--acw-r,22px)) !important}
html:root body .acauth-foto.acw-foto.acw-scrub img{scale:var(--acw-s,1.16) !important}

/* 5 ── botões: faixa de brilho no hover */
@media (hover:hover) and (pointer:fine){
  html:root body :is(.ach5-btn-gold,.ach5-btn-out,.acbc-btn,.acfaq-cta,.acvid-cta,.acvar-cta,.ac6k-cta,.acauth-cta,.acblog-ponte-btn,.acx-wa){position:relative;overflow:hidden;isolation:isolate}
  html:root body :is(.ach5-btn-gold,.ach5-btn-out,.acbc-btn,.acfaq-cta,.acvid-cta,.acvar-cta,.ac6k-cta,.acauth-cta,.acblog-ponte-btn,.acx-wa)::after{
    content:'';position:absolute;top:-10%;bottom:-10%;left:0;width:55%;pointer-events:none;z-index:1;
    background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,250,235,.42) 50%,rgba(255,255,255,0));
    transform:translateX(-170%) skewX(-18deg)}
  html:root body :is(.ach5-btn-gold,.ach5-btn-out,.acbc-btn,.acfaq-cta,.acvid-cta,.acvar-cta,.ac6k-cta,.acauth-cta,.acblog-ponte-btn,.acx-wa):hover::after{
    transform:translateX(260%) skewX(-18deg);transition:transform .8s cubic-bezier(.3,.7,.2,1)}
}

/* 6 ── troca de página */
@view-transition{navigation:auto}
@keyframes mvVtSai{to{opacity:0}}
@keyframes mvVtEntra{from{opacity:0;translate:0 16px}}
::view-transition-old(root){animation:mvVtSai .3s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:mvVtEntra .55s cubic-bezier(.22,1,.36,1) .05s both}

@media (prefers-reduced-motion:reduce){
  html:root body .ac-in [data-mv="titulo"],html:root body .ac-in [data-mv="titulo"] em,
  html:root body .ac-in [class*="-tag"][data-mv]::before,html:root body .ac-in [class*="-tag"][data-mv]::after,
  html:root body .acauth-foto.acw-foto,html:root body .acauth-foto.acw-foto img{opacity:1 !important;clip-path:none !important;scale:1 !important;translate:0 0 !important}
  html:root body .ac-in [data-mv="midia"],html:root body .ac-in .acexp-photo img{animation:none !important;clip-path:none !important;opacity:1 !important;translate:0 0 !important;scale:1 !important;transform:none}
  html:root body [data-mv="titulo"] em,html:root body .acpf-title em,html:root body .acauth-title em{-webkit-text-fill-color:currentColor !important;background:none !important;animation:none !important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}
