.nmtl-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  
  /* To tworzy "scenę" 3D. 1000px to dobra wartość domyślna. */
  /* Wartość jest kontrolowana z panelu Elementora */
  perspective: 1000px; 
  
  /* Zachowuje transformacje 3D dla dzieci */
  transform-style: preserve-3d;
}

.nmtl-image {
  display: block;
  max-width: 100%;
  height: auto;
  
  /* Kluczowa animacja: 
     Gdy mysz opuści obraz, wróci on płynnie do pozycji 0,0,0 */
  transition: transform 0.4s cubic-bezier(.03,.98,.52,.99);
  
  /* Zapewnia, że obraz też jest elementem 3D */
  transform-style: preserve-3d;
}

/* --- Efekt Błysku (Glare) --- */

.nmtl-glare-wrap {
  position: absolute;
  inset: 0; /* Rozciąga na cały kontener */
  overflow: hidden; /* Przycina błysk, który wyjedzie poza */
  pointer-events: none; /* Ignoruje myszkę */
  
  /* Podnosi błysk lekko nad obraz (w osi Z) */
  transform: translateZ(5px);
}

.nmtl-glare {
  position: absolute;
  /* Błysk jest 2x większy niż kontener, aby gradient był miękki */
  width: 200%;
  height: 200%;
  
  /* Punkt startowy (schowany) - JS będzie tym ruszał */
  top: -50%;
  left: -50%;

  /* To jest nasz błysk: okrągły, biały gradient */
  background: radial-gradient(circle, 
      rgba(255, 255, 255, 0.8) 0%, 
      transparent 50%
  );
  
  /* Jak błysk ma się mieszać z obrazem */
  mix-blend-mode: overlay; 
  
  /* Domyślnie niewidoczny */
  opacity: 0;
  
  /* Animacja dla pojawiania się i znikania */
  transition: opacity 0.3s ease-out;
}