/* Cristal translúcido
   - Filtro SVG generado por JS (feTurbulence + blur + displacement)
   - Capa ::before para no pisar el background nativo del contenedor
*/

.sexy-mj-effect-cristal-translucido {
  position: relative;
  overflow: hidden;
}

.sexy-mj-effect-cristal-translucido > * {
  position: relative;
  z-index: 1;
}

.sexy-mj-effect-cristal-translucido::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;

  background: linear-gradient(
    135deg,
    var(--sexy-mj-ct-grad-1, rgba(255, 255, 255, 0.20)) 0%,
    var(--sexy-mj-ct-grad-2, rgba(255, 255, 255, 0.03)) 100%
  );

  -webkit-backdrop-filter: var(--sexy-mj-ct-filter, none) blur(var(--sexy-mj-ct-blur-css, 0px));
  backdrop-filter: var(--sexy-mj-ct-filter, none) blur(var(--sexy-mj-ct-blur-css, 0px));

  transition:
    background var(--sexy-mj-ct-transition, 0.8s) cubic-bezier(0.175, 0.885, 0.32, 2.2),
    opacity var(--sexy-mj-ct-transition, 0.8s) cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.sexy-mj-effect-cristal-translucido:hover::before {
  background: linear-gradient(
    135deg,
    var(--sexy-mj-ct-grad-1-hover, var(--sexy-mj-ct-grad-1, rgba(255, 255, 255, 0.20))) 0%,
    var(--sexy-mj-ct-grad-2-hover, var(--sexy-mj-ct-grad-2, rgba(255, 255, 255, 0.03))) 100%
  );

  -webkit-backdrop-filter: var(--sexy-mj-ct-filter, none) blur(var(--sexy-mj-ct-blur-css-hover, var(--sexy-mj-ct-blur-css, 0px)));
  backdrop-filter: var(--sexy-mj-ct-filter, none) blur(var(--sexy-mj-ct-blur-css-hover, var(--sexy-mj-ct-blur-css, 0px)));
}