<!-- 1) Biblioteca -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js" defer></script>

<!-- 2) CSS: container e glare com blend-mode -->
<style>
  /* aplique a classe no widget de Imagem ou num wrapper em volta da imagem */
  .movimento-3d{
    display:inline-block;
    position:relative;
    border-radius:12px;         /* ajuste se quiser cantos arredondados */
    overflow:hidden;            /* garante que o glare respeite o raio */
    transform-style:preserve-3d;
    will-change: transform;
    transition: transform 400ms cubic-bezier(.03,.98,.52,.99); /* suaviza o retorno */
  }

  /* garante que a imagem ocupe o espaço certinho */
  .movimento-3d img{
    display:block;
    width:100%;
    height:auto;
    pointer-events:none; /* evita “grudar” o hover na própria imagem */
  }

  /* o VanillaTilt injeta esses elementos para o brilho */
  .movimento-3d .js-tilt-glare,
  .movimento-3d .js-tilt-glare-inner{
    border-radius:inherit;
    pointer-events:none;
  }

  /* “modo de mesclagem” no glare: troque por overlay/multiply/screen conforme o efeito desejado */
  .movimento-3d .js-tilt-glare-inner{
    mix-blend-mode: overlay;   /* tente 'overlay' pra um glare mais “duro” */
    opacity: .8 !important;   /* limite global do glare (além do max-glare do JS) */
  }
</style>

<!-- 3) Inicialização -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const els = document.querySelectorAll(".movimento-3d");

    // Inicializa o tilt
    VanillaTilt.init(els, {
      max: 25,                   // ângulo máximo
      speed: 600,                // velocidade de animação
      scale: 1.05,               // leve zoom
      perspective: 800,          // profundidade 3D
      glare: true,               // ativa glare
      "max-glare": 1,         // 0–1 (controla a intensidade do brilho)
      easing: "cubic-bezier(.03,.98,.52,.99)",
      gyroscope: false,          // evita “tremer” em mobile
      reset: true,               // volta ao padrão ao sair do hover
      transition: true
    });

    // Garantia extra: força o reset ao sair do elemento
    els.forEach(el => {
      el.addEventListener("mouseleave", () => {
        if (el.vanillaTilt) el.vanillaTilt.reset(); // chamada oficial da lib
      });
    });
  });
</script>